深刻理解CommonJS！

CommonJS

　　一開始你們都認爲JS是辣雞，沒什麼用，官方定義的API只能構建基於瀏覽器的應用程序，CommonJS就按耐不住了，CommonJS API定義不少普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個相似Python，Ruby和Java標準庫。這樣的話，開發者可使用CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。

　　在兼容CommonJS的系統中，你可使用JavaScript開發如下程序：

(1)、服務器端JavaScript應用程序
(2)、命令行工具
(3)、圖形界面應用程序
(4)、混合應用程序（如，Titanium或Adobe AIR）

　　2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於服務器端編程。這標誌"Javascript模塊化編程"正式誕生。由於老實說，在瀏覽器環境下，沒有模塊也不是特別大的問題，畢竟網頁程序的複雜性有限；可是在服務器端，必定要有模塊，與操做系統和其餘應用程序互動，不然根本無法編程。NodeJS是CommonJS規範的實現，webpack 也是以CommonJS的形式來書寫。

　　node.js的模塊系統，就是參照CommonJS規範實現的。在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就能夠像下面這樣加載。

var math = require('math');

　　而後，就能夠調用模塊提供的方法：

var math = require('math'); math.add(2,3); // 5

　　CommonJS定義的模塊分爲：{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

　　require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，惟一的導出口；module對象就表明模塊自己。

　　下面講講commonJS的原理以及簡易實現：

一、原理

　　瀏覽器不兼容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 之中，這樣就實現了模塊的加載。

二、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 屬性值輸出。

三、Tiny Browser Require

　　雖然 Browserify 很強大，但不能在瀏覽器裏操做，有時就很不方便。

　　根據 mocha 的內部實現，能夠作一個純瀏覽器的 CommonJS 模塊加載器 tiny-browser-require 。徹底不須要命令行，直接放進瀏覽器便可，全部代碼只有30多行。它的邏輯很是簡單，就是把模塊讀入數組，加載路徑就是模塊的id。

function require(p){ var path = require.resolve(p); var mod = require.modules[path]; if (!mod) throw new Error('failed to require "' + p + '"'); if (!mod.exports) { mod.exports = {}; mod.call(mod.exports, mod, mod.exports, require.relative(path)); } return mod.exports; } require.modules = {}; require.resolve = function (path){ var orig = path; var reg = path + '.js'; var index = path + '/index.js'; return require.modules[reg] && reg || require.modules[index] && index || orig; }; require.register = function (path, fn){ require.modules[path] = fn; }; require.relative = function (parent) { return function(p){ if ('.' != p.charAt(0)) return require(p); var path = parent.split('/'); var segs = p.split('/'); path.pop(); for (var i = 0; i < segs.length; i++) { var seg = segs[i]; if ('..' == seg) path.pop(); else if ('.' != seg) path.push(seg); } return require(path.join('/')); }; };

　　使用的時候，先將上面的代碼放入頁面。而後，將模塊放在以下的當即執行函數裏面，就能夠調用了。

<script src="require.js" />
<script> require.register("moduleId", function(module, exports, require){ // Module code goes here
}); var result = require("moduleId"); </script>

　　仍是之前面的 main.js 加載 foo.js 爲例。

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

　　注意，這個庫只模擬了 require 、module 、exports 三個變量，若是模塊還用到了 global 或者其餘 Node 專有變量（好比 process），就經過當即執行函數提供便可。