Node.js模塊格式在瀏覽器中的嘗試
前面提到Node.js有一套簡潔的格式寫模塊，它遵循的就是 Moudles。
瀏覽器里的JavaScript呢? 盡管語言本身暫不支持模塊，但可以用現(xiàn)有的API包裝一個(gè)寫法出來。
毫無疑問，首先想到的是Node.js的Modules格式，它是***的效仿對(duì)象。因?yàn)榍昂蠖擞幸粋€(gè)統(tǒng)一的方式寫JS模塊豈不樂哉!
但一開始就有碰到一些難題
1，服務(wù)器端JS模塊文件就在本地，瀏覽器端則需要通過網(wǎng)絡(luò)請(qǐng)求。
2，服務(wù)器端可以很容易的實(shí)現(xiàn)同步或異步請(qǐng)求模塊，瀏覽器端則問題多多。
如下
- var event = require("event");
- event.bind(el, 'click', function() {
- // todo
- });
這段代碼中require如果是異步執(zhí)行的，則event.bind的執(zhí)行有可能會(huì)出錯(cuò)。
那實(shí)現(xiàn)同步的require不就行了嗎?
的確可以使用 XHR 實(shí)現(xiàn)同步載入模塊JS文件。但XHR的缺點(diǎn)也是明顯的，它不能跨域，這點(diǎn)讓人很難接受，因?yàn)橛行﹫?chǎng)景需要模塊部署在不同的服務(wù)器。
那只能通過script tag來實(shí)現(xiàn)模塊加載了!
但script tag默認(rèn)就是異步的，要實(shí)現(xiàn)Node.js的一模一樣風(fēng)格(Modules)很難，幾乎是不可能。
這時(shí)，又一模塊格式出現(xiàn)了：Modules/Wrappings ，顧名思義包裹的模塊。該規(guī)范約定如下
1，定義模塊用module變量，它有一個(gè)方法declare
2，declare接受一個(gè)函數(shù)類型的參數(shù)，如稱為factory
3，factory有三個(gè)參數(shù)分別為require、exports、module
4，factory使用返回值和exports導(dǎo)出API
5，factory如果是對(duì)象類型，則將該對(duì)象作為模塊輸出
描述有拗口，代碼卻很簡單，使用了一個(gè)function包裹模塊(Node.js模塊則無需包裹)。
一個(gè)基本的模塊定義
- module.declare(function(require, exports, module)
- {
- exports.foo = "bar";
- });
直接使用對(duì)象作為模塊
- module.declare(
- {
- foo: "bar"
- });
Modules/Wrappings的出現(xiàn)使得瀏覽器中實(shí)現(xiàn)它變得可能，包裹的函數(shù)作為回調(diào)。即使用script tag作為模塊加載器，script完全下載后去回調(diào)，回調(diào)中進(jìn)行模塊定義。
好了，截止目前我們已經(jīng)看到了兩種風(fēng)格的模塊定義：Modules 和 Modules/Wrappings。
CommonJS Modules有1.0、1.1、1.1.1三個(gè)版本。
Node.js、SproutCore實(shí)現(xiàn)了 Modules 1.0。
SeaJS、AvocadoDB、CouchDB等實(shí)現(xiàn)了Modules 1.1.1。
SeaJS、FlyScript實(shí)現(xiàn)了Modules/Wrappings。
注：
1，SeaJS未實(shí)現(xiàn)全部的 Modules 1.1.1。如require函數(shù)的main，paths屬性在SeaJS中沒有。但SeaJS給require添加了async、resolve、load、constructor。
2，SeaJS沒有使用 Modules/Wrappings 中的module.declare定義模塊，而是使用define函數(shù)(看起來象AMD中的define，實(shí)則不然)。
原文：http://www.cnblogs.com/snandy/archive/2012/03/09/2386092.html
【編輯推薦】
