模块化编程，ES6 Module 和 CommonJS 那些事 (一)

1. 概要

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

2. 模块写法

原始写法

模块就是实现特定功能的一组方法。

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

function m1(){ ... }
function m2(){ ... }

上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。

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

对象写法

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

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

上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。

module1.m1();

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

module1._count = 5;

立即执行函数写法

使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。

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

使用上面的写法，外部代码无法读取内部的_count变量。

console.info(module1._count); //undefined

module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。

放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

var module1 = (function (mod){
	mod.m3 = function () { //... };
	return mod;
})(module1);

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

宽放大模式（Loose augmentation）

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

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

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

输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

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

上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。这方面更多的讨论，参见Ben Cherry的著名文章《JavaScript Module Pattern: In-Depth》。

3. 模块规范（CommonJS 和 AMD）

先想一想，为什么模块很重要？

因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。

目前，通行的Javascript模块规范共有两种：CommonJS和AMD。

CommonJS

1. JS 模块化编程的诞生

   2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。

   

   这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。

   node.js的模块系统，就是参照CommonJS规范实现的。

2. 浏览器加载 CommonJS

   npm 是最大的软件模块仓库，但 npm 的模块都是 JavaScript 语言写的，但浏览器用不了，因为不支持 CommonJS 格式。要想让浏览器用上这些模块，必须转换格式。

   1. 原理

      浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。

      • module
      • exports
      • require
      • global

      只要能够提供这四个变量，浏览器就能加载 CommonJS 模块。

      下面是一个简单的示例。

      var module = {
        exports: {}
      };
      
      (function(module, exports) {
        exports.multiply = function (n) { return n * 1000 };
      }(module, module.exports))
      
      var f = module.exports.multiply;
      f(5) // 5000
      

      上面代码向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载。

   2. Browserify 的实现

      知道了原理，就能做出工具了。Browserify 是目前最常用的 CommonJS 格式转换的工具。

      

      请看一个例子，main.js 模块加载 foo.js 模块。

      // foo.js
      module.exports = function(x) {
        console.log(x);
      };
      
      // main.js
      var foo = require("./foo");
      foo("Hi");
      

      使用下面的命令，就能将main.js转为浏览器可用的格式。

      $ browserify main.js > compiled.js
      

      Browserify到底做了什么？安装一下browser-unpack，就能看清楚了。

      $ npm install browser-unpack -g
      

      然后，将前面生成的compile.js解包。

      $ browser-unpack < compiled.js
      
      [
        {
          "id":1,
          "source":"module.exports = function(x) {\\n  console.log(x);\\n};",
          "deps":{}
        },
        {
          "id":2,
          "source":"var foo = require(\\"./foo\\");\\nfoo(\\"Hi\\");",
          "deps":{"./foo":1},
          "entry":true
        }
      ]
      

      可以看到，browerify 将所有模块放入一个数组，id 属性是模块的编号，source 属性是模块的源码，deps 属性是模块的依赖。

      因为 main.js 里面加载了 foo.js，所以 deps 属性就指定 ./foo 对应1号模块。执行的时候，浏览器遇到 require('./foo') 语句，就自动执行1号模块的 source 属性，并将执行后的module.exports 属性值输出。

AMD

1. 浏览器环境

   就算浏览器能够加载 CommonJS，也存在一个巨大的缺陷，拿上一节的代码举例：

   // foo.js
   module.exports = function(x) {
     console.log(x);
   };
   
   // main.js
   var foo = require("./foo");
   foo("Hi");
   

   foo("Hi")，在var foo = require("./foo")之后运行，因此必须等foo.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。

   这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

   因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

2. AMD - 异步模块定义

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

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

   require([module], callback);
   

   第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

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

   math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

3. require.js

   目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js，下面通过 require.js 来详细介绍一下 JavaScript 模块的实践。

   1. 两个作用

      1. 实现 js 文件的异步加载，避免网页失去响应
      2. 管理模块之间的依赖性，便于代码的编写和维护

   2. 语法

      1. 加载及引入

         <script src="js/require.js" **data-main="js/main"**></script>
         // 主模块 main.js
         

         1. 在主模块中使用 require.js 引入模块

            require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

            // some code here
            

            });

         2. require.config()

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

            // 也可以这样写 require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });

            // 引入另一个主机上的模块 require.config({ paths: { "jquery": "ajax.googleapis.com/ajax/libs/j…" } });

         加载非规范模块（有很多库不符合 AMD 规范）

         // 以加载 jQuery 插件为例
         shim: {
         	'jquery.scroll': {
         		deps: ['jquery'],
         		exports: 'jQuery.fn.scroll'
         	}
         }
         

      2. AMD 规范

         模块必须采用特定的define()函数来定义

         // math.js
         define(function (){
         	var add = function (x,y){
         		return x+y;
         	}
         	return {
         		add: add
         	};
         });
         

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

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

   3. require.js 插件

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

      domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

      require(['domready!'], function (doc){
      		// called once the DOM is ready
      	}
      });
      

      text和image插件，则是允许require.js加载文本和图片文件。

      define([
      	'text!review.txt',
      	'image!cat.jpg'
      	],
      	function(review,cat){
      		console.log(review);
      		document.body.appendChild(cat);
      	}
      )
      

4. require.js、browserify、webpack

www.cnblogs.com/luyuans/p/7…

1. requireJS

   requireJS是一款遵循AMD规范的在浏览器上跑起来的JavaScript模块加载器

   之前提到过，AMD规范就是对异步加载模块的规范，requireJS运用而生，解决了： （1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。

   www.cnblogs.com/luyuans/p/7…

2. browserify 和 webpack

   其本身不是模块管理器，只是让CommondJs格式的模块编译为浏览器脚本，然后运行在浏览器端，

   requireJS与后两者有很大的区别

   requireJS是一种在线“编译”模块的方案，相当于在页面上加载一个CommonJS/AMD模块格式解释器。这样浏览器就认识了define, exports,module这些东西，也就实现了模块化。

   而browserify/webpack是一种预编译的方案，可以把各种规范的模块化代码编译成浏览器脚本，从而实现了模块的打包

   注意： browerify打包器本身只支持Commonjs模块，如果要打包AMD模块，则需要另外的plugin来实现

参考文章

1. Javascript模块化编程（一）：模块的写法
2. Javascript模块化编程（二）：AMD规范
3. Javascript模块化编程（三）：require.js的用法
4. 浏览器加载 CommonJS 模块的原理与实现 - 阮一峰的网络日志