模块化的开发方法可以提高代码复用率，便利进行代码的打点。凡是一个文件就是一个模块，有本身的感化域，只向外袒露特定的变量和函数。目前风行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 。

一、CommonJS

Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现供给撑持：module、exports、require、global。实际使用时，用module.exports界说当前模块对外输出的接口（不保举直接用exports），用require加载模块。

// 界说模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外袒露的函数、变量 add: add, basicNum: basicNum } // 引用自界说的模块时，参数包罗路径，可省略.js var math = require(‘./math‘); math.add(2, 5); // 引用核心模块时，不需要带路径 var http = require(‘http‘); http.createService(...).listen(3000);

 

commonJS用同步的方法加载模块。在处事端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。

二、AMD和require.js

AMD规范给与异步方法加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都界说在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用require.config()指定引用路径等，用define()界说模块，用require()加载模块。

首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置require.config()并规定项目顶用到的根本模块。

/** 网页中引入require.js及main.js **/ <script src="http://www.mamicode.com/js/require.js" data-main="js/main"></script> /** main.js 入口文件/主模块 **/ // 首先用config()指定各模块路径和引用名 require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", //实际路径为js/lib/jquery.min.js "underscore": "underscore.min", } }); // 执行根基操纵 require(["jquery","underscore"],function($,_){ // some code here });

 

引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们界说的模块自己也依赖其他模块,那就需要将它们放在[]中作为define()的第一参数。

// 界说math.js模块 define(function () { var basicNum = 0; var add = function (x, y) { return x + y; }; return { add: add, basicNum :basicNum }; }); // 界说一个依赖underscore.js的模块 define([‘underscore‘],function(_){ var classify = function(list){ _.countBy(list,function(num){ return num > 30 ? ‘old‘ : ‘young‘; }) }; return { classify :classify }; }) // 引用模块，将模块放在[]内 require([‘jquery‘, ‘math‘],function($, math){ var sum = math.add(10,20); $("#sum").html(sum); });

  三、CMD和sea.js

require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码：

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 即是在最前面声明并初始化了要用到的所有模块 if (false) { // 即便没用到某个模块 b，但 b 还是提前执行了 b.foo() } });

 

CMD是另一种js模块化方案，它与AMD很类似，差别点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中孕育产生的。