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 相关文章推荐
js中将字符串转换成json的三种方式
Jan 12 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
理解javascript中的with关键字
Feb 15 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
JavaScript运行机制实例分析
Apr 11 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
js验证表单大全
2006/11/25 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
python中set常用操作汇总
2016/06/30 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python实现合并两个排序的链表
2019/03/03 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
车队司机自我鉴定
2014/03/02 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年团支部工作总结
2015/04/03 职场文书
单位病假条范文
2015/08/17 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript