Node.js模塊風格在瀏覽器中的嘗試

前面提到Node.js有一套簡潔的格式寫模塊，它遵循的就是 Moudles。

 

瀏覽器里的JavaScript呢？ 盡管語言本身暫不支持模塊（ES6打算支持），但可以用現有的 API 包裝一個寫法出來。

 

毫無疑問，首先想到的是Node.js的 Modules 格式，它是最好的效仿對象。因為前后端有一個統一的方式寫JS模塊豈不樂哉！

 

但一開始就碰到一些難題

1. 服務器端JS模塊文件就在本地，瀏覽器端則需要通過網絡請求。
2. 服務器端可以很容易的實現同步或異步請求模塊，瀏覽器端則問題多多。

 

如下

var event = require("event");

event.bind(el, 'click', function() {
	// todo
});

這段代碼中 require 如果是異步執行的，則 event.bind 的執行有可能會出錯。

 

那實現同步的 require 不就行了嗎？ 

 

的確可以使用 XHR 實現同步載入模塊JS文件。但XHR的缺點也是明顯的，它不能跨域，這點讓人很難接受，因為有些場景需要模塊部署在不同的服務器。

 

那只能通過 script tag 來實現模塊加載了！

 

但 script tag 默認就是異步的，要實現 Node.js 的一模一樣風格（Modules）很難，幾乎是不可能。

 

這時，“救世主”出現了：Modules/Wrappings ，顧名思義包裹的模塊。該規范約定如下

定義模塊用module變量，它有一個方法declare

1. declare接受一個函數類型的參數，如稱為factory
2. factory有三個參數分別為require、exports、module
3. factory使用返回值和exports導出API
4. factory如果是對象類型，則將該對象作為模塊輸出

 

描述有拗口，代碼卻很簡單，使用了一個 function 包裹模塊（Node.js 模塊則無需包裹）。

 

一個基本的模塊定義

module.declare(function(require, exports, module)
{
	exports.foo = "bar"; 
});

 

直接使用對象作為模塊

module.declare(
{
	foo: "bar"
});

Modules/Wrappings 的出現使得瀏覽器中實現它變得可能，包裹的函數作為回調。即使用 script tag 作為模塊加載器，script 完全下載后去回調，回調中進行模塊定義。

 

好了，截止目前我們已經看到了兩種風格的模塊定義：Modules 和 Modules/Wrappings。

CommonJS Modules有1.0、1.1、1.1.1三個版本。

 

Node.js、SproutCore實現了 Modules 1.0。

SeaJS、AvocadoDB、CouchDB等實現了Modules 1.1.1。

SeaJS、FlyScript實現了Modules/Wrappings。

 

注：

• SeaJS未實現全部的 Modules 1.1.1，如require函數的main，paths屬性在SeaJS中沒有。但 SeaJS 給require添加了async、resolve、load、constructor
• SeaJS沒有使用 Modules/Wrappings 中的module.declare定義模塊，而是使用define函數（看起來象 AMD 中的 define，實則不然）

 

相關：script loaders

 

下一篇：AMD：瀏覽器中的模塊規范