javascript框架--brook

brook

brook是一个针对大规模web开发的Javascript框架，而不是一个工具集。

brook引用了UNIX下的pipe概念，轻松把所有的处理都串联起来以共同完成任务。前一个处理的输出作为后一个处理的输入来完成参数的传递。通过brook你可以以MVC的方式来写你的javascript程序。

http://hirokidaichi.github.com/brook/

brook框架使用namespace库用于模块的组织。

这里再次用例子说明一下namespace的使用方法：

 1 // 定义一个sample命名空间
 2 Namespace('sample')
 3 // 使用brook
 4 .use('brook *')
 5 .use('brook.util *')
 6 .define( function (ns) {
 7     var foo = function() { 
 8         alert('this is sample.foo');
 9     };
10 
11      // 定义对外公开的函数
12     // 外部模块只要use了sample之后，就可以通过ns.sample.foo()来调用
13     ns.provide({
14         foo : foo
15     });
16 })；
17 
18 // 使用的例子
19 Namespace.use('sample').apply(function(ns) {
20     ns.sample.foo();
21 });

要想理解brook框架，需要理解brook的几个核心概念。

promise

简单来说，promise就是封装过的函数，它就是负责把值传给下一个promise。就好比接力赛时候，把接力棒（value）传给下一个成员（promise）。这样就可以可以让非同步的处理能够按照类似同步处理的顺序来编程。

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

那我们来看看promise能做什么。比如有这样的要求

1：等一秒

2：输出moge

3：等两秒

4：输出muga

不用promise的时候：

 1 (function() {
 2     var firstInterval = setInterval(function() {
 3         console.log("moge");
 4         clearInterval(firstInterval);
 5         var secondInterval = setInterval(function() {
 6             console.log("muga");
 7             clearInterval(secondInterval);
 8         }, 2000);
 9     }, 1000);
10 })();

这样的代码处理顺序不好理解。如果改用promise的话：

 1 Namespace("sample")
 2 .use("brook *")
 3 .use("brook.util *")
 4 .define(function(ns) {
 5     var p1 = ns.promise(function(next, value) {
 6         console.log("moge");
 7         next("muga");
 8     });
 9 
10     var p2 = ns.promise(function(next, value) {
11         console.log(value);
12         next();
13     });
14 
15     ns.provide({
16         execute: function() {
17             ns.wait(1000).bind(p1).bind(ns.wait(2000)).bind(p2).run();
18         }
19     });
20 });
21 
22 Namespace.use("sample").apply(function(ns) {
23     ns.sample.execute();
24 });

其中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里，然后一起执行。

 1 var p3 = ns.promise(function(next, value) {
 2     console.log(value + "!");
 3 });
 4 
 5 var p4 = ns.promise(function(next, value) {
 6     console.log(value + "!!");
 7 });
 8 
 9 ns.provide({
10     execute: function() {
11         var channel = ns.channel("testChannel");
12         channel.observe(p3);
13         channel.observe(p4);
14         ns.sendChannel("testChannel").run("hello");
15     }
16 });

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的使用方法：

1：ns.createModel()：生成model

2：model.addMethod()：定义method名和相应的处理promise

3：ns.from()：定义model的某个method执行完之后的处理

4：model.notify()：执行model的method

widget

widget负责把html和命名空间的模块关联起来。看一个简单的例子。

首先定义一个sample.widget的namespace。

 1 // sample-widget.js
 2 Namespace("sample.widget")
 3 .use("brook.widget *")
 4 .define(function(ns) {
 5     ns.provide({
 6         registerElement: function(element) {
 7             element.innerHTML = "Hello World!";
 8         }
 9     });
10 });

下面就是关于sample.widget的html页面。

 1 <html>
 2   <head>
 3     <title>widget sample</title>
 4     <script type="text/javascript" src="js/namespace.js"></script>
 5     <script type="text/javascript" src="js/brook.js"></script>
 6     <script type="text/javascript" src="js/sample-widget.js"></script>
 7   </head>
 8   <body>
 9     <h1>widget</h1>
