模块化编程

各种写法

一、原始写法

function m1() {
  //...
}

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

二、对象写法

var module1 = new Object({
  _count: 0,
  m1: function () {
    //...
  },
  m2: function () {
    //...
  },
});
module1.m1();

缺点：这样会暴露所有模块成员，内部状态可以被外部改写。比如 module1._count = 5;

三、立即执行函数写法

var module1 = (function () {
  var _count = 0;
  var m1 = function () {
    //...
  };
  var m2 = function () {
    //...
  };
  return {
    m1: m1,
    m2: m2,
  };
})();
console.info(module1._count); //undefined

优点：不暴露私有成员。比如外部无法读取_count。

四、放大模式

三的扩展，如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用”放大模式”。

在三的代码基础上：

module1 = (function (mod) {
  mod.m3 = function () {
    //...
  };
  return mod;
})(module1);
//传入module1，在此基础上扩展module1

module 可调用 m1,m2,m3 方法

五、宽放大模式

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

module1 = (function (mod) {
  //...
  return mod;
})(window.module1 || {});

与”放大模式”相比，＂宽放大模式＂就是”立即执行函数”的参数可以是空对象。

六、输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module1 = (function ($, YAHOO) {
  //...
})(jQuery, YAHOO);

上面的 module1 模块需要使用 jQuery 库和 YUI 库，就把这两个库（其实是两个模块）当作参数输入 module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

AMD 规范

加载模块时需要一个规范，但 js 模块还没有官方规范。

目前，通行的 Javascript 模块规范共有两种：CommonJS 和 AMD。主要介绍 AMD，但是要先从 CommonJS 讲起。

CommonJS

在 CommonJS 中，有一个全局性方法 require()，用于加载模块。假定有一个数学模块 math.js：

var math = require("math"); //加载模块
math.add(2, 3); // 5 调用模块返回的方法

CommonJS 常用于 node.js 等服务端编程，不适用于浏览器环境。

上面代码的第二行 math.add(2,3)，在第一行 require(‘math’)之后运行，因此必须等 math.js 加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。因此，浏览器端的模块，不能采用”同步加载”，只能采用”异步加载”。这就是 AMD 规范诞生的背景。

AMD

AMD 采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD 也采用 require()语句加载模块，但是不同于 CommonJS，它要求两个参数：

require([module], callback);

例子：

require(["math"], function (math) {
  math.add(2, 3);
});

异步说明：

require(["math1"], function () {
  //模块1
  //do something
});
require(["math2"], function () {
  //模块2
  //do something
});
//do something//非模块3

非模块 3 会先运行，而模块 1 和模块 2 会先运行先加载完的模块，即使其中一个模块出现错误也不影响其他模块。不会使浏览器处于”假死”状态。

引入 js 的普通写法：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>

缺点：加载时，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间越长；由于 js 文件之间存在依赖关系，必须严格保证加载顺序（比如上例的 1.js 要在 2.js 的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js 的诞生，就是为了解决这两个问题：

（1）实现 js 文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

加载 require.js：

<script src="js/require.js"></script>

这样加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

<script src="js/require.js" defer async="true"></script>

async 属性表明这个文件需要异步加载，避免网页失去响应。IE 不支持这个属性，只支持 defer，所以把 defer 也写上。

接着加载自己在 js 下的代码 main.js：

<script src="js/require.js" data-main="js/main"></script>

data-main 属性的作用是，指定网页程序的主模块（整个网页的入口代码。它有点像 C 语言的 main()函数，所有代码都从这儿开始运行）。在上例中，就是 js 目录下面的 main.js，这个文件会第一个被 require.js 加载。

主模块的写法（main.js 中的写法）

require(["jquery", "underscore", "backbone"], function ($, _, Backbone) {
  // some code here
});

程序会等先加载完 jq 等 js 文件，再运行回调函数中的程序。

若所在文件夹位置与 require 不同，可在前面加上下面的程序指点位置（相对 require 的目录）：

require.config({
  paths: {
    jquery: "lib/jquery.min",
    underscore: "lib/underscore.min",
    backbone: "lib/backbone.min",
  },
});

即使在同一目录，也可通过上面的方法自定义名称。

或用 baseUrl 指定基目录：

require.config({
  baseUrl: "js/lib",
  paths: {
    jquery: "jquery.min",
    underscore: "underscore.min",
    backbone: "backbone.min",
  },
});

require.js 要求，每个模块是一个单独的 js 文件。这样的话，如果加载多个模块，就会发出多次 HTTP 请求，会影响网页的加载速度。因此，require.js 提供了一个优化工具（RequireJS Optimizer），当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少 HTTP 请求数。

require.js 加载的模块，采用 AMD 规范。也就是说，模块必须按照 AMD 的规定来写。

具体来说，就是模块必须采用特定的 define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在 define()函数之中。

假定现在有一个 math.js 文件，它定义了一个 math 模块。那么，math.js 就要这样写：

define(function () {
  var add = function () {
    //do something
  };
  return {
    add: add,
  };
});

如果这个模块还依赖其他模块，那么 define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(["myLib"], function (myLib) {
  function foo() {
    myLib.doSomething();
  }
  return {
    foo: foo,
  };
});

当 require()函数加载上面这个模块的时候，就会先加载 myLib.js 文件。

这种方法加载的必须是按照 AMD 规范、用 define()函数定义的模块，但很多库不符合这一规范，那么如何加载非规范模块呢？

这样的模块在用 require()加载之前，要先用 require.config()方法，定义它们的一些特征。如 jq 的插件（jq 符合规范）：

require.config({
  shim: {
    "jquery.scroll": {
      deps: ["jquery"],
      exports: "jQuery.fn.scroll",
    },
  },
});

require.config()接受一个配置对象，这个对象除了有前面说过的 paths 属性之外，还有一个 shim 属性，专门用来配置不兼容的模块。具体来说，每个模块要定义

（1）exports 值（输出的变量名），表明这个模块外部调用时的名称；

（2）deps 数组，表明该模块的依赖性。

require.js 还提供一系列插件，实现一些特定的功能。比如：

domready 插件，可以让回调函数在页面 DOM 结构加载完成后再运行。
text 和 image 插件，则是允许 require.js 加载文本和图片文件。

AMD

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
define(function (require, exports, module) {
  var a = require("./a");
  a.doSomething();
  // 此处略去 100 行
  var b = require("./b"); // 依赖可以就近书写
  b.doSomething();
  // ...
});

// AMD
define(["./a", "./b"], function (a, b) {
  // 依赖必须一开始就写好
  a.doSomething();
  // 此处略去 100 行
  b.doSomething();
  // ...
});

虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。