为了账号安全,请及时绑定邮箱和手机立即绑定

旧社会 JS 模块化编程

标签:
JavaScript

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

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));
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消