Introduction to the brook javascript framework

Brook cited the pipe concept in UNIX to easily concatenate all the processes to complete the task together. The output of the previous processing is used as the input of the next processing to complete parameter transfer. Through brook, you can write your javascript program in MVC mode.
Http://hirokidaichi.github.com/brook/ brook feet home download
The brook framework uses the namespace library for module organization.
The following example shows how to use namespace:
Copy codeThe Code is as follows:
// Define a sample namespace
Namespace ('sample ')
// Use brook
. Use ('brook *')
. Use ('brook. util *')
. Define (function (ns ){
Var foo = function (){
Alert ('this is sample. foo ');
};
// Define functions that are publicly available
// After the external module uses the sample, it can be called through ns. sample. foo ().
Ns. provide ({
Foo: foo
});
});
// Example
Namespace. use ('sample'). apply (function (ns ){
Ns. sample. foo ();
});


To understand the brook framework, you need to understand several core concepts of brook.
Promise
In simple terms, promise is a encapsulated function, which is responsible for passing the value to the next promise. It is like transferring the value to the next member (promise) during the relay race ). In this way, non-synchronous processing can be programmed in a sequence similar to synchronous processing.
Copy codeThe Code is as follows:
Var p = ns. promise (function (next, value ){
// Process the value here
// The value is passed in by the previous promise.
// Hand over the work to the next promise
Next ("new_value ");
});

Let's see what promise can do. For example
: Wait for one second
: Output moge
: Wait two seconds
: Output muga

When promise is not used:
Copy codeThe Code is as follows:
(Function (){
Var firstInterval = setInterval (function (){
Console. log ("moge ");
ClearInterval (firstInterval );
Var secondInterval = setInterval (function (){
Console. log ("muga ");
ClearInterval (secondInterval );
},2000 );
},1000 );
})();

The processing sequence of such code is not easy to understand. If you use promise:
Copy codeThe Code is as follows:
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.exe cute ();
});

The bind function can accept multiple parameters or write them as follows:
Ns. wait (1000). bind (p1, ns. wait (1000), p2). run ();
Promise usage:
1: wait a few seconds to use the wait method under brook. util.
2: the "Great handover" Between promise is implemented through the bind method, that is, the PIPE function in UNIX.
3: run the run () method.
Channel
A channel is a channel. In brook, it indicates the collection of promise. You can store multiple promise in one channel and execute them together.
Copy codeThe Code is as follows:
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 usage:
1: observer: append promise to channel
2: sendChannel: Determine the channel
3: run all promise in the channel.
Model
The model is encapsulated into a channel. You can define channels with names in the model. These channels are all methods.
This component can identify M and V in MVC, namely, modules and views. It can write such a process. After the method of the model is executed, the result is uploaded to one or more views (promise ). This is the observer mode.
Copy codeThe Code is as follows:
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. Groovy ('create'). run ({"body": "test "}));
// Pass the {"body": "test"} parameter to view1 and view2 "}

Usage of the model:
: Ns. createModel (): Generate model
: Model. addMethod (): defines the method name and corresponding processing promise
: Ns. from (): defines the processing after a method of the model is executed.
: Model. Policy (): Execute the method of the model.
Widget
Widgets are responsible for associating html and namespace modules. Let's look at a simple example.
First, define the namespace of a sample. widget.
Copy codeThe Code is as follows:
// Sample-widget.js
Namespace ("sample. widget ")
. Use ("brook. widget *")
. Define (function (ns ){
Ns. provide ({
RegisterElement: function (element ){
Element. innerHTML = "Hello World! ";
}
});
});

The following is the html page about sample. widget.
Copy codeThe Code is as follows:
<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 <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>

This code will replace all the div content of data-widget-namespace specified as sample. widget with hello world!
Differences between run () and subscribe ()
Run () is required for promise execution. After processing a promise chain, you do not need to use run or subscribe When You Need To execute the callback function.
Copy codeThe Code is as follows:
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
This module defines many useful methods.
Mapper: Define decoration Processing
Copy codeThe Code is as follows:
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 );
});
// Execute
Input. bind (mapper). bind (output). run ();
// This is input!

Filter: filter
Copy codeThe Code is as follows:
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 );
});
// Execute
Input. bind (evenFilter). bind (output). run ();
// 2 is even

Scatter: disperser. Values in the value call the next promise in sequence.
Copy codeThe Code is as follows:
Var output = ns. promise (function (next, value ){
Console. log (value );
Next (value );
});
// Execute
Ns. scatter (). bind (output). run ([1, 2, 3, 4, 5, 6]);
// 1
// 2
// 3
// 4
// 5
// 6

TakeBy: gets n calls from the value to the next promise at a time.
Copy codeThe Code is as follows:
Var output = ns. promise (function (next, value ){
Console. log (value );
Next (value );
});
// Merge rows
Ns. scatter (). bind (ns. takeBy (2). bind (output). run ([1, 2, 3, 4, 5, 6]);
// [1, 2]
// [3, 4]
// [5, 6]

Wait: wait FOR n milliseconds
Cond: conditional promise execution. The first parameter is the filter, and the second parameter is promise. When the first parameter is true, the promise of the second parameter is executed.
Copy codeThe Code is as follows:
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 ");
});
// Merge rows
Ns. cond (isEven, output). bind (done). run (2 );
// 2
// Done
Ns. cond (isEven, output). bind (done). run (3 );
// Done

Match: determines which promise to execute based on the value of value.
Copy codeThe Code is as follows:
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: You can use run to pass the initial parameters for the promise chain.
Copy codeThe Code is as follows:
Ns. from ("hello"). bind (ns. debug (). run ();
// Debug: hello

Finally, we can use the github homepage example to learn how brook implements the MVC mode.