Brook refers to the pipe concept under UNIX, which makes it easy to concatenate all the processing together to accomplish the task. The output of the previous processing is used as the input of the latter processing to complete the pass of the parameter. By Brook you can write your JavaScript program in an MVC way.
HTTP://HIROKIDAICHI.GITHUB.COM/BROOK/BROOK Cloud Habitat Community Download
The brook framework uses the namespace library for the organization of the module.
Here's another example of how namespace is used:
Copy Code code as follows:
Define a sample name space
Namespace (' sample ')
Using Brook
. Use (' Brook * ')
. Use (' Brook.util * ')
. Define (function (NS) {
var foo = function () {
Alert (' is Sample.foo ');
};
Define externally exposed functions
The external module can be invoked by Ns.sample.foo () as long as the sample is used.
Ns.provide ({
Foo:foo
});
})；
Examples of Use
Namespace.use (' sample '). Apply (function (NS) {
Ns.sample.foo ();
});
To understand the brook framework, several core concepts of Brook need to be understood.
Promise
In simple terms, promise is the encapsulated function that is responsible for passing the value to the next promise. Just like the relay, pass the baton (value) to the next member (Promise). This allows for asynchronous processing to be programmed in a similar sequence of synchronization.
Copy Code code as follows:
var p = ns.promise (function (next, value) {
The value is processed here
Value is the previous promise passed in
Hand over the work to the next promise.
Next ("New_value");
});
Let's see what promise can do. such as a requirement.
: Wait a second
: Output Moge
: Wait two seconds
: Output Muga
When you don't have to promise:
Copy Code code as follows:
(function () {
var firstinterval = setinterval (function () {
Console.log ("Moge");
Clearinterval (Firstinterval);
var secondinterval = setinterval (function () {
Console.log ("Muga");
Clearinterval (Secondinterval);
}, 2000);
}, 1000);
})();
Such code processing order is poorly understood. If you switch to promise:
Copy Code code 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). bind (P2). Run ();
}
});
});
Namespace.use ("sample"). Apply (function (NS) {
Ns.sample.execute ();
});
The BIND function can accept multiple parameters, or it can be written like this:
Ns.wait (1000). Bind (P1, ns.wait (1000), p2). Run ();
How to use Promise:
1: Wait a few seconds to use the Brook.util method
The "stick handover" between 2:promise is achieved through the Bind method, which is the pipe function under UNIX.
3: Finally need to execute the run () method
Channel
Channel is the name of the channel, the meaning of the pipe. In Brook it represents a collection of promise. Multiple promise can be stored in a channel and executed together.
Copy Code code 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");
}
});
How to use channel:
1:observer: Append promise to Channel
2:sendchannel: Determine channel
3: Finally through run to execute all the promise in channel
Model
Model is to channel for packaging. In model can be defined with the name of the channel, these channel are a method.
This component can specify the M and V in MVC, that is, modules and views. It can write this processing, the model of method execution, its results to one or more view (promise). This is the Observer pattern.
Copy Code code 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.notify (' Create '). Run ({"Body": "Test"});
Passing parameter {"Body" to View1 and View2: "Test"}
Model's use Method:
: Ns.createmodel (): Build model
: Model.addmethod (): Defines the method name and the corresponding processing promise
: Ns.from (): Defines a process after a method of model is executed
: Model.notify (): Execute model method
Widgets
The widget is responsible for associating HTML and namespace modules. Look at a simple example.
First, define a Sample.widget namespace.
Copy Code code 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 an HTML page about Sample.widget.
Copy Code code as follows:
<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>
<body>
<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>
This code will replace all the DIV contents data-widget-namespace designated as Sample.widget into Hello world!
The difference between run () and subscribe ()
You need to use the run () method when promise executes. When a promise chain is processed, the callback function needs to be executed without run, using subscribe.
Copy Code code 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 a number of useful methods.
Mapper: Defining decoration processing
Copy Code code 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);
});
Perform
Input.bind (Mapper). bind (Output). Run ();
This is input!
Filter: Filters
Copy Code code 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);
});
Perform
Input.bind (Evenfilter). bind (Output). Run ();
2 is even
Scatter: The value inside the Disperser, in turn, calls the next promise
Copy Code code as follows:
var output = ns.promise (function (next, value) {
Console.log (value);
Next (value);
});
Perform
Ns.scatter (). bind (Output). Run ([1, 2, 3, 4, 5, 6]);
1
2
3
4
5
6
Takeby: Take n at one time from value to call the next promise
Copy Code code as follows:
var output = ns.promise (function (next, value) {
Console.log (value);
Next (value);
});
Aimi Line
Ns.scatter (). Bind (Ns.takeby (2)). Bind (Output). Run ([1, 2, 3, 4, 5, 6]);
[1, 2]
[3, 4]
[5, 6]
Wait: Waits n milliseconds
Cond: Conditionally executes the promise, the first parameter is a filter, and the second parameter is promise. Executes the promise of the second argument when the first argument is true.
Copy Code code 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");
});
Aimi Line
Ns.cond (IsEven, Output). Bind (Done). Run (2);
2
Done
Ns.cond (IsEven, Output). Bind (Done). Run (3);
Done
Match: Determines which promise to perform according to value.
Copy Code code 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: Passes the initial argument for the promise chain, or it can be passed with run.
Copy Code code as follows:
Ns.from ("Hello"). Bind (Ns.debug ()). Run ();
Debug:hello
Finally, through the GitHub home page example to realize that Brook is how to achieve the MVC pattern.
