JavaScript模块化发展的演进历史 CommonJS、AMD、CMD、ES6模块的演进历史

[JesseZhao1990]

1. 没有模块化的时候

我们不划分模块，一个个js的写，然后放入html。
缺点：

1. Global 被污染，很容易命名冲突
2. 随着项目越来越复杂。越来越无法维护
3. 无法按模块分工开发

2. 命名空间的阶段

简单的封装。每个模块的代码放到某个命名空间之下

myapp.login = {
    foo: function(){},
     test: function(){}
}
myapp.login.foo

优点：减少了global上的变量的数量
缺点： 本质上是对象，从外部谁都可以改变其值，并不安全。

3. 立即执行函数表达式（IIFE）

利用立即执行函数表达式创建一个闭包。对外只暴露特定的值和对象。

var moduleA = (function(){
  var _private = '这是一个安全的内部属性，只能在本函数内部被调用，外部无法调用';
  var foo = function(){
    console.log(_private)
  }
  return {
    foo: foo
  }
})()

moduleA.foo() // 能打印
moduleA._private // undefined 无法访问模块内部的私有属性

此种方式不仅仅可以通过创建一个隔绝的作用域来实现一个模块。还能通过函数传参来实现模块的依赖。

var moduleB = (function($,_){
  var $body = $("body");     // 这里我们使用jQuery了
  var copy = _.clone($body)   // 这里我们可以使用lodash了
  var foo = function(){
      console.log($body);    
  }

  return {
      foo: foo
  }
})(jQuery,lodash)

moduleB.foo();

这就是模块模式，也是现代模块实现的基石

优点：封装良好，实现了初级真正意义上的模块化
缺点：只有封装，但是我们不仅仅是需要封装，我们还需要加载。我们还需要能够想加载什么就能加载什么模块。 并且这种封装只能算是初级意义上的封装。可读性并不是太强。

4. CommonJS

nodejs 是CommonJS规范的主要实践者，他有几个环境变量， module，exports，require，global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。

// 定义模块util.js
function foo(){
  console.log('this is a function')
}
module.exports = {
    foo: foo
}
// 引用自定的模块
let utils = require('./util.js)
utils.foo()

CommonJS 用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快。所以这样做不会有什么问题。但是在浏览器端。由于网络传输的时间过长。这种同步的方式不大适合于客户端。更合理的方案应该是使用异步的方式加载。

5. AMD 和CMD

AMD规范采用异步方式加载模块，模块的加载不影响它后边的语句的运行。依赖某些模块的语句。都会放到这些模块加载完成之后的回调函数里去执行。由于require.js是AMD规范的主要实践者。我们讲述一下require.js的使用方法，之后我们再试着写写AMD规范的实现。
require.js的使用： 用require.config()制定引用路径，用define()定义模块，用require()加载模块。

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

/** app.js 主模块 **/
requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

定义模块和引用模块

// 定义utils.js模块
define(function () {
  function clone(obj){
    return Object.assign({},obj)
  }
  return {
      clone:clone
  };
});

// 定义一个依赖lodash.js的模块
define(['lodash'],function(_){
  function foo(){
    console.log(_);
  }
  return {
    foo :foo
  };
})

// 引用模块
require(['jquery', 'utils'],function($, utils){
  $body = $(body);
  console.log($body);
  let copy = utils.clone($body);
});

AMD实现了浏览器端的模块化的管理，相比较与CommonJS的同步加载，AMD使用了异步加载。解决了同步加载因为网络环境而无法被接受的问题。

but问题来了。AMD存在的一点问题是什么呢。就是所依赖的模块会全部先加载完并且执行完再执行回调。不管这个模块是否在接下来的回调中是否会被使用。

CMD在AMD的基础上解决了这个问题。玉伯在这篇文章里在现了当年十字路子的争辩过程。CMD比AMD更近一步，推崇依赖就近，延迟执行。CMD规范也是伴随着sea.js的推广过程中而产生。

用一句话总结一下AMD和CMD的差异吧。AMD推崇依赖前置，所有的依赖提前执行。CMD推崇依赖就近。依赖拿到之后并不会立即执行。而是在需要执行的地方才开始执行（延迟执行）

// AMD recommended
define(['a', 'b'], function(a, b){
    a.doSomething();    // 依赖前置，提前执行
    b.doSomething();
})

// CMD recommanded
define(function(require, exports, module){
    var a = require("a");
    a.doSomething();
    var b = require("b");
    b.doSomething();    // 依赖就近，延迟执行
})

6. ES6 module

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

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

/* a.js */
export function test(){console.log('testtest')}
 const utils = {
    foo: function(){ console.log('foofoo')}
}
export default utils
/* b.js */
import utils  from './a.js'
import {test} from './a.js'

对比CommonJS和ES6 module的区别

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用 (需要注意的是ES6模块的默认导出的情况是一个例外,具体的详见 You-Dont-Know-JS相关章节的介绍)，后边我也会单独的贴出截图。
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

截图如下：

[JesseZhao1990]

手写commonjs的简单实现

let path = require('path');
let fs = require('fs');
let vm = require('vm');

/**
 * 模块的构造函数
 */
function Module(filename){
  this.filename = filename;  // 模块的绝对路径
  this.exports = {};   // 模块的导出
}

/**
 * 私有方法
 * 根据path得到文件的绝对路径
 */
Module._resolveFilename = function (p) {
  return path.join(__dirname,p);
}

/**
 * 私有属性
 * 对模块进行缓存
 */
Module._cache = {};

/**
 * 给content包一层函数
 * @param {*} content
 */
Module._wrap = function(content){
  return `(function(exports,require,module){${content}})`
}

/**
 * 私有方法集
 * 用于加载不同类型的文件
 */
Module._extensions = {
  // 后缀名为json的文件的加载方法
  ['.json']: function(module){
    let content = fs.readFileSync(module.filename,'utf8');
    module.exports = content;
  },
  // 后缀名为js的文件的加载方法
  ['.js']: function(module){
    let content = fs.readFileSync(module.filename,'utf8');
    let wrapContent = Module._wrap(content);
    let fn = vm.runInThisContext(wrapContent);
    fn.call(module,module.exports,requireModule,module);
  }
}

/**
 * 模块实例的方法
 * 用于加载模块
 */
Module.prototype.load = function(){
  let filename = this.filename;
  let extname = path.extname(filename);
  Module._extensions[extname](this);
}

/**
 * 自定义的require方法。用于加载模块
 * @param {*} path
 */
function requireModule(path){
  let filename = Module._resolveFilename(path);
  // 检测缓存中是否已经加载过此模块,如果缓存中存在，说明已经加载过，则返回缓存中的对应的模块的exports
  if(Module._cache[filename]){
    return Module._cache[filename].exports
  }
  // 缓存中没有。则创建模块实例
  let module = new Module(filename);
  // 加载模块
  module.load();
  // 缓存模块
  Module._cache[filename] = module;
  // 返回模块的exports
  return module.exports;

}


let str = requireModule('./test.js');
str.foo()

test.js的代码

/* eslint-disable */
module.exports ={
  foo: function(){
    console.log(22222)
  }
}

[JesseZhao1990]

How the module system, CommonJS & require works

https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/