brook javascript框架介绍


Posted in Javascript onOctober 10, 2011

brook引用了UNIX下的pipe概念,轻松把所有的处理都串联起来以共同完成任务。前一个处理的输出作为后一个处理的输入来完成参数的传递。通过brook你可以以MVC的方式来写你的javascript程序。
http://hirokidaichi.github.com/brook/ brook 三水点靠木下载
brook框架使用namespace库用于模块的组织。
这里再次用例子说明一下namespace的使用方法:

// 定义一个sample命名空间 
Namespace('sample') 
// 使用brook 
.use('brook *') 
.use('brook.util *') 
.define( function (ns) { 
var foo = function() { 
alert('this is sample.foo'); 
}; 
// 定义对外公开的函数 
// 外部模块只要use了sample之后,就可以通过ns.sample.foo()来调用 
ns.provide({ 
foo : foo 
}); 
}); 
// 使用的例子 
Namespace.use('sample').apply(function(ns) { 
ns.sample.foo(); 
});

要想理解brook框架,需要理解brook的几个核心概念。
promise
简单来说,promise就是封装过的函数,它就是负责把值传给下一个promise。就好比接力赛时候,把接力棒(value)传给下一个成员(promise)。这样就可以可以让非同步的处理能够按照类似同步处理的顺序来编程。

var p = ns.promise(function(next, value){ 
// 在这里对value进行处理 
// value是之前的promise传递进来的 
// 把工作移交给下一个promise 
next("new_value"); 
});

那我们来看看promise能做什么。比如有这样的要求
:等一秒
:输出moge
:等两秒
:输出muga

不用promise的时候:

(function() { 
var firstInterval = setInterval(function() { 
console.log("moge"); 
clearInterval(firstInterval); 
var secondInterval = setInterval(function() { 
console.log("muga"); 
clearInterval(secondInterval); 
}, 2000); 
}, 1000); 
})();

这样的代码处理顺序不好理解。如果改用promise的话:
Namespace("sample") 
.use("brook *") 
.use("brook.util *") 
.define(function(ns) { 
var p1 = ns.promise(function(next, value) { 
console.log("moge"); 
next("muga"); 
}); 
var p2 = ns.promise(function(next, value) { 
console.log(value); 
next(); 
}); 
ns.provide({ 
execute: function() { 
ns.wait(1000).bind(p1).bind(ns.wait(2000)).bind(p2).run(); 
} 
}); 
}); 
Namespace.use("sample").apply(function(ns) { 
ns.sample.execute(); 
});

其中bind函数可以接受多个参数,也可以写成这样:
ns.wait(1000).bind(p1, ns.wait(1000), p2).run();
promise的使用方法:
1:等待几秒可以使用brook.util下的wait方法
2:promise之间“棒的交接”是通过bind方法实现的,也就是UNIX下的PIPE功能。
3:最后需要执行run()方法
channel
channel顾名思义就是频道,管道的意思。在brook里它表示promise的集合。可以把多个promise存放到一个channel里,然后一起执行。
var p3 = ns.promise(function(next, value) { 
console.log(value + "!"); 
}); 
var p4 = ns.promise(function(next, value) { 
console.log(value + "!!"); 
}); 
ns.provide({ 
execute: function() { 
var channel = ns.channel("testChannel"); 
channel.observe(p3); 
channel.observe(p4); 
ns.sendChannel("testChannel").run("hello"); 
} 
});

channel的使用方法:
1:observer:把promise追加到channel中
2:sendChannel:确定channel
3:最后通过run来执行channel里所有promise
model
model是对channel进行包装而成的。在model里可以定义带有名字的channel,这些channel都是一个个的method。
这个组件可以明确MVC中的M和V,即模块和视图。它可以写出这样的处理,model的method执行之后,它的结果传到一个或者多个view(promise)。这就是观察者模式。
var requestFilter = ns.promise(function(v){ 
v["viewer_id"] = viewer.getID(); 
retrun v; 
}); 
var create = ns.promise(function(n,v){ 
// get data 
n(response); 
}); 
var delete = ns.promise(function(n,v){ 
// get data 
n(response); 
}); 
var view1 = ns.promise(function(n,v){ 
// render html 
n(v); 
}); 
var view2 = ns.promise(function(n,v){ 
// render html 
n(v); 
}); 
var model = ns.createModel(); 
model.addMethod('create', ns.mapper(requestFilter).bind(create)); 
model.addMethod('delete', ns.mapper(requestFilter).bind(delete)); 
ns.from(model.method('create')).bind(view1).run(); 
ns.from(model.method('create')).bind(view2).run(); 
ns.promise().bind(model.notify('create').run({"body": "test"})); 
//向view1和view2传递参数{"body": "test"}

