今天看見一個基於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
