宽放大模式——一种前端模块化的方式探讨

 1、所需储备的知识点

      要理解宽放大模式，须要先储备两个知识点。

     一、匿名函数和闭包

          匿名函数就不说了，闭包个人理解是在内部做用域返回一个包含内部做用域引用的对象给外部做用域，这样的话，就能保证内部做用域中的引用不会被垃圾回收器回收的一种机制。

          由此发展出来的一种类的构建方式以下

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

　　　　这样能够很好的保护私有成员变量和方法。

     二、全局变量注入

           对于全局变量，能够经过如下方式注入

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

　　　　这个时候mod其实就是全局的model

2、宽放大模式

            有了这两个知识点，就能够引出今天的主角，宽放大模式。它是这个样子的

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层。