model的使用方法:
:ns.createModel():生成model
:model.addMethod():定义method名和相应的处理promise
:ns.from():定义model的某个method执行完之后的处理
:model.notify():执行model的method
widget
widget负责把html和命名空间的模块关联起来。看一个简单的例子。
首先定义一个sample.widget的namespace。
// sample-widget.js 
Namespace("sample.widget") 
.use("brook.widget *") 
.define(function(ns) { 
ns.provide({ 
registerElement: function(element) { 
element.innerHTML = "Hello World!"; 
} 
}); 
});

下面就是关于sample.widget的html页面。
<html> 
<head> 
<title>widget sample</title> 
<script type="text/javascript" src="js/namespace.js"></script> 
<script type="text/javascript" src="js/brook.js"></script> 
<script type="text/javascript" src="js/sample-widget.js"></script> 
</head> 
<body> 
<h1>widget</h1> 
<div class="widget" data-widget-namespace="sample.widget">hoge</div> 
<div class="widget" data-widget-namespace="sample.widget">foo</div> 
<div class="widget" data-widget-namespace="sample.widget">bar</div> 
<script type="text/javascript"> 
//entry point 
Namespace.use("brook.widget *").apply(function(ns) { 
ns.bindAllWidget.run(); 
}); 
</script> 
</body> 
</html>

这段代码会把data-widget-namespace指定为sample.widget的div内容全部置换成hello world!
run()和subscribe()的区别
promise执行的时候需要使用run()方法。一个promise链处理完之后需要执行回调函数的时候不使用run,使用subscribe。
ns.promise().bind(function(next, value) { 
next(value); 
}).subscribe(function(value) { 
console.log(value, "world!"); 
}, "hello"); 
//hello world! 
ns.promise().bind(function(next, value) { 
console.log(value); 
next("no next"); 
}).run("hello"); 
//hello

brook.util
这个模块里面定义很多有用的方法。
mapper:定义装饰处理
var input = ns.promise(function(next, value) { 
next("this is input"); 
}); 
var mapper = ns.mapper(function(value) { 
return value + "!"; 
}); 
var output = ns.promise(function(next, value) { 
console.log(value); 
next(value); 
}); 
//执行 
input.bind(mapper).bind(output).run(); 
//this is input!

filter:过滤器
var input = ns.promise(function(next, value) { 
next(2); 
}); 
var evenFilter = ns.filter(function(value) { 
return (value % 2) === 0; 
}); 
var output = ns.promise(function(next, value) { 
console.log(value + " is even"); 
next(value); 
}); 
//执行 
input.bind(evenFilter).bind(output).run(); 
//2 is even

scatter:分散器,value里面的值依次调用下一个promise
var output = ns.promise(function(next, value) { 
console.log(value); 
next(value); 
}); 
//执行 
ns.scatter().bind(output).run([1, 2, 3, 4, 5, 6]); 
//1 
//2 
//3 
//4 
//5 
//6

takeBy:从value里面一次取n个调用下一个promise
var output = ns.promise(function(next, value) { 
console.log(value); 
next(value); 
}); 
//?g行 
ns.scatter().bind(ns.takeBy(2)).bind(output).run([1, 2, 3, 4, 5, 6]); 
//[1, 2] 
//[3, 4] 
//[5, 6]

wait:等待n毫秒
cond:有条件执行promise,第一个参数是过滤器,第二个参数是promise。第一个参数为true的时候执行第二个参数的promise。
var output = ns.promise(function(next, value) { 
console.log(value); 
next(value); 
}); 
var isEven = function(num) { 
return (num % 2 === 0); 
}; 
var done = ns.promise(function(next, value) { 
console.log("done"); 
}); 
//?g行 
ns.cond(isEven, output).bind(done).run(2); 
//2 
//done 
ns.cond(isEven, output).bind(done).run(3); 
//done

match:根据value的值来决定执行哪一个promise。
var dispatchTable = { 
"__default__": ns.promise(function(next, value) { 
console.log("default"); 
}), 
"hello": ns.promise(function(next, value) { 
console.log("hello"); 
}), 
"world": ns.promise(function(next, value) { 
console.log("world"); 
}) 
}; 
ns.match(dispatchTable).run("hello"); 
ns.match(dispatchTable).run("world"); 
ns.match(dispatchTable).run("hoge");

from:为promise链传递初始参数,也可以用run来传递。
ns.from("hello").bind(ns.debug()).run(); 
//debug: hello

最后还可以通过github首页的例子来体会,brook是怎么实现MVC模式的。
Javascript 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
JS input 数字验证代码
Jul 30 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
jQuery 一个图片切换的插件
Oct 09 #Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 #Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 #Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 #Javascript
javascript之bind使用介绍
Oct 09 #Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 #Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
You might like
php获取淘宝分类id示例
2014/01/16 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
简单了解Python生成器是什么
2019/07/02 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python里glob模块知识点总结
2021/01/05 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
机械专业应届生求职信
2013/09/21 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
村庄绿化方案
2014/05/07 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
付款承诺函范文
2015/01/21 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL