brook javascript Framework_js オブジェクト指向の紹介

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>

ウィジェット

.widget" >hoge

foo

bar

このコードは、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 パターンを実装する方法を体験することもできます。