JavaScript 模块化编程（一）：模块的写法

JavaScript 模块化编程（一）：模块的写法
JavaScript 模块化编程（二）：规范
JavaScript 模块化编程（三）：实现一个RequireJS
JavaScript 模块化编程（四）：结合Node源码分析CommonJs规范

---

1.原始写法

模块就是实现特定功能的一组方法。我们常常会把非常多复杂的功能封装成一个个的函数：

function f1() {
    // todo
}

function f2() {
    // todo
}

但是当整个项目变大了以后，就会遇到很多问题，容易"污染"全局变量，与其他模块发生变量名冲突，而且模块成员之间看不出直接关系

---

2.封装到对象

到了第二个阶段为了避免全局变量的污染，我们会将单个模块封装到一个对象内部。如下：

const module = {
    _number: 10,
    f1: () => { 
        // todo
    },
    f2: () => { 
       // todo
    }
}

这样我们就每个模块定义一个对象，在需要的时候直接调用就好了，但是这样也会存在一个问题 这样写的话会暴露全部的对象内部的属性，内部状态可以被外部改变. 例如：

module._number = 100

如果我们支付相关模块这样子来写的话。我们随意的来改变支付的金额，那样就会出现比较危险的情况

---

3.立即执行函数写法

后来，利用立即执行函数 来达到不暴露私有成员的目的

const module = (function() {
    let  _number  = 100
    const m1 = () => {
         // todo
    }
    const m2 = () => {
         // todo
    }
    return {
        f1: m1,
        f2: m2
    }
})()

通过立即执行函数，让外部根本没有时间从外部去修改内部的属性，从而达到一定的防御作用。

　　console.info(module._number); //undefined

---

4.局限有何局限？

立即执行函数 + script标签
局限性：

1、存在全局空间污染
2、需手动管理模块间的依赖关系，存在重复加载与循环引用的问题，不具备可扩展性
3、无法实现按需加载

这时候就需要有模块化方案帮我们解决这些问题，模块化要实现两个东西：模块加载与模块封装。

---

参考

Javascript模块化编程（一）：模块的写法