JavaScript教程 - 20 模块化

模块化就是将代码按照功能分割为独立、可复用的模块，这样利于代码的组织和管理以及代码复用。还可以解决了全局变量污染等问题。

20.1 立即执行函数

在以前的 JavaScript 中，使用立即执行函数表达式（IIFE），通过闭包的方式来模拟模块化，但缺乏标准化的依赖管理。

举个栗子：

我们定义一个 moduleA.js，内容如下：

// 模块A
const moduleA = (function() {
  let privateVar = 'A的私有变量';
  function privateMethod() {
    console.log(privateVar);
  }
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

• 在上面的代码中创建了一个立即执行函数，并将函数的返回结果赋值给 moduleA，这个函数其实是构成了一个闭包，函数内的变量外部是无法访问的，避免被其他代码修改，造成污染。

在使用的时候，引入上面的 js 并使用：

<script src="moduleA.js"></script>
<script>
  moduleA.publicMethod(); // 输出: A的私有变量
</script>

• 但是 IIFE 这种方式无法声明依赖关系，只能依赖 script 的加载顺序，如果模块 A 依赖模块 B，必须先引入 B，否则就报错。所以说 IIFE 只是语法技巧，并不是真正意义上的模块机制，它不能自动管理依赖、导出、导入。

20.2 现代模块化方式

ECMAScript 2015（ES6）引入的原生模块系统，可以使用 export 导出模块成员，使用 import 导入模块成员，并且支持静态解析（编译时确定依赖关系）。

内容未完......

查看完整内容 →