JavaScript代码模块化的正规方法

RequireJS-CommonJS-AMD-ES6 Import/Export详解

为什么起了一个这个抽象的名字呢，一下子提了四个名词分别是：RequireJS，CommonJS，AMD，ES6，答案是因为现实很骨感，我们必须很勇敢才能正视这一段悲催的往事。如今的JavaScript平台正值如日中天，大家可能会忽略他的过去和弊端，这些弊端中一直被人诟病的就是JavaScript的包管理，比如类似Java中的import，其实理论上来讲这种基本元素的缺失大大的阻碍了人们对一种语言的认可，认为他难以担当大任，其实这么多年来JavaScript平台的发展主要还是他存在的位置比较有利，在浏览器中，有标准的支持和约束，跨平台等等，但是这种先天不足就没办法了，只能后天努力，这样从ES3-ES6不断地加入新的功能终于使JavaScript这门语言逐渐完备，这个漫长的过程让我们逐渐的明白了一个道理：社会的需求胜过十驾马车的力量可以催生一项技术不断的完善，进步。

正如前面提到的JavaScript没有包管理，不适合构建复杂应用，但是现实是就需要用JavaScript来构建复杂应用，因为随着社会的进步，人们对web应用的期许提高了，这都难不倒工程师，不是语言不提供么，我们有work around。先来说说CommonJS，

CommonJS的出发点是让JavaScript这门语言写出的代码可以跨前后端，（当然这里面指的是逻辑代码，不包含DOM, BOM操作）也就是可以在不同的宿主上跑，不如同一段代码可以跑在NodeJS也可以跑在Nashorn或者浏览器，但是事实上对CommonJS标准应用最多的是NodeJS平台，也就是NodeJS中的Require, 那么CommonJS Require为什么没有在浏览器里流行呢，主要原因是这个Require是同步的，这个浏览器接受不了，用户体验差，下面我们来说说浏览器中的AMD。

// sum.js
module.exports = {
  sum: function(a, b) { return a + b; }
};

// app.js
var assert = require('assert');
var cal = require('./sum');
assert.equal(3, cal.sum(1, 2));

CommonJS在浏览器中不行我们再找一个方式，总会有适合的，下面我们来说说AMD (Asynchronous Module Definition) 对CommonJS稍加改变，构造一个异步的变种就得到了AMD，示例代码如下，这下变成异步的了，终于可以在浏览器中使用了 

// sum.js
define("sum", function() {
  return {
    sum: function(a, b) { return a + b; }
  };
});

// app.js
define("app", ["sum"], function(cal) {
  console.log(cal.sum(1, 2)); // => 3
});

但是以上的代码直接写是没办法运行的，如果想在浏览器中直接运行，需要知道define是个什么鬼，所以需要先把RequireJS引入，这就是RequireJS的作用，在浏览器中实现define, 引入依赖包。

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

// main.js
requirejs.config({ baseUrl: '/scripts' });
requirejs(['app']);

 

看着这种不一致的痛苦ECMAScript 6终于忍不了了，加入了import/export标准来统一JavaScript世界，这就是标准的力量，但是从语法上来看还是同步的加载，还是没有办法支持浏览器，不知道这块ECMAScript 6是怎么考量的。

// sum.js
export function sum(a, b) { return a + b; }

// app.js
import * as cal from 'sum';

console.log(cal.sum(1, 2)); // => 3

 

综合以上的分析，在ES6还没有实现完成的今天如果想写一段同时支持前后台，支持AMD， CommonJS的代码要想下面这个样子。

;(function (root, factory, undef) {
    if (typeof exports === "object") {
        // CommonJS
        module.exports = exports = factory(require("./core"), require("./cipher-core"));
    }
    else if (typeof define === "function" && define.amd) {
        // AMD
        define(["./core", "./cipher-core"], factory);
    }
    else {
        // Global (browser)
        factory(root.CryptoJS);
    }
}(this, function (CryptoJS) {

    return CryptoJS.pad.Pkcs7;

}));

 

总结

本文总结了RequireJS，CommonJS，AMD，ES6 import/export的前世今生，并且对每个部分给出了完整的代码样例，希望对大家有所帮助。