10     <div class="widget" data-widget-namespace="sample.widget">hoge</div>
11     <div class="widget" data-widget-namespace="sample.widget">foo</div>
12     <div class="widget" data-widget-namespace="sample.widget">bar</div>
13     <script type="text/javascript">
14       //entry point
15       Namespace.use("brook.widget *").apply(function(ns) {
16           ns.bindAllWidget.run();
17       });
18     </script>
19   </body>
20 </html>

这段代码会把data-widget-namespace指定为sample.widget的div内容全部置换成hello world!

run()和subscribe()的区别

promise执行的时候需要使用run()方法。一个promise链处理完之后需要执行回调函数的时候不使用run，使用subscribe。

 1 ns.promise().bind(function(next, value) {
 2     next(value);
 3 }).subscribe(function(value) {
 4     console.log(value, "world!");
 5 }, "hello");
 6 //hello world!
 7 
 8 
 9 ns.promise().bind(function(next, value) {
10     console.log(value);
11     next("no next");
12 }).run("hello");
13 //hello

brook.util

这个模块里面定义很多有用的方法。

mapper：定义装饰处理

 1 var input = ns.promise(function(next, value) {
 2     next("this is input");
 3 });
 4 
 5 var mapper = ns.mapper(function(value) {
 6     return value + "!";
 7 });
 8 
 9 var output = ns.promise(function(next, value) {
10     console.log(value);
11     next(value);
12 });
13 
14 //执行
15 input.bind(mapper).bind(output).run();
16 //this is input!

filter：过滤器

 1 var input = ns.promise(function(next, value) {
 2     next(2);
 3 });
 4 
 5 var evenFilter = ns.filter(function(value) {
 6     return (value % 2) === 0;
 7 });
 8 
 9 var output = ns.promise(function(next, value) {
10     console.log(value + " is even");
11     next(value);
12 });
13 
14 //执行
15 input.bind(evenFilter).bind(output).run();
16 //2 is even

scatter：分散器，value里面的值依次调用下一个promise

 1 var output = ns.promise(function(next, value) {
 2     console.log(value);
 3     next(value);
 4 });
 5 
 6 //执行
 7 ns.scatter().bind(output).run([1, 2, 3, 4, 5, 6]);
 8 //1
 9 //2
10 //3
11 //4
12 //5
13 //6

takeBy：从value里面一次取n个调用下一个promise

 1 var output = ns.promise(function(next, value) {
 2     console.log(value);
 3     next(value);
 4 });
 5 
 6 //実行
 7 ns.scatter().bind(ns.takeBy(2)).bind(output).run([1, 2, 3, 4, 5, 6]);
 8 //[1, 2]
 9 //[3, 4]
10 //[5, 6]

wait：等待n毫秒

cond：有条件执行promise，第一个参数是过滤器，第二个参数是promise。第一个参数为true的时候执行第二个参数的promise。

 1 var output = ns.promise(function(next, value) {
 2     console.log(value);
 3     next(value);
 4 });
 5 
 6 var isEven = function(num) {
 7     return (num % 2 === 0);
 8 };
 9 
10 var done = ns.promise(function(next, value) {
11     console.log("done");
12 });
13 
14 //実行
15 ns.cond(isEven, output).bind(done).run(2);
16 //2
17 //done
18 
19 
20 ns.cond(isEven, output).bind(done).run(3);
21 //done

match：根据value的值来决定执行哪一个promise。

 1 var dispatchTable = {
 2     "__default__": ns.promise(function(next, value) {
 3         console.log("default");
 4     }),
 5 
 6     "hello": ns.promise(function(next, value) {
 7         console.log("hello");
 8     }),
 9 
10     "world": ns.promise(function(next, value) {
11         console.log("world");
12     })
13 };
14 
15 
16 ns.match(dispatchTable).run("hello");
17 ns.match(dispatchTable).run("world");
18 ns.match(dispatchTable).run("hoge");

from：为promise链传递初始参数，也可以用run来传递。

1 ns.from("hello").bind(ns.debug()).run();
2 //debug: hello

最后还可以通过github首页的例子来体会，brook是怎么实现MVC模式的。

posted on 2011-10-10 15:59 foxracle 阅读(2290) 评论(8) 编辑收藏举报