brook javascript Framework_js オブジェクト指向の紹介-jsチュートリアル-php.cn

Brook 氏は、すべてのプロセスを直列に簡単に接続して一緒にタスクを完了するための UNIX におけるパイプの概念を引用しました。前のプロセスの出力は次のプロセスの入力として使用され、パラメータの転送が完了します。 brook を使用すると、MVC 方式で JavaScript プログラムを作成できます。
http://hirokidaichi.github.com/brook/ brook スクリプトホームダウンロード
brook フレームワークは、モジュール構成に名前空間ライブラリを使用します。
ここでも例を使用して、名前空間の使用法を説明します。

コードをコピーしますコードは次のとおりです:

 
// サンプル名前空間を定義します 
Namespace('sample') 
// brook を使用します 
.use('brook *') 
.use('brook. util *') 
.define( function (ns) { 
var foo = function() { 
alert('this is sample.foo'); 
}; 
// 定義public function
// 外部モジュールがサンプルを使用している限り、ns.sample.foo を通じて 
ns.provide({ 
foo : foo 
}) を呼び出すことができます。 (); 
// 使用例
Namespace.use('sample').apply(function(ns) { 
ns.sample.foo(); 
}); 
 

brook フレームワークを理解するには、brook のいくつかの中心的な概念を理解する必要があります。
promise
簡単に言うと、promise はカプセル化された関数であり、値を次の Promise に渡す役割を果たします。駅伝で次のメンバー（約束）にバトン（価値）を渡すようなものです。これにより、非同期処理を同期処理と同様のシーケンスでプログラムすることができます。

コードをコピーコードは次のとおりです。

var p = ns.promise(function( next, value ){

// ここで値を処理します 
// 値は前の Promise から渡されます 
// 次の Promise に作業を引き継ぎます 
next("new_value") ; 
}); 

 
それでは、Promise で何ができるかを見てみましょう。例えば、 

: 1 秒待つ
: moge を出力する
: 2 秒待つ
: muga を出力する

Promise を使用しない場合:
>

コードをコピーコードは次のとおりです:

(function() {

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

 
このコードの処理シーケンスは理解しにくいです。代わりに Promise を使用する場合: 

コードをコピーコードは次のとおりです: Namespace("サンプル")

.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).バインド(p1 ).bind(ns.wait(2000)).bind(p2).run(); 
} 
}); 
Namespace.use("sample") ).apply (function(ns) { 
ns.sample.execute(); 
}); 

 
バインド関数は複数のパラメーターを受け入れることができ、次のように記述することもできます。 
ns .wait(1000).bind(p1, ns.wait(1000), p2).run(); 
Promise の使用方法: 
1: 数秒待つと使用できます。 brook.util

2 の wait メソッド: Promise 間の「スティックハンドオーバー」は、UNIX の PIPE 関数であるバインドメソッドを通じて実現されます。
3: 最後に、run() メソッドを実行する必要があります。
channel
channel は、その名前が示すように、チャネルとパイプラインを意味します。 brook では、約束の集まりを表します。複数の Promise をチャネルに保存し、一緒に実行できます。

コードをコピーします

コードは次のとおりです。 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);
}
});
チャネルの使用方法:
1: オブザーバー: チャネルにプロミスを追加
2: sendChannel: チャネルを決定
3: 最後に、チャネル内のすべてのプロミスを実行します
モデル
モデルはチャンネルのパッケージ。モデルでは、チャネルを名前付きで定義でき、これらのチャネルは 1 つずつメソッドになります。
このコンポーネントはMVCにおけるMとV、つまりモジュールとビューを明確にすることができます。モデルのメソッドが実行された後、その結果が 1 つ以上のビューに渡されるような処理を記述することができます (約束)。これがオブザーバーパターンです。

コードをコピーコードは次のとおりです。

 
var requestFilter = ns.promise(function( v){ 
v["viewer_id"] = viewer.getID(); 
retrun v; 
var create = ns.promise(function(n,v){ // データを取得 
n(response); 
}); 
var delete = ns.promise(function(n,v){ 
// データを取得 
n(response) ; 
}); 
var view1 = ns.promise(function(n,v){ 
// HTML をレンダリング 
n(v); 
var view2 = ns.promise(function(n,v){ 
// HTML 
n(v); 
}); addMethod(' create', ns.mapper(requestFilter).bind(create)); 
model.addMethod('delete', ns.mapper(requestFilter).bind(delete)); model.method ('create')).bind(view1).run(); 
ns.from(model.method('create')).bind(view2).run(); promise() .bind(model.notify('create').run({"body": "test"})); 
//パラメータ {"body": "test"} を view1 と view2 に渡します 

 
モデルの使用方法: 
: ns.createModel(): モデルの生成 
: model.addMethod(): メソッド名と対応する処理 Promise の定義 
: ns.from( ): 定義 モデルの特定のメソッドが実行された後の処理 
: model.notify(): モデルのメソッドを実行 
ウィジェット 

ウィジェットは、html と名前空間モジュールを関連付けます。簡単な例を見てみましょう。
まず、sample.widget の名前空間を定義します。

コードをコピー

コードは次のとおりです。

// sample-widget.js Namespace( "sample.widget") .use("brook.widget *") .define(function(ns) { ns.provide({

registerElement: function(element) {

element.innerHTML = "Hello World!"; 
} 
}); 

以下は、sample.widget に関する HTML ページです。 

コードをコピー

コードは次のとおりです。

head> ウィジェットサンプル

< /html>

このコードは、sample.widget として指定された data-widget-namespace のすべての div コンテンツを hello world!
run() と submit() の違いです。 🎜>実行の約束 run() メソッドを使用する必要があります。 Promise チェーンの処理後にコールバック関数を実行する必要がある場合は、run を使用せず、subscribe を使用してください。

コードをコピー

コードは次のとおりです。

ns.promise().bind(function) (next, value) {
next(value);
}).subscribe(function(value) {

console.log(value, "world!"); }, "こんにちは" ); //こんにちは! ns.promise().bind(function(next, value) { console.log(value); next("次はありません"); } ).run("hello");

//hello

brook.util
このモジュールは多くの便利なメソッドを定義します。
マッパー: 装飾処理を定義する

コードをコピー

コードは以下のとおりです。

 
var input = ns.promise(function(next, value) { 
next("this is input"); 
}); 
var mapper = ns.mapper(function(値) { 
戻り値 "!"; 
}); 
var 出力 = ns.promise(function(next, value) { 
console.log(value); 
next( value); 
}); 
//
input.bind(output).run(); を実行します。

 

filter: filter

コードをコピーコードは次のとおりです:

var input = ns .promise (function(next, value) { 
next(2); 
}); var 
var EvenFilter = ns.filter(function(value) { 
return (value % 2) == = 0 ; 
}); 
var 出力 = ns.promise(function(next, value) { 
console.log(value " は偶数"); 
next(value); 
} ); 
//実行 
input.bind(evenFilter).bind(output).run(); 
//2 は偶数です 

 

scatter: value 内の値は、シーケンス内の次の Promise を呼び出します

コードをコピーコードは次のとおりです:

var Output = ns .promise(function(next, value) { 
console.log(value); 
next(value); 
}); ns.scatter().bind (出力).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 : 条件付きでプロミスを実行します。最初のパラメータはフィルター、2 番目のパラメータはプロミスです。最初のパラメータが true の場合、2 番目のパラメータの Promise が実行されます。 

コードをコピーコードは次のとおりです。 var Output = ns.promise(function(次、値 ) {

console.log(値);

var isEven = function(num) { 
return (num % 2 == = 0) ; 
}; 
varned = ns.promise(function(next, value) { 
console.log("done"); 
//実行
 ns.cond(isEven, 出力).bind(done).run(2); 
//2 
//done 
ns.cond(isEven, 出力).bind(done) .run( 3); 
//done 

 
match: value の値に基づいて実行する Promise を決定します。 

コードをコピー

コードは次のとおりです: vardispatchTable = { "__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( "hoge"); 

 
from: Promise チェーンの初期パラメータを渡すか、run を使用してそれらを渡すことができます。 




コードをコピーします

コードは次のとおりです:

ns.from("hello")。 bind(ns .debug()).run(); //debug: hello 最後に、github ホームページのサンプルを通じて brook が MVC パターンを実装する方法を体験することもできます。