Speaking of design patterns, we have the impression that it must be the first thought of 24 kinds of design patterns in JAVA, JavaScript, in fact, also has a corresponding design patterns, today we are saying the combination mode is one of them.
So what is a combination of pattern here? Combined mode you can understand a remote control. Which function you use the function to which the function is turned on. Let us look at the code
function Compose(){
this.list = [];
}
First we create a constructor Conpose, and then create a list array on the inside, what? You asked me list is doing with the back you know. Then we re-write the internal functions
Compose.prototype = {
constructor : Compose,
// 向list之中添加一个功能等待执行;
add : function( cb , options ){
// 把options默认变成对象;
options = options || {};
this.list.push({
cb : cb ,
type : options.type || "default"
});
},
// 直接执行我们需要的功能;
fire : function(){
// 遍历功能列表，实现功能调用;
this.list.forEach( function( item ){
switch (item.type) {
case "default":
item.cb();
break;
case "constructor":
new item.cb();
break;
default:
break;
}
})
}
}
Wherein the function is to add the effect to add a function to the current combination mode. In other words, although we got a remote control, but this is a blank remote control, you have to put his chips in the store to go into the content of the function, while fire is the equivalent of the remote control button, used to start function used. Here we add a function separate out more about them
add : function( cb , options ){
// 把options默认变成对象;
options = options || {};
this.list.push({
cb : cb ,
type : options.type || "default"
});
}
Which, cb is a callback function for incoming function to function, and that is to give you options for incoming other configuration parameters, which must be passed because the options are not, so we have to add that determine options = options || {}
meaning that at present options, we will use options, as null absence. Then we use the push function will list the contents into an array. Among them, we are here to demonstrate the options, so a temporary increase options.type used to determine the type, when passing a type, use the incoming type, when type does not exist, the default value is used by default. So we put a good adder to add written, we will function successfully passed into the list inside the store, but it is not always kept the matter is it, if we supposed moldy, so we You have to call it right. So then we started using fire function, used to call them. Still, we put out the fire function alone more about them
fire : function(){
// 遍历功能列表，实现功能调用;
this.list.forEach( function( item ){
switch (item.type) {
case "default":
item.cb();
break;
case "constructor":
new item.cb();
break;
default:
break;
}
})
}
In fact, here it is relatively simple, since we have already put into the list features are inside, so if it wants to call him to take it to traverse again is not it, to which functions are out. Here we use the forEach this API to implement traversal. Which we pass a callback function, item, item value is the current value of this list is that we receive it inside. Before we say that is not mentioned is to add a feature to show you the type of use options Well, here we can use it. To determine the value options.type through the switch, to call the appropriate function, if the content is passed in default of default, then you can call the function directly, if the constructor, then we need new look.
Above we have successfully put the remote control to assemble better. Let's start with a look to see the good.
function banner(){
console.log("启动banner功能");
}
function table(){
console.log("选项卡");
}
function Menu( a , b){
console.log(this,a,b);
}
function Stairs( a , b){
console.log(this , a , b)
}
Here we casually write four functions for testing later in actual combat with the use, function can put your own needs.
Then next thing we need to put these functions into a remote control which, of course, is to use the add function it
var com = new Compose();
com.add(banner);
com.add(table);
com.add(Menu.bind(false,"a","b") , { type : "constructor" });
com.add(Stairs , { type : "constructor"});
var com2 = new Compose();
com2.add(banner);
com2.add(Menu.bind(false,"a","b") , { type : "constructor" });
com2.add(Stairs , { type : "constructor"});
setTimeout(function(){
if( Math.random() > 0.5 ){
console.log("VIP用户去广告");
com2.fire();
}else{
console.log("普通用户先看2000s广告");
com.fire();
}
},1000)
To test this, we have two new com out different calls, we have the code to run up and look promising so bad
OK so that, corresponding functions are successfully launched, which is a combination of modes, and is it is not very simple. Design pattern is to let our elegant and efficient achieve the appropriate type of function, so we sometimes need to be flexible about,
using design patterns to replace the old function. Here we introduce a combined mode, design mode just tip of the iceberg. Hope to inspire you, give you a small partners to gain something ah ~
