编程 Javascript

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模式的。

brook javascript框架介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

浏览器常用高宽的jquery插件

Feb 24 Javascript

拖动table标题实现改变td的大小(css+js代码)

Apr 16 Javascript

js动态为代码着色显示行号

May 29 Javascript

jQuery选择器querySelector的使用指南

Jan 23 Javascript

JavaScript是如何实现继承的(六种方式)

Mar 31 Javascript

JQuery validate插件验证用户注册信息

May 11 Javascript

纯JS前端实现分页代码

Jun 21 Javascript

js控制div层的叠加简单方法

Oct 15 Javascript

Vue表单输入绑定的示例代码

Nov 01 Javascript

基于JS实现前端压缩上传图片的实例代码

May 14 Javascript

浅谈Vue 函数式组件的使用技巧

Jun 16 Javascript

js实现上传图片到服务器

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