本文共 1736 字，大约阅读时间需要 5 分钟。

为什么有模块概念？

理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也没有”模块”（module）。

在js里，何为“模块”？

在js里面，我们可以把模块定义为实现特定功能的一组方法，只要把实现某一功能的函数放一起，就可以看成是一个“模块”。

1. 模块的基础写法

//  例如：//  这是一个弹窗功能的一组方法//  创建弹窗function fn1(){    // do  something}// 打开弹窗function fn2(){    // do  something}// 关闭弹窗function fn3(){    // do  something}

这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

2. 对象写法

为了解决上面这种基础写法的缺陷，我们可以把它写成一个对象，模块成员被包含在内。

let moduleAlert =  {       id: 1,       fn1: function {           // do  something       },       fn2: function {           // do  something       },       fn3: function {           // do  something       }}

调用：

moduleAlert.fn1();moduleAlert.fn2();moduleAlert.fn3();

封装了一层，更加清晰，调用的时候一目了然。

3. 模块模式

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。

var Counter = (function() {     var privateCounter = 0;      function changeBy(val) {          privateCounter += val;      }      return {          increment: function() {              changeBy(1);          },          decrement: function() {              changeBy(-1);          },          value: function() {              return privateCounter;          }      }     })();  console.log(Counter.value()); /* logs 0 */  Counter.increment();  Counter.increment();  console.log(Counter.value()); /* logs 2 */  Counter.decrement();  console.log(Counter.value()); /* logs 1 */

• 该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。
• 这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。
• 这三个公共函数是共享同一个环境的闭包。多亏 JavaScript 的词法作用域，它们都可以访问 privateCounter 变量和 changeBy 函数。

转载地址：http://zxqwz.baihongyu.com/