// 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="https://www.jb51.net/js/namespace.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/brook.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/sample-widget.js"></script>
</head>
<body>
<h1>widget</h1>
<div data-widget-namespace="sample.widget">hoge</div>
<div data-widget-namespace="sample.widget">foo</div>
<div 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模式的。
您可能感兴趣的文章: