今天看見一個基於CommonJS Modules/2.0的實現:BravoJS。
Modules/2.0目前還不是CommonJS的當前規范(Current Specifications),甚至連建議或開發中的標准(Proposals and standards in development)也都不是。
Modules/2.0的模塊寫法大概如下
1,定義模塊用module標識符,它有一個方法declare
2,declare接受一個dependency(可選)和factory
3,dependency為數組類型,數組值為字符串或js對象
4,factory為函數類型,factory有三個參數require,exports,module
5,使用exports導出API
下面還是以之前介紹的cache,event,selector模塊演示。
目錄如下
cache.js不依賴於任何模塊
module.declare(function(require, exports, module) { // ... exports.set = cache.set; exports.get = cache.get; exports.has = cache.has; exports.remove= cache.remove; });
event.js模塊依賴於cache.js
module.declare(['js/cache'], function(require, exports, module) { var cache = require('js/cache'); // ... exports.bind = bind; exports.unbind = unbind; exports.trigger = trigger; });
selector.js模塊不依賴與其它模塊
module.declare(function(require, exports, module) { // ... exports.query = query; });
最后看看頁面上怎么引入這些模塊
index.html
<!doctype html> <html> <head> <title>基於CommonJS Modules/2.0的實現:BravoJS</title> <meta charset="utf-8"/> <script src="bravo.js"></script> </head> <body> <button> button test</button> <script> module.declare(['js/event', 'js/selector'], function(require, exports, module){ var E = require('js/event'); var $ = require('js/selector').query; var btn = $('button')[0]; E.bind(btn, 'click', function() { alert(this) }); }); </script> </body> </html>
將目錄BravoJS拷貝到apache或其它web服務器上,訪問index.html。
點擊按鈕,彈出了alert。說明這些模塊都正常使用。
以上寫法可以看出,Modules/2.0 與 Modules/Wrappings 更象。
相似點:
1,都使用module.declare聲明模塊
2,都有一個包裹factory,factory的三個參數都是require,exports,module
不同點:
1,Modules/2.0 不允許使用 對象直接量 或 返回值 導出模塊,只能使用exports
2,Modules/2.0 的module.declare函數多了一個參數dependency
Modeles/2.0 獲取依賴模塊時可以通過dependency指定該模塊的別名。以上示例event.js依賴於cache.js,可以修改如下
module.declare([{cache: 'js/cache'}], function(require, exports, module) { var cache = require('cache'); // ... exports.bind = bind; exports.unbind = unbind; exports.trigger = trigger; });
dependency的元素不是字符串而是一個js對象,cache是別名,“js/cache”是真正的id。這時在factory中直接可以使用別名cache獲取該模塊了(前面是使用id)。
也可以使用BravoJS載入普通的JS文件模塊,通過module.load方法
module.load('js/module-a', function(){ })
但不能載入非本域的模塊資源。
用過RequireJS的同學會發現,Modules/2.0的declare與AMD的define有點象,即dependency。神似啊!
與AMD不同的是dependency沒有factory的參數一一對應。而是固定為require、exports、module。這明顯沒有AMD簡潔,在factory中還需要require去拿依賴模塊。BravoJS已經很久未更新過了,或許Modules/2.0尚未采納就已死去。
相關:
http://code.google.com/p/bravojs