JS 模块化

当我们的JS程序写得越来越复杂的时候，常常需要将相应的功能分割成各个独立小模块进行编写，这里介绍一下常用的几种JS模块化方法。

 

1 原始写法

先举个简单的例子吧，上代码：

var name = "global";

function f1() {
    name = "f1";
}
function f2() {
    name = "f2";
}
f1();
console.log(name);

一个函数就是一个独立的小模块，各自实现独立的功能。

优点：简单

缺点："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。比如上面代码运行后，name的值已经变了f1。

 

2 对象写法

把模块写成一个对象，所有的模块成员都放到这个对象里面。

var module1 = new Object({
    count: 0,
    f1: function () {
        this.count = 1;
    },
    f2: function () {
        this.count = 2;
    },
    print: function () {
        console.log(this.count);
    }
});

module1.f1();
//module1.count = 5;
module1.print();

上面的函数f1()和f2()，都封装在module1对象里。使用的时候，就是调用这个对象的属性。

module1.f1();

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

module1.count = 5;