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

柔光的暖阳◎ 2022-07-15 05:38 76阅读 0赞

一、所需储备的知识点

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

1、匿名函数和闭包

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

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

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

2、全局变量注入

对于全局变量，可以通过以下方式注入

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

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

二、宽放大模式

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

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

由于加入了和空对象或的操作，可以不用考虑js加载顺序对模块的影响。

三、模块化实现

利用以上知识来实现模块化。以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层。