JS模块化编程简介

模块就是提供一个接口，却隐藏状态与实现的函数或对象。一般在开发中使用闭包函数来构建模块，摒弃全局变量的滥用，规避 JavaScript 缺陷。

全局变量是 JavaScript 最糟糕的特性之一，在一个大型 Web 应用中，全局变量简直就是一个魔鬼，可能带来无穷的灾难。

示例1

本示例为 String 扩展一个 toHTML 原型方法，该方法能够把字符串中的 HTML 转义字符替换为对应的字符串。

//为Function增加method原型方法
Function.prototype.method = typeof Function.prototype.method === "function" ?
    Function.prototype.method :  //先检测是否已经存在该方法，否则定义函数
    function (name, func) {
        if (!this.prototype[name]){  //检测当前类型中是否存在指定名称的原型
            this.prototype[name] = func;  //绑定原型方法
        }
        return this;  //返回类型
    };
String.method('toHTML', function () {  //为String增加toHTML原型方法
    var entity = {  //过滤的转义字符实体
        quot : '""',
        lt : '<',
        gt :'>'
    };
    return function () {  //返回方法的函数体
        return this.replace(/&([^&;]+);/g, function (a, b) {  //匹配字符串中HTML转义字符
            var r = entity[b];  //映射转义字符实体
            return typeof r === 'string' ? r : a;  //替换并返回
        });
    };
}());  //生成闭包体

在上面代码中，为 String 类型扩展了一个 toHTML 原型方法，它调用 String 对象的 replace 方法来查找以&开头和以;结束的字符串。如果这些字符可以在转义字符实体表 entity 中找到，那么就将该字符实体替换为映射表中的值。toHTML 方法用到了一个正则表达式。 return this.replace(/&([^&;]+);/g, function (a, b) { var r = entity[b]; return typeof r === 'string' ? r : a; }); 在最后一行使用()运算符立刻调用刚刚构造出来的函数。这个调用所创建并返回的函数才是 toHTML 方法。

console.log('<quot;>');  //<quot;>
console.log('&lt;quot;&gt;'.toHTML());  //<''>

模块利用函数作用域和闭包来创建绑定对象与私有属性的关联。在这个示例中，只有 toHTML 方法才有权访问字符实体表 entity 这个数据对象。

模块开发的一般形式：一个定义了私有变量和函数的函数，利用闭包创建可以访问到的私有变量和函数的特权函数，最后返回这个特权函数，或者把它们保存到可访问的地方。

使用模块可以避免全局变量的滥用，从而保护信息的安全性，实现优秀的设计实践。使用这种模式也可以实现应用程序的封装，或者构建其它框架。

模块模式通常结合实例模式使用。JavaScript 的实例就是对象字面量表示法创建的，对象的属性值可以是数值或函数，并且属性值在该对象的生命周期中不会发生变化。模块通常作为工具为程序其他部分提供功能支持。通过这种方式能够构建比较安全的对象。

示例2

下面示例设计一个能够自动生成序列号的对象。toSerial() 函数返回一个能够产生唯一序列字符串的对象。这个字符串由两部分组成：字符前缀+序列号。这两部分可以分别使用 setPrefix 和 setSerial 方法进行设置，然后调用实例对象的 get 方法来读取这个字符串。没执行该方法，都会自动产生唯一一个序列字符串。

var toSerial = function () {  //包装函数
    var prefix = '';  //私有变量，前缀字符，默认为空字符
    var serial = 0;  //私有变量，序列号，默认为0
    return {  //返回一个对象直接量
        setPrefix : function (p) {  //设置前缀字符
            prefix = String (p);  //强制转换为字符串
        },
        setSerial : function (s) {  //设置序列号
            serial = typeof s == "number" ? s : 0;  //如果参数不是数字，则设置为0
        },
        get : function () {  //读取自动生成的序列号
            var result = prefix + serial;
            serial += 1;  //递加序列号
            return result;  //返回结果
        }
    };
};
var serial = toSerial ();  //获取生成序列号对象
serial.setPrefix ('NO.');  //设置前缀字符串
serial.setSerial (100);  //设置起始序号
console.log(serial.get());  //“No.100”
console.log(serial.get());  //“No.101”
console.log(serial.get());  //“No.102”

serial 对象包含的方法都没有使用 this 或 that，因此没有办法损害 serial，除非调用对应的方法，否则不能改变 prefix 或 serial 的值。serial 对象是可变的，所以它的方法可能会被替换掉，但是替换后的方法依然不能访问私有成员。如果把 serial.get 作为一个值传递给第三方函数，那么这个函数只能通过它产生唯一字符串，不能通过它来改变 prefix 或 serial 的值。