這是一個(gè)關(guān)于JS模塊化的掃盲貼。

列舉一下我們會(huì)遇到的一些概念：

AMD,CMD,CommonJs,同步加載，異步加載，module.exports,ES6模塊，require,define

我們的任務(wù)就是消除這些盲點(diǎn)。

CommonJs是同步加載的，所以適用于服務(wù)端node。

const moment = require('moment');
new moment();

在一個(gè)項(xiàng)目中，模塊加載一次后就會(huì)被緩存，所以完全不用擔(dān)心一個(gè)模塊被多個(gè)模塊引用而導(dǎo)致重復(fù)加載模塊。

CMD和AMD是瀏覽器端的規(guī)范，因?yàn)樗麄兌际钱惒降摹?/p>

AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行

CMD 推崇 as lazy as possible.
CMD 推崇依賴就近，AMD 推崇依賴前置。

CMD

導(dǎo)出

define(function(require, exports) {
  exports.each = function (arr) {
    // 實(shí)現(xiàn)代碼
  };

  exports.log = function (str) {
    // 實(shí)現(xiàn)代碼
  };
});

導(dǎo)入

define(function(require, exports) {
  var util = require('./util.js');

  exports.init = function() {
    // 實(shí)現(xiàn)代碼
  };
});

AMD

定義入口文件

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

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

require.js假定這三個(gè)模塊與main.js在同一個(gè)目錄，文件名分別為jquery.js，underscore.js和backbone.js，然后自動(dòng)加載。

使用require.config()方法，我們可以對(duì)模塊的加載行為進(jìn)行自定義。require.config()就寫在主模塊（main.js）的頭部。參數(shù)就是一個(gè)對(duì)象，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑。

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

模塊導(dǎo)出

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

模塊導(dǎo)入

// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

ES6在語(yǔ)法層面上實(shí)現(xiàn)了模塊。使用的是 export和import關(guān)鍵字。上面的這些模塊polyfill都將成為歷史了。