模块化是任何强大的应用程序架构中不可或缺的一部分,它通常能帮助我们清晰的分离和组织项目中的代码单元。
在Javascript中,实现模块的方式包括:
1、对象字面量表示法
2、Module模式
3、AMD模式
4、CommonJS模式
5、ECMAScript Harmony模式

1、对象字面表示法:一个对象被描述为一组包含在大括号({})中,以逗号分割的键值(name/value) 对。对象名称可以是字符串或标识符,名称和值直接用冒号连接。对象中最后一个键值(name/value) 对后面不用加逗号,加逗号会导致报错。对象字面量不需要使用new运算符来进行实例化。
下面是一个使用对象字面量表示法定义的例子:
var myModule = {

    myProperty : "testValue",

    // 对象字面量可以包含属性和方法
    myConfig : {
        useCaching : true,
        language : "en"
    },

    // 基本方法
    myMethod : function () {
        console.log("The name of this method is myMethod.");
    },

    // 根据当前配置输出信息
    myMethod2 : function () {
        console.log("Caching is:" + (this.myConfig.useCaching) ? "enabled" : "disabled");
    },

    // 重写当前配置
    myMethod3 : function (newConfig) {
        if (typeof newConfig == "object") {
            this.myConfig = newConfig;
            console.log(this.myConfig.language);
        }
    },
};

myModule.myMethod();
myModule.myMethod2();
myModule.myMethod3({
    language : "cn",
    useCaching : false
});

使用对象字面量有助于封装和组织代码。

 2、Module(模块)模式
Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在Javascript中,Module模式用于进一步模拟类的概念,通过这种方式能够是一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特俗部分。降低函数名与在页面上其他脚本定义的函数冲突的可能性。
Module模式使用闭包封装“私有”状态和组织,提供一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域,与其他的开发人员的代码发生冲突。Module模式只提供一个公有的API,而其他的一切则都是维持在私有闭包里。
Module模式提供了一个屏蔽处理底层事件逻辑的整洁解决方案,同时只暴露一个接口供应用程序的其他部分使用。Module模式非常类似于一个立即调用的函数表达式,它返回的是一个对象而不是一个函数。
在Javascript中没有真正意义上的“私有”,它不像其他语言一样,它没有访问修饰符。从技术角度来讲,我们不能称变量为共有或私有,因此需要使用函数作用域来模拟这个概念。Module模式由于闭包的存在,声明的变量和方法只在该模式内部可用,但是它返回对象上定义的变量和方法对外部都是可以用的。
下面是一个Module模式 的简单例子,包含命令空间、公有和私有变量:
var myNamespace = (function () {

    // 私有变量
    var myPrivateVar = 1;

    // 私有函数
    var myPrivateMethod = function (text) {
        console.log(text);
    }

    return {

        // 公有变量
        myPublicVar: "Hello JS",

        // 调用私用变量和私有方法的公有函数
        myPublicMethod: function (name, age) {

            // 累加私有变量
            myPrivateVar++;

            // 传入参数调用私有方法
            myPrivateMethod("My name is " + name + "," + age + " years old this year");

        }

    }

})();
3、Module模式引入混入
Module模式允许将全局变量作为参数传递给模块的匿名函数,并按照我们所希望的为他们取个本地别名。
// 全局模块
var myModule = (function (JQ, _) {

    function privateMethod1(){
        JQ('.container').html('test');
    }

    function privateMethod2(){
        console.log(_.min([300,2,100,78,45]));
    }

    return {
        publicMethod: function(){
            privateMethod1();
        }
    }

})();

myModule.publicMethod();
4、工具包、框架的Module模式的实现
关于工具包、框架的Module模式的实现,在这里就以我们常用的jQuery为例,定义library函数,声明一个新库,并在创建的新库时将init函数自动绑定到document.ready上:
function library(module){
    $(function(){
        if(!module.init){
            module.init();
        }
    });
}

var myLibrary = library(function(){
    return {
        init: function(){
            //模块实现
        }
    };
})();
总结一下Module模式的优缺点
优点:Module相比真正封装的思想,它对于很多拥有面向对象背景的开发人员来说更加整洁;它支持私有数据,在Module模式中,代码的公有(Public)部分能够接触私有部分,但是外界无法接触类的私有部分。
缺点:由于我们访问公有和私有成员的方式不同,当我们想改变可见性时,实际上我们必须要修改每一个曾经使用该成员的地方;我们也无法访问那些之后在方法里添加的私有成员;无法为私有成员创建自动化单元测试,bug需要修补时会增加额外的复杂性,我们必须覆盖所有与有bug的私有方法进行交互的公有方法,开发人员也无法轻易的扩展私有方法,私有方法并不像最初显现出来的那么灵活。

标签: JavaScript, Module模式, Javascript设计模式, 设计模式, Javascript模式, Module模式的优缺点

添加新评论