欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

brook javascript框架介紹

 更新時間：2011年10月10日 23:26:03   作者：  
brook是一個針對大規(guī)模web開發(fā)的Javascript框架，而不是一個工具集。
brook引用了UNIX下的pipe概念，輕松把所有的處理都串聯(lián)起來以共同完成任務(wù)。前一個處理的輸出作為后一個處理的輸入來完成參數(shù)的傳遞。通過brook你可以以MVC的方式來寫你的javascript程序。
http://hirokidaichi.github.com/brook/ brook 腳本之家下載
brook框架使用namespace庫用于模塊的組織。
這里再次用例子說明一下namespace的使用方法：
復(fù)制代碼 代碼如下:

// 定義一個sample命名空間
Namespace('sample')
// 使用brook
.use('brook *')
.use('brook.util *')
.define( function (ns) {
var foo = function() {
alert('this is sample.foo');
};
// 定義對外公開的函數(shù)
// 外部模塊只要use了sample之后，就可以通過ns.sample.foo()來調(diào)用
ns.provide({
foo : foo
});
})；
// 使用的例子
Namespace.use('sample').apply(function(ns) {
ns.sample.foo();
});


要想理解brook框架，需要理解brook的幾個核心概念。
promise
簡單來說，promise就是封裝過的函數(shù)，它就是負(fù)責(zé)把值傳給下一個promise。就好比接力賽時候，把接力棒（value）傳給下一個成員（promise）。這樣就可以可以讓非同步的處理能夠按照類似同步處理的順序來編程。
復(fù)制代碼 代碼如下:

var p = ns.promise(function(next, value){
// 在這里對value進(jìn)行處理
// value是之前的promise傳遞進(jìn)來的
// 把工作移交給下一個promise
next("new_value");
});

那我們來看看promise能做什么。比如有這樣的要求
：等一秒
：輸出moge
：等兩秒
：輸出muga

不用promise的時候：
復(fù)制代碼 代碼如下:

(function() {
var firstInterval = setInterval(function() {
console.log("moge");
clearInterval(firstInterval);
var secondInterval = setInterval(function() {
console.log("muga");
clearInterval(secondInterval);
}, 2000);
}, 1000);
})();

這樣的代碼處理順序不好理解。如果改用promise的話：
復(fù)制代碼 代碼如下:

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函數(shù)可以接受多個參數(shù)，也可以寫成這樣：
ns.wait(1000).bind(p1, ns.wait(1000), p2).run();
promise的使用方法：
1：等待幾秒可以使用brook.util下的wait方法
2：promise之間“棒的交接”是通過bind方法實現(xiàn)的，也就是UNIX下的PIPE功能。
3：最后需要執(zhí)行run()方法
channel
channel顧名思義就是頻道，管道的意思。在brook里它表示promise的集合?？梢园讯鄠€promise存放到一個channel里，然后一起執(zhí)行。
復(fù)制代碼 代碼如下:

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來執(zhí)行channel里所有promise
model
model是對channel進(jìn)行包裝而成的。在model里可以定義帶有名字的channel，這些channel都是一個個的method。
這個組件可以明確MVC中的M和V，即模塊和視圖。它可以寫出這樣的處理，model的method執(zhí)行之后，它的結(jié)果傳到一個或者多個view（promise）。這就是觀察者模式。
復(fù)制代碼 代碼如下:

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傳遞參數(shù){"body": "test"}

model的使用方法：
：ns.createModel()：生成model
：model.addMethod()：定義method名和相應(yīng)的處理promise
：ns.from()：定義model的某個method執(zhí)行完之后的處理
：model.notify()：執(zhí)行model的method
widget
widget負(fù)責(zé)把html和命名空間的模塊關(guān)聯(lián)起來。看一個簡單的例子。
首先定義一個sample.widget的namespace。
復(fù)制代碼 代碼如下:

// sample-widget.js
Namespace("sample.widget")
.use("brook.widget *")
.define(function(ns) {
ns.provide({
registerElement: function(element) {
element.innerHTML = "Hello World!";
}
});
});

下面就是關(guān)于sample.widget的html頁面。
復(fù)制代碼 代碼如下:

<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內(nèi)容全部置換成hello world!
run()和subscribe()的區(qū)別
promise執(zhí)行的時候需要使用run()方法。一個promise鏈處理完之后需要執(zhí)行回調(diào)函數(shù)的時候不使用run，使用subscribe。
復(fù)制代碼 代碼如下:

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：定義裝飾處理
復(fù)制代碼 代碼如下:

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);
});
//執(zhí)行
input.bind(mapper).bind(output).run();
//this is input!

filter：過濾器
復(fù)制代碼 代碼如下:

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);
});
//執(zhí)行
input.bind(evenFilter).bind(output).run();
//2 is even

scatter：分散器，value里面的值依次調(diào)用下一個promise
復(fù)制代碼 代碼如下:

var output = ns.promise(function(next, value) {
console.log(value);
next(value);
});
//執(zhí)行
ns.scatter().bind(output).run([1, 2, 3, 4, 5, 6]);
//1
//2
//3
//4
//5
//6

takeBy：從value里面一次取n個調(diào)用下一個promise
復(fù)制代碼 代碼如下:

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：有條件執(zhí)行promise，第一個參數(shù)是過濾器，第二個參數(shù)是promise。第一個參數(shù)為true的時候執(zhí)行第二個參數(shù)的promise。
復(fù)制代碼 代碼如下:

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：根據(jù)value的值來決定執(zhí)行哪一個promise。
復(fù)制代碼 代碼如下:

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鏈傳遞初始參數(shù)，也可以用run來傳遞。
復(fù)制代碼 代碼如下:

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

最后還可以通過github首頁的例子來體會，brook是怎么實現(xiàn)MVC模式的。

相關(guān)文章

最新評論