基於CommonJS Modules/2.0的實現:BravoJS


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

BravoJS.zip

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM