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 : foo15     });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     // 把工作移交给下一个promise6     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 point15       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 //210 //311 //412 //513 //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 //217 //done18 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模式的。

转载于:https://www.cnblogs.com/foxracle/archive/2011/10/10/2205334.html

javascript框架--brook相关推荐

Javascript框架的自定义事件(转)
很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持"document ready"事件.而部分自定 ...
【图解】最流行的7个JavaScript 框架各自的优点
2019独角兽企业重金招聘Python工程师标准>>> AngularJ.js 由Google开发,2009年首次发布很流行的前端框架使用Angular.js创建第一个UI,成本 ...
1分钟选好最合适你的JavaScript框架
Javascript框架(以下简称框架)也被称为Javascript库,是一组包含丰富功能和函数的JavaScript代码集,能够帮助开发者快速完成Web设计和开发工作.随着Web社区的越发活跃,新的 ...
《JavaScript框架设计》——1.3　数组化
本节书摘来自异步社区<JavaScript框架设计>一书中的第1章,第1.3节,作者:司徒正美更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.3 数组化浏 ...
一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
2015年最棒的10个 JavaScript 框架
JavaScript是最流行的前端开发程序设计语言.它为WEB开发者提供了能够设计出具有丰富功能.干净用户界面的WEB应用的能力.JavaScript框架使得WEB应用的设计变的简单,并且它能够提供很 ...
javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取...
点这里阅读目录用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取解决方案为什么公开我们的解决方案实现 AngularJS 服务结论 Pr ...
Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...

javascript框架--brook