Javascript 模块化

当今的网站已经逐渐变成的 Web 应用，网页引入的 Javascript 文件也越来越多，越来越复杂。网页就像桌面程序一样，需要一系列软件工程的方法，来管理网页的业务逻辑。所以 Javascript 模块化就成为了一种迫切的需求。但是 Javascript 又没有像 JAVA 语言中的类特性，所以如何实现模块化就成了一个难题。令人欣慰的是，经过 Javascript 的一系列努力，Javascript 模块化已经趋于成熟，本文将会总结模块化的几种方法以及模块化的规范。

如何实现模块化

原始写法

模块就是实现某一功能的一个程序块。比如下面这段代码就组成了一个模块

1
2
3
4
5
6
function a() {
  //dosomething
}
function b() {
  //dosomething
}

上面程序块中的函数 a() 和 b()，组成了一个模块。但是这种做法暴漏出了一个明显的缺点，“污染”了全局变量，在多人开发过程中，无法保证其他人与你定义的变量名不会发生冲突，而且模块成员之间看不出直接关系。

对象写法

为了解决这个问题，我们就可以把模块写成对象的形式，模块成员作为对象的属性存在。例如

1
2
3
4
5
6
7
8
9
var m1 = {
  _count: 0,
  a: function() {
    //dosomething
  },
  b: function() {
    //dosomething
  }
};

这种写法又存在一种问题就是，模块的成员被“暴露”在外部可以被直接修改，不能以“私有变量”的形式存在。

立即调用函数

严格来讲，Javascript 中没有私有变量的概念，所有的对象属性都是公开的。不过，任何在函数中定义的变量，都可以认为是私有变量，因为你不能在函数的外部访问它们。

1
2
3
4
5
6
7
8
9
10
11
12
13
var m1 = (function() {
  var _count = 0;
  var a = function() {
    //dosomething
  };
  var b = function() {
    //dosomething
  };
  return {
    a: a,
    b: b
  };
})();

这样书写之后，代码外部无法读取内部的_count 变量，只能使用模块提供的 a 和 b 特权函数。这就是 Javascript 模块的基本写法。

放大模式

1
2
3
4
5
var m1 = (function(mod) {
  mod.c = function() {
    //dosomething
  };
})(m1);

上面的代码为 m1 模块添加了一个新方法 c()，然后返回新的 m1 模块。

宽放大模式

浏览器环境中，模块的每个部分可能是从网上获取的，有时无法知道哪个部分先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在的空对象，这时就要采用“宽放大模式”。

1
2
3
4
var m1 = (function(mod) {
  //dosomething
  return mod;
})(window.m1 || {});

宽放大模式就是允许立即调用函数可以是空对象。

全局变量注入

1
2
3
var m1 = (function(mod) {
  //dosomething
})(window.model);

这个时候的 mod 其实就是全局的 model

模块化规范

CommonJs

官方是这样解释 CommonJS

The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

它提供了一个类似于 Ruby 和 Java 的标准库，有了这个，我们就可以使用 CommonJS APIs 构建能够运行在不同的主机环境中的应用程序。比如，NodeJS 的模块系统就是参照 CommonJS 规范的实现，Webpack 也是以 CommonJS 新式来书写的。

1
2
var math = require('math');
math.add(2, 3); //5

这行代码就是在程序中引入了一个数学模块

AMD

在 CommonJS 出现以后，服务端的模块概念已经形成，自然而然客户端也需要模块化。如果两者能够兼容，一个模块能够同时在服务端和客户端运行。

1
2
var math = require('math');
math.add(2, 3); //5

还是这行代码，如果在浏览器中运行，它会出现一个及其严重的问题，就是 math.add(2, 3) 这行代码必须等待 math 模块加载结束之后才能运行。如果加载时间过长，应用就会出现明显的卡顿。

因此浏览器端的模块加载就应该采用异步(Async)的形式，这就是 AMD 规范诞生的原因。require.js 库实现了 AMD 规范。之后会进一步研究这个规范。

CMD

玉伯写的 sea.js 就是遵循他提出的 CMD 规范，与 AMD 类似。

Reference: Ruanyf