zoukankan      html  css  js  c++  java
  • 基于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

  • 相关阅读:
    数据库乐观锁应用
    maven 引入本地jar
    GTS 分布式事务
    redis 做冥等
    服务器 启动命令
    pgAdmin4的应用
    PostgreSQL 分区
    压测工具
    BigDecimal 比较大小
    移动端px转化为rem
  • 原文地址:https://www.cnblogs.com/snandy/p/2543893.html
Copyright © 2011-2022 走看看