继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

旧社会 JS 模块化编程

王益达
关注TA
已关注
手记 38
粉丝 104
获赞 632

模块导出函数 -- 不暴露私有成员

var module1 = (function () {
    // 私有属性 
    var _p = 0;

    // 私有方法
    function _method() {
        // ...
    };

    // 输出模块
    var mod = {};

    // 共有属性
    mod.p1 = 1;
    mod.p2 = 2;

    // 共有方法
    mod.m1 = function () {    
        //...
    }; 
    mod.m2 = function () {  
        //...
    };

    return mod;
})();

放大模式 -- 继承并扩展模块

var module1 = (function (mod) {
    mod.m3 = function () {   
        //...
    };  
    return mod;
})(module1);

宽放大模式 -- 异步执行脚本

在浏览器环境中,模块的各个部分通常是从网络获取,有时无法知道哪个部分会先加载。采用“放大模式”写法,先执行的部分有可能加载一个不存在空对象。这时,就要采用"宽放大模式"

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

子模块

子模块拥有一切一般模块的进阶优势,包括了放大模式和私有化状态

module1.sub = (function () {
    var mod = {};
    // ...
    return mod;
}());

全局变量导入 -- 显式地将其他变量输入模块

保证模块的独立性,使得模块之间的依赖关系清晰明显

var module1 = (function ($, YAHOO) {
    //...
})(jQuery, YAHOO);

综合案例

一个子模块动态地把自身加载到它的父模块(如果父模块不存在则创建它)
这种编程模式允许一整个复杂层级结构代码库通过子模块并行地完成加载

var util = (function (parent, $) {
    var mod = parent.ajax = parent.ajax || {};
    mod.get = function (url, params, callback) {
        // ok, so I'm cheating a bit :)
        return $.getJSON(url, params, callback);
    };
    // etc...
    return parent;
}(util || {}, jQuery));
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP