首頁 > 文章 > web前端 > javaScript封裝的各種寫法

javaScript封裝的各種寫法

韦小宝原創: 2018-01-22 10:00:362925瀏覽

這篇文章主要介紹了javaScript封裝的各種寫法,透過列舉優缺點和使用場景詳細介紹了幾種JavaScript封裝的格式,對JavaScript的感興趣朋友可以參考下本篇文章

在javascript的世界裡，寫法是個神奇的現象，真是百家齊開放啊！每次看到老外寫的js元件，想法和寫法都怪異，就沒看到一個js結構基本上相同的程式碼出來。今天，我就來談談js寫法，我在開發過程中，也寫了幾種。對於效能方面，如果程式碼結構或邏輯寫的不好，會造成電腦CPU的運算加大，運作效能降低，js的寫法對效能的影響也是至關重要的。

通常寫js元件開發的，都會用到匿名函數的寫法去封裝一個對象，與外界形成一個閉包的作用域。（這裡對於js的繼承，多態，我就不多說了，高級程式設計師應該具備這些知識，如果您也做過java開發，這個概念太熟悉了。）

主要對封裝進行研究，因為前後台都會涉及到物件導向的概念，對於封裝，怎麼封裝，封裝的效能，等等很重要概念。封裝（在程式世界是第一個概念，我個人認為），全天下漫天遍野的封裝，JQuery，EXT和Prototype.js封裝的是javascript，jQuery uI和jQuery mobile封裝著jQuery，java中的JDBC在spirng, Hibernate等框架封裝著，這裡列舉幾個例子，還有許多不一一介紹。

回到主題javaScript封裝寫法，先來看看一個簡單的

function hello(){
 var a = 'hello';
 alert(a);
}

js函數是最原始，最基礎的封裝，懂js一目了然，如果你的頁面不需要很多js互動操作，就可以用這種簡單的方式，如果你喜歡用JQuery,則需要寫成這樣

$(function(){
 $('#id').click(function(){
 alert('hello');
 })
});

如果用Node.js則比較複雜點，因為要Node.js要載入一個HTTP模組，寫法如下

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

再深層封裝寫法，如果遇到大量使用js操作，單憑每個小的函數無法滿足，因為它們存在一個公共的域中，寫法多而散很容易造成了很多bug因素，需要規則。 js創造者給我們提供了一個叫匿名函數，顧名思義，匿名函數就是沒有實際名字的函數，它的格式很多種，！ function(){}(),(function(){})(),(function(){}()),new function(){},void function(){}();JQuery.js就是一個匿名函數封裝,先看最常用的

 (function(){
 star.init = (function(name){
 var e = new Editor(name, Data.toolbarData);
 });
 })();

如果開發一些js元件的時候，可以先建立一個物件，給這個物件屬性和方法，讓這個物件能夠單獨操作和可以和其他物件合作

var klm = klm || {};
 klm = (function(){
 //第一个写法
 klm.init = function(){
  alert('hello');
 }

 //第二个写法
  klm.browser = (function(ua){
  var b = {
  msie:/msie/.test(ua) && !/opera/.test(ua),
  opera:/opera/.test(ua),
  safari:/webkit/.test(ua) && !/chrome/.test(ua),
  firefox:/firefox/.test(ua),
  chrome:/chrome/.test(ua)
  };
  })(window.navigator.userAgent.toLowerCase());
  //将其定义方法以接口方式返回给外界引用
  return{
  init: klm.init,
  browser:klm.browser 
  }
 })();

接下來這種js封裝寫法是我自己比較喜歡的

var myOpinion = myOpinion || {};
 myOpinion.prototype={
 init:function(obj,i){
  alert('hello');
  },
  closeWindow:function(obj,d){
  obj.click(function(){
  d.hide();
  });
  }
 }
 $(function(){
  var my = myOpinion.prototype;
  my.init($(".z-sidebar li em"),$("#contact")); 
  $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));
 });

type一個小的操作封裝成屬性，init和closeWindow，然後可以進行初始化載入如my.init();也可以綁定到某個操作事件上如$("#contact").add(my.closeWindow() );這些封裝一氣而成。

還有定義單一屬性封裝

 WinShow.create = function(c,body){ 
  var _head = '<p class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></p>';
  this.container.innerHTML = _head;
  return this.container;
  this.container.onclick = function(e){
  alert('hello');
  }
 }

在這裡我建立一個create屬性以匿名函數形式封裝一段HTML程式碼，並給這個 HTML程式碼綁定點擊事件。

列舉以上幾種js封裝形式，但是小生還在研究中，這幾種都能實現相同操作，可是寫法有些區別，對於性能方面誰有更好的見解可以點評我，進行交流。

javaScript封裝的各種寫法

相關文章