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 相关文章推荐
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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编程中八种常见的文件操作方式
2006/11/19 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL