基于require.js及AMD规范的js闭包笔记

最新推荐文章于 2021-09-10 17:13:45 发布

原创最新推荐文章于 2021-09-10 17:13:45 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏

首先说说require.js

这个js是按需加载js的，也就是说将js写成java引入外包的模式，需要什么就加载什么。传统的写法是一坨js直接加载进来，用不用反正是都扔进来了，大大降低了效率，维护起来也很麻烦。

做的时候我们需要一个入口页面，我这里用的是HTML

<script src="js/lib/require.js" defer async="true" data-main="js/app"></script>

src就是你require.js所存在的路径，data-main的值即就是入口js。

下面是app.js的内容：

requirejs.config({
    //默认从 js/lib 中加载模块
    baseUrl: 'js/lib',
    urlArgs: "bust=v201501152",
    //如果模块ID以app开头，则会在 js/app 目录下寻找
    paths: {          //path中配置各个js文件的基本路径，冒号前是今后引用该js的缩写名称
        app: '../app',
        zepto: 'zepto',     
        zepto_cookie: 'zepto.cookie',
        conf: '../conf',
        tools: '../tools',
        tm: '../../template/build',
        mvc: '../mvc',
        'socket.io': '../plugin/socketio/socket.io'
    },
    shim: {                  //shim中配置的是js之间的依赖关系， 
                            //或者export出的全局名称（在外部使用时比较方便，export后全局可用）
        'zepto_cookie': {deps: ['zepto']},
        'socket.io': {exports: 'io'},
        zepto: {
            exports: '$'
        }
    }
});

requirejs(['zepto','mvc/workreport/model/workreport_model'], function ($,_wm) { 
/**这里比较重要：这个写法就是基于AMD规范的闭包。
[]中写需要引入的js，例如[]中的第二个参数就是上面path中定义的路径别名+workreport_model.js
对于'mvc'的相对路径。function中的参数，对应[]中的js，其实相当于java中new了一个类，这个时候
这个类中允许被调用的方法就可以 以"类名.方法名"的方式调用。例如代码中的
_wm.getMyTeam();
**/
    function init() {
        _wm.getMyTeam();
    };
    $(document).ready(function (){
        init();
    });
})

接着我们来看看_wm中是怎么写的,上面说到_wm其实就是对应的workreport_model.js：

define(['zepto','tools/consts','mvc/workreport/controller/workreport_ctrl','mvc/common/util/DIVHelper'],function($,_tc,_wrc,_dh){

    //var requestBaseUrl = _t.baseUrl;
    var requestBaseUrl = _tc.baseurl;
    //var token = _tu.token;
    var token = 'EE6C98324197BF613E4BA7BC3EEBDAD3340A9499B4438EAA15282F22D05C8DB2AF5A67B5A7C5381ACA07001BB1D23632';
    var teamData = null;
    var ccData = null;
    var errData = null;
    init=function(){
        getMyTeam();
    };
    /*
    * 根据token获取当前使用者相关的team
    * */
    getMyTeam = function(){
        var url = 'taskhelper/team/getMyTeam?tst=1';
        var option = {
            type:'POST',
            dataType:'json',
            url:requestBaseUrl+'/'+url+'&token='+token,
            success:function(data){
                teamData = eval(data);
                _wrc.init(teamData);
            },
            error:function(e){
                errData = e;
            }
        };
        $.ajax(option);
    };
    openTree=function(){
        _dh.WinTip(_dh.input_bgId,_dh.input_showId);
    };

    //原java调用用回调方法
    //callbackfn = function(msg){
    //    alert(msg);
    //}
    return{
        init:init,
        getMyTeam:getMyTeam,
        openTree:openTree
    }
});

我们看到AMD的标准闭包写法是

define([js1,js2...],function(name1,name2...){

//some code

return{

};

});

在最后的return中，可以return方法，也可以是属性。只有被return其他引用本js文件的js才可以使用该方法或者属性，有点java里public 或者 private的意思。与app.js一样，这个js也在define的时候引用了很多其他的js并给与了相应的别名，方便使用。