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")));

 });

 

 

   這種方式先通過prototype繼承方式把每一個小的操作封裝成屬性，init和closeWindow，然后可以進行初始化加載如my.init();也可以綁定到某個操作事件上如$("#contact").add(my.closeWindow());這些封裝一氣而成。

還有定義單個屬性封裝

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

                                alert('hello');

                    }
   }

 

 

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

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