brook javascript框架介绍_js面向对象

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="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内容全部置换成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模式的。

时间: 2024-09-20 05:56:26

brook javascript框架介绍_js面向对象的相关文章

JavaScript OOP面向对象介绍_js面向对象

OOP 语言使我们有能力自定义对象和变量类型. 面向对象编程 JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型.对象拥有属性和方法. 属性 属性指与对象有关的值. 举例: 复制代码 代码如下: <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) //使用字符串对象的长度属性来计算字符串中的

javascript面向对象入门基础详细介绍_js面向对象

什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

JavaScript中的面向对象介绍_js面向对象

对象 创建 对象 构造函数 公有.私有.特权.静态成员 this.call和apply 异常处理 继承 原型 对象 在JavaScript,可以说everything is object,那么什么是对象?对象就是包含一组变量和函数的集合.在其它面向对象语言中对象是由类的实例化而来,JavaScript是基于原型的面向对象语言,没有类的概念,对象派生自现有对象的副本.JavaScript中对象可以分为两类:Function和Object. 创建对象 为了提高效率,JavaScript自带内置对象,

面向对象的Javascript之二(接口实现介绍)_js面向对象

就足以说明接口在面向对象的领域中有多重要.但JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一组对象包含相似的的特性.所幸的是JS拥有强大的灵活性(我在上文已谈过),这使得模仿接口特性又变得非常简单.那么到底是接口呢? 接口,为一些具有相似行为的类之间(可能为同一种类型,也可能为不同类型)提供统一的方法定义,使这些类之间能够很好的实现通信. 那使用接口到底有哪些好处呢?简单地说,可提高系统相似模块的重用性,使得不同类的通信更加稳固.一旦实现接口,

编写可维护面向对象的JavaScript代码[翻译]_js面向对象

Writing maintainable Object-Oriented (OO) JavaScript will save you money and make you popular. Don't believe me? Odds are that either you or someone else will come back and work with your code. Making that as painless an experience as possible will s

JavaScript 原型继承_js面向对象

Object.prototype JavaScript是基于原型继承的,任何对象都有一个prototype属性.Object.prototype是所有对象的根,并且不可改变. 复制代码 代码如下: Object.prototype=null; alert(Object.prototype);//[object Object] Object与Object.prototype Object继承于Object.prototype,增加一个属性给Object.prototype上,同时也会反应到Obje

JavaScript 继承详解(三)_js面向对象

注:本章中的jClass的实现参考了Simple JavaScript Inheritance的做法. 首先让我们来回顾一下第一章中介绍的例子: function Person(name) { this.name = name; } Person.prototype = { getName: function() { return this.name; } } function Employee(name, employeeID) { this.name = name; this.employe

Dojo v1.6.1发布 面向对象JavaScript框架

Dojo是一个强大的面向对象http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript框架.主要由三大模块组成:Core.Dijit.DojoX.Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API.Dijit是一个可更换皮肤,基于模板的WEB UI控件库.DojoX包括一些创新/新颖的代码和控件:DateGrid,charts,离线应

JavaScript 继承详解(一)_js面向对象

面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包