寬放大模式——一種前端模塊化的方式探討

 1、所需儲備的知識點javascript

      要理解寬放大模式,須要先儲備兩個知識點。java

     一、匿名函數和閉包web

          匿名函數就不說了,閉包個人理解是在內部做用域返回一個包含內部做用域引用的對象給外部做用域,這樣的話,就能保證內部做用域中的引用不會被垃圾回收器回收的一種機制。ajax

          由此發展出來的一種類的構建方式以下閉包

var object=function(){  
      var field1;  
      var method1=function(){  
  
      };  
      return{  
             field1:field1,  
             method1:method1  
      }  
}();  

    這樣能夠很好的保護私有成員變量和方法。ide

     二、全局變量注入模塊化

           對於全局變量,能夠經過如下方式注入函數

var model=(function(mod){  
    ...  
})(window.model)  

    這個時候mod其實就是全局的modelui

2、寬放大模式this

            有了這兩個知識點,就能夠引出今天的主角,寬放大模式。它是這個樣子的

var module = ( function (mod){   
    ...   
    return mod;   
})(window.module || {});  

     因爲加入了和空對象或的操做,能夠不用考慮js加載順序對模塊的影響。

3、模塊化實現

            利用以上知識來實現模塊化。以easyui來舉例。

            咱們有一個用戶管理的頁面,咱們把它分紅兩個層controller和service

            controller層:該層用來構建easyui的組件,好比datagrid,searchForm分別對應datagrid.js和searchForm.js兩個js文件。它是DOM和業務邏輯的(service層)的橋樑

            service層:主要由controller層進行調用,經過ajax調用webserver實現業務邏輯

            好比:controller層的datagrid.js能夠這樣寫

nameSpace.ns("ZVideo.user");  
  
ZVideo.user=(function(user){  
  
    user.createDatagrid=function(config){  
         user.datagrid=$('#'+config.datagridId).datagrid({  
              ...  
              toolbar : [{  
                          text:'分配角色',  
                          iconCls:'icon-edit',  
                          handler:Base.bindArguments(this,function(){  
                                  var row=$('#'+this.config.datagridId).datagrid('getSelected');  
                                  this.addRole(row);  
                          })  
             }],  
             ...  
         });  
  
    };  
  
    return user;  
  
}(ZVideo.user || {}));  

    注意,這裏的this.addRole則是服務層的方法,並不在該文件中定義

    咱們看一下服務層的userService.js的寫法

nameSpace.ns("ZVideo.user");  
  
ZVideo.user=(function(service){  
  
   service.addRole=function(row){  
        if(!row){  
            $.messager.show({  
                msg:'請選擇一項進行角色分配!',  
                title:'錯誤'  
            });  
            return;  
        }  
        //分配角色的業務邏輯實現  
        ...  
   }  
  
   return service;  
  
}(ZVideo.user || {}));  

    能夠看到,經過這種方式,很順利地把應用拆分紅了controller層和service層。

相關文章
相關標籤/搜索