基于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不依赖于任何模块

?
1
2
3
4
5
6
7
8
9
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

?
1
2
3
4
5
6
7
8
9
10
module.declare(['js/cache'], function(require, exports, module) {
     
    var cache = require('js/cache');
 
    // ...
     
    exports.bind = bind;
    exports.unbind = unbind;
    exports.trigger = trigger;
});

 

selector.js模块不依赖与其它模块

?
1
2
3
4
module.declare(function(require, exports, module) {
    // ...
    exports.query = query;
});

 

最后看看页面上怎么引入这些模块

index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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，可以修改如下

?
1
2
3
4
5
6
7
8
9
10
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方法

?
1
2
3
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

 

 

posted on   snandy  阅读(6485)  评论(1)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
历史上的今天：
2011-06-10 读jQuery之六（缓存数据）
< 2012年6月 >
日 一 二 三 四 五 六
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
1 2 3 4 5 6 7

统计

点击右上角即可分享
微信分享提示
AI IDE Trae