Introduction to the brookjavascript framework _ js object-oriented-js tutorial

Brook is a Javascript framework for large-scale web development, rather than a tool set. 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:

The 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.

The 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:

The 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:

The 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.

The 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.

The 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.

The 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.

The Code is as follows:

Widget sample