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="/UploadFiles/2021-04-02/namespace.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/brook.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/sample-widget.js"></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);
});
//実行
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");
});
//実行
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模式的。
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="/UploadFiles/2021-04-02/namespace.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/brook.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/sample-widget.js"></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);
});
//実行
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");
});
//実行
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
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“brook javascript框架介绍”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。