转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/102517956

JavaScript设计模式系列—模式篇总结（上）

JavaScript设计模式系列—模式篇简洁总结

1.单例模式

2.策略模式

3.代理模式

4.迭代器模式

5.发布-订阅模式

6.命令模式

7.组合模式

8.工厂模式、构造函数模式、原型模式

//打印封装
function log(){console.log.apply(console,arguments);
}

1.单例模式

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式的用途非常广泛，比如线程池、全局缓存、浏览器中的 window 对象等。

惰性单例指的是在需要的时候才创建对象实例。

//代理实现单例模式
function CreateDiv(html){this.html = html;this.init();
}
CreateDiv.prototype.init = function(){var div = document.createElement("div");div.innerHTML = this.html;document.body.appendChild(div);
}var ProxyCreateDiv = (function(){var instance = null;return function (html){//惰性单例return instance || (instance = new CreateDiv(html));}
})()
log(new ProxyCreateDiv("html1") === new ProxyCreateDiv("html2"));//true

// 通用的惰性单例 管理单例的职责
var getSingle = function( fn ){var result;return function(){return result || ( result = fn .apply(this, arguments ) );}
};//工厂模式创建 创建实例对象的职责
var createFactoryDiv= function(html){var div = document.createElement("div");div.innerHTML = html;document.body.appendChild(div);return div;
};var createDiv = getSingle( createFactoryDiv);
var div = createDiv("html1");
log(div === createDiv("html2"));

单例模式详细：https://blog.csdn.net/pcaxb/article/details/100512295

2.策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。比如一个压缩文件的程序，既可以选择 zip算法，也可以选择 gzip算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是策略模式。

定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类 Context，在客户对 Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。

在实际开发中，我们通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以用策略模式来封装它们。

//策略类
//把每种绩效的计算规则都封装在对应的策略类里面
var performanceS = {calculate:function( salary ){return salary * 4;}
};
var performanceA = {calculate:function( salary ){return salary * 3;}
};
var performanceB = {calculate:function( salary ){return salary * 2;}
};
//环境类
//接下来定义奖金类Bonus：
var Bonus = function(){this.salary = null; // 原始工资this.strategy = null; // 绩效等级对应的策略对象
};
Bonus.prototype.setSalary = function( salary ){this.salary = salary; // 设置员工的原始工资
};
Bonus.prototype.setStrategy = function( strategy ){this.strategy = strategy; // 设置员工绩效等级对应的策略对象
};
Bonus.prototype.getBonus = function(){ // 取得奖金数额return this.strategy.calculate( this.salary ); // 把计算奖金的操作委托给对应的策略对象
};var bonus = new Bonus();
bonus.setSalary( 10000 );// 设置员工的原始工资bonus.setStrategy( performanceS); // 设置策略对象
console.log( bonus.getBonus() ); // 输出：40000
bonus.setStrategy( performanceA ); // 设置策略对象
console.log( bonus.getBonus() ); // 输出：30000//js版本的策略模式
var strategies = {"S": function( salary ){return salary * 4;},"A": function( salary ){return salary * 3;},"B": function( salary ){return salary * 2;}
};
var calculateBonus = function( level, salary ){//通过属性名来筛选算法return strategies[ level ]( salary );
};console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000


//策略类
var strategies = {isNonEmpty: function( value, errorMsg ){ // 不为空if ( value === '' || value === undefined || value === null ){return errorMsg ;}},minLength: function( value, length, errorMsg ){ // 限制最小长度if ( value.length < length ){return errorMsg;}},isMobile: function( value, errorMsg ){ // 手机号码格式if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){return errorMsg;}}
};
//环境类
function Validator(){this.cacheList = [];// 保存校验规则
}//支持一个input添加多种校验
Validator.prototype.add = function(dom,rules){var that_ = this;for (var i = 0,ruleObj; ruleObj = rules[i++];) {(function(ruleObj){that_.cacheList.push(function(){//把校验的步骤用空函数包装起来，并且放入cachevar rule = ruleObj.strategy;var errorMsg = ruleObj.errorMsg;var array = rule.split(":");var strategy = array.shift();//去掉类别array.unshift(dom.value);//第一个参数是dom的valuearray.push(errorMsg);// 把errorMsg 添加进参数列表return strategies[strategy].apply(dom,array);});})(ruleObj);}
}Validator.prototype.start = function(){var errorMsg;for (var i = 0,validatorFunc; validatorFunc = this.cacheList[i++];) {if(errorMsg = validatorFunc()){// 如果有确切的返回值，说明校验没有通过return errorMsg;}}
}//测试使用
var registerForm = document.getElementById( 'registerForm' );
function validataFunc(){var validator = new Validator();validator.add(registerForm.userName,[{strategy:"isNonEmpty",errorMsg:"请输入用户名"},{strategy:"minLength:6",errorMsg:"用户名不能小于6位"}]);validator.add(registerForm.password,[{strategy:"minLength:6",errorMsg:"密码不能小于6位"}]);validator.add(registerForm.phoneNumber,[{strategy:"isMobile",errorMsg:"手机号码格式不正确"}]);return validator.start();// 返回校验结果
}
registerForm.onsubmit = function(){var errorMsg = validataFunc(); // if ( errorMsg ){//如果errorMsg 有确切的返回值，说明未通过校验log ( errorMsg );return false; // 阻止表单提交}};

策略模式详细：https://blog.csdn.net/pcaxb/article/details/100516461

3.代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

1.保护代理：作为中间层过滤或者修改一些请求，用于控制不同权限的对象对目标对象的访问。

2.虚拟代理: 虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建。

//虚拟代理的案例：小明在A心情好的时候通过代理B给A送花
function Flower(){}
var A = {receiveFlower:function(flower){log(flower);},listenGoodMood:function(fn){fn();}
}var B = {receiveFlower:function(){A.listenGoodMood(function(){//监听A 的好心情var flower = new Flower();//延迟创建 flower 对象A.receiveFlower(flower);});},
}var xiaoming = {sendFlower:function(target){target.receiveFlower();}
}
xiaoming.sendFlower(B);
//关键：小明调用代理B的函数，代理B调用A的函数

//虚拟代理的案例：虚拟代理实现图片预加载
//图片预加载理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了
var myImage = (function(){var imgNode = document.createElement("img");document.body.appendChild(imgNode);return {setSrc:function(src){imgNode.src = src;}}
})();
// myImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );//缺点是图片加载完成之前：页面上图片位置是一个空白，接下来用代理的方式加一个默认图
var proxyImage = (function(){var img = new Image();//这里直接创建图片，不需要创建标签img.onload = function(){//这里的this是图片myImage.setSrc(this.src);}return {setSrc:function(src){myImage.setSrc('file:// /C:/Users/svenzeng/Desktop/loading.gif');img.src = src;}}
})();
proxyImage.setSrc(
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3247749323,1379996244&fm=26&gp=0.jpg'
);
//注意：代理和本体接口保持一致性，用户可以放心地请求代理，在任何使用本体的地方都可以替换成使用代理。//预加载的意义，不使用预加载的代码
var MyImage = (function(){var imgNode = document.createElement( 'img' );document.body.appendChild( imgNode );var img = new Image;img.onload = function(){imgNode.src = img.src;};return {setSrc: function( src ){imgNode.src = 'file:// /C:/Users/svenzeng/Desktop/loading.gif';img.src = src;}}
})();
MyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
/***
1.违反了单一职责原则，MyImage 对象除了负责给 img 节点设置 src外，还要负责预加载图片。
2.违反开放 —封闭原则，如果只是从网络上获取一些体积很小的图片，或者多年后的网速快到根本
不再需要预加载，想删掉预加载就需要改动MyImage。
*/

//缓存代理计算乘积的案例，常用的还有 缓存代理用于ajax异步请求数据
var mult = function(){var a = 1;for ( var i = 0, l = arguments.length; i < l; i++ ){a = a * arguments[i];}return a;
};
mult( 2, 3, 4 ); // 输出：24
//现在加入缓存代理函数：
var proxyMult = (function(){var cacheList = [];return function(){//第二个参数不传，默认是逗号拼接var key = Array.prototype.join.call(arguments);if(key in cacheList){//判断缓存中是否有return cacheList[key]}else{return cacheList[key] = mult.apply(this,arguments);}}
})();
log(proxyMult( 1, 2, 3, 4 )); // 输出：24
log(proxyMult( 1, 2, 3, 4 )); // 输出：24

//用高阶函数动态创建代理
/**************** 计算乘积 *****************/
var mult = function(){var a = 1;for ( var i = 0, l = arguments.length; i < l; i++ ){a = a * arguments[i];}return a;
};
/**************** 计算加和 *****************/
var plus = function(){var a = 0;for ( var i = 0, l = arguments.length; i < l; i++ ){a = a + arguments[i];}return a;
};
/**************** 创建缓存代理的工厂 *****************/
var createProxyFactory = function( fn ){var cacheList = [];return function(){//第二个参数不传，默认是逗号拼接var key = Array.prototype.join.call(arguments,",");if(key in cacheList){//判断缓存中是否有return cacheList[key]}return cacheList[key] = fn.apply(this,arguments);}
};var proxyMult = createProxyFactory( mult ),
proxyPlus = createProxyFactory( plus );
log ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24
log ( proxyMult( 1, 2, 3, 4 ) ); // 输出：24
log ( proxyPlus( 1, 2, 3, 4 ) ); // 输出：10
log ( proxyPlus( 1, 2, 3, 4 ) ); // 输出：10

代理模式详细：https://blog.csdn.net/pcaxb/article/details/100516490

4.迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素(聚合：分散的聚合在一起)，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

//自定义一个内部迭代器
var each = function( ary, callback ){for ( var i = 0, l = ary.length; i < l; i++ ){if(callback.call( ary[i], i, ary[ i ] ) === false){// 把下标和元素当作参数传给callback 函数break;//终止循环}}
};
//测试
var compareIn = function( ary1, ary2 ){if ( ary1.length !== ary2.length ){log ( 'ary1 和ary2 不相等' );return;}var unlikeness = false;//判断是不是相等each( ary1, function( i, n ){if ( n !== ary2[ i ] ){log ( 'ary1 和ary2 不相等' );unlikeness = true;return false;//终止循环}});if(!unlikeness)log ( 'ary1 和ary2 相等' );
};
compareIn( [ 1, 2, 3, 8], [ 1, 2, 4, 5] ); //ary1 和ary2 不相等
compareIn( [ 1, 2, 3], [ 1, 2, 3]); //ary1 和ary2 相等//自定义一个外部迭代器
var Iterator = function( obj ){var current = 0;var next = function(){current += 1;};var isDone = function(){return current >= obj.length;};var getCurrItem = function(){return obj[ current ];};return {next: next,isDone: isDone,getCurrItem: getCurrItem}
};
//测试
var compareOut = function( iterator1, iterator2 ){while( !iterator1.isDone() && !iterator2.isDone() ){if ( iterator1.getCurrItem() !== iterator2.getCurrItem() ){log ( 'iterator1 和iterator2 不相等' );return;//终止循环,返回函数结果}iterator1.next();iterator2.next();}log ( 'iterator1 和iterator2 相等' );
}
compareOut( Iterator([ 1, 2, 3,5,8,9]), Iterator([ 1, 2, 3, 4,7,9])); //iterator1 和iterator2 不相等

//迭代器模式的应用举例
var getActiveUploadObj = function(){//浏览器的上传控件try{return new ActiveXObject( "TXFTNActiveX.FTNUpload" ); // IE 上传控件}catch(e){return false;}
};var getFlashUploadObj = function(){//Flash的上传控件if ( typeof(supportFlash) === "function" && supportFlash()){ // supportFlash 函数有提供var str = '<object type="application/x-shockwave-flash"></object>';return document.body.innerHTML = str;}return false;
};var getFormUpladObj = function(){//表单的上传控件var str = '<input name="file" type="file" class="ui-file" />'; // return document.body.innerHTML = str;
};var iteratorUploadObj = function(){for ( var i = 0, fn; fn = arguments[ i++ ]; ){var uploadObj = fn();if ( uploadObj !== false ){return uploadObj;}}
};
var uploadObj = iteratorUploadObj( getActiveUploadObj, getFlashUploadObj, getFormUpladObj );
log(uploadObj);//<input name="file" type="file" class="ui-file" />//后来我们又给上传项目增加了 Webkit控件上传和 HTML5上传，我们要做的仅仅是下面一些工作。
var getWebkitUploadObj = function(){// 具体代码略
};
var getHtml5UploadObj = function(){// 具体代码略
};
var uploadObj = iteratorUploadObj( getActiveUploadObj, getWebkitUploadObj,getFlashUploadObj, getHtml5UploadObj, getFormUpladObj );

迭代器模式详细：https://blog.csdn.net/pcaxb/article/details/100516574

5.发布-订阅模式

发布 — 订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript开发中，我们一般用事件模型来替代传统的发布 — 订阅模式。

第一点说明发布 — 订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。第二点说明发布 — 订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。

//发布-订阅模式的通用实现
/*** @description: 发布-订阅模式  发布-循环所有的订阅者的回调函数 订阅-添加回调函数* 发布-release 订阅-subscribe  监听-listen 删除-remove* CommonReleaseSubscribe 公共的发布订阅模式构造函数，构造出来的每一个对象都可以添加订阅和发布* @param {type} * @return: */
function CommonReleaseSubscribe(){this.subscribeList = [];//缓存列表，存放订阅者的回调函数//解决先发布再订阅的问题，三步：1,2,3 {isReleased:-,params:-}是不是发布过和发布的参数this.subscribeStateList = [];//1.存放订阅者发布消息的状态和参数
}
/*** @description: 注册或者是监听订阅消息* @param {type} type是订阅类型，fn是订阅回调函数* @return: */
CommonReleaseSubscribe.prototype.listen = function(type,fn){if(!this.subscribeList[type]){//如果还没有订阅过此类消息，给该类消息创建一个缓存列表this.subscribeList[type] = [];}if(typeof(fn) === "function"){this.subscribeList[type].push(fn);//订阅的消息添加进消息缓存列表}//3.订阅的时候，需要知道是发布之前还是发布之后if(typeof(fn) === "function" && this.subscribeStateList[type] && this.subscribeStateList[type].isReleased){fn.apply(this,this.subscribeStateList[type].params);}
}
/*** @description: 发布订阅消息* @param {type} type是发布类型和订阅类型对应* @return: */
CommonReleaseSubscribe.prototype.release = function(){var type = Array.prototype.shift.apply(arguments); // 取出消息类型var fns = this.subscribeList[type];// 取出该消息对应的回调函数集合if(!fns || fns.length === 0){// 如果没有订阅该消息，不需要发布return false;}else{fns.forEach(fn => {fn.apply(this,arguments);});}//2.发布订阅消息后，修改发布状态和参数this.subscribeStateList[type] = {isReleased:true,params:arguments};
}
/*** @description: 删除订阅消息* @param {type} type是订阅类型，fn是订阅回调函数* @return: */
CommonReleaseSubscribe.prototype.remove = function(type,fn){var fns = this.subscribeList[type];if(!fns || fns.length === 0){// 如果key 对应的消息没有被人订阅，则直接返回return false;}if(!fn){ // 如果没有传入具体的回调函数，表示需要取消key 对应消息的所有订阅fns.length = 0;}else{//逻辑问题，如果有重复的，可能会删除不掉的问题// fns.forEach((fn_,index)=>{//     if(fn == fn_){//         // 删除订阅者的回调函数，数组越来越小，会有元素遍历不到的情况//         fns.splice(index,1);//     }// });// 反向遍历订阅的回调函数列表，反向遍历不会有重复可能会删除不掉的问题for ( var len = fns.length - 1; len >=0; len-- ){ if ( fns[ len ] === fn ){//删除后面的元素的情况，如果还会删除前面元素那就不一样了// 删除订阅者的回调函数，虽然数组也是越来越小，但是不会有元素遍历不到的情况fns.splice( len, 1 ); }}}
}

//发布-订阅模式的应用案例一：购房时，售楼部有房出售会联系客户，而不是客户每天联系售楼部去问有没有房。
//这里的售楼部可以看成是一个售楼部，也可以看成是所有售楼部管理处，思路不一样
var salesOffices = new CommonReleaseSubscribe();
salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小明订阅消息log( '价格= ' + price ,this);
});
salesOffices.listen( 'squareMeter88',function( price ){ // 小李订阅消息log( '价格= ' + price ,this);
});
salesOffices.listen( 'squareMeter110', function( price ){ // 小红订阅消息log( '价格= ' + price ,this);
});
function testCase(){salesOffices.remove("squareMeter88",fn1);//删除squareMeter88小明的订阅消息salesOffices.release( 'squareMeter88', 2000000 ); // 发布88平方米房子的价格salesOffices.release( 'squareMeter110', 3000000 ); // 发布110平方米房子的价格
}

//发布-订阅模式的应用案例二；登录之后需要刷新购物车，导航栏，还有一些不知道哪里需要刷新
var loginSuccess = new CommonReleaseSubscribe();
//如果不需要区分消息类型的话，第一个参数传all
loginSuccess.listen("all",function(res){//刷新购物者监听//res 是登录成功的数据log("刷新购物车",res);
});
loginSuccess.listen("all",function(res){//刷新导航栏监听//res 是登录成功的数据log("刷新导航栏",res);
});
;(function(){setTimeout(function(){var res = {code:200,msg:"success",loginName:"cc"};loginSuccess.release("all",res);//发布之后再订阅loginSuccess.listen("all",function(res){//刷新个人中心监听//res 是登录成功的数据log("刷新个人中心",res);});},2000);
})(loginSuccess);

发布-订阅模式详细：https://blog.csdn.net/pcaxb/article/details/100536196

6.命令模式

命令模式中的命令（command）指的是一个执行某些特定事情的指令。

命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

//更像命令模式
var button1 = document.getElementById( 'button1' ),button2 = document.getElementById( 'button2' ),button3 = document.getElementById( 'button3' );//封装行为到命令对象或类中
var menuBar = {refresh: function(){console.log( '刷新菜单目录' );}
};var subMenu = {add: function(){console.log( '增加子菜单' );},del: function(){console.log( '删除子菜单' );}
};var refreshMenuBarCommand = {execute:function(){menuBar.refresh();}
}var addSubMenuCommand = {execute:function(){subMenu.add();}
}var delSubMenuCommand = {execute:function(){subMenu.del();}
}
//设置命令
var setCommand = function( button, command ){button.onclick = function(){command.execute();}
};setCommand( button1, refreshMenuBarCommand );
setCommand( button2, addSubMenuCommand );
setCommand( button3, delSubMenuCommand );

//Js命令模式
//封装行为到命令对象或类中
var menuBar = {refresh: function(){console.log( '刷新菜单目录' );}
};var subMenu = {add: function(){console.log( '增加子菜单' );},del: function(){console.log( '删除子菜单' );}
};
//使用闭包保存接收者
var refreshMenuBarCommand = function(receiver){return function(){receiver.refresh();}
};
var addSubMenuCommand = function(receiver){return function(){receiver.add();}
};
var delSubMenuCommand = function(receiver){return function(){receiver.del();}
};
//设置命令
var setCommand = function( button, func ){button.onclick = func;
};
log(refreshMenuBarCommand)
setCommand( button1, refreshMenuBarCommand(menuBar) );
setCommand( button2, addSubMenuCommand(subMenu) );
setCommand( button3, delSubMenuCommand(subMenu) );

宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。

//宏命令
var closeDoorCommand = {execute: function(){console.log( '关门' );},undo: function(){console.log( '撤销关门' );}
};
var openPcCommand = {execute: function(){console.log( '开电脑' );},undo: function(){console.log( '撤销开电脑' );}
};var openQQCommand = {execute: function(){console.log( '登录QQ' );},undo: function(){console.log( '撤销登录QQ' );}
};var MacroCommand = function(){return {commandsList: [],add: function( command ){this.commandsList.push( command );},execute: function(){for ( var i = 0, command; command = this.commandsList[ i++ ]; ){command.execute();}},undo: function(){for ( var i = 0, command; command = this.commandsList[ i++ ]; ){command.undo();}}}
};
var macroCommand = MacroCommand();
macroCommand.add( closeDoorCommand );
macroCommand.add( openPcCommand );
macroCommand.add( openQQCommand );
macroCommand.execute();
macroCommand.undo();

命令模式详细：https://blog.csdn.net/pcaxb/article/details/100553804

7.组合模式

组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。组合模式将对象组合成树形结构，以表示“部分整体”的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性。

组合模式最大的优点在于可以一致地对待组合对象和基本对象。客户不需要知道当前处理的是宏命令还是普通命令，只要它是一个命令，并且有 execute 方法，这个命令就可以被添加到树中。

组合模式除了要求组合对象和叶对象拥有相同的接口之外，还有一个必要条件，就是对一组叶对象的操作必须具有一致性。只有用一致的方式对待列表中的每个叶对象的时候，才适合使用组合模式。

//更强大的宏命令
var MacroCommand = function(){return {commandsList: [],add: function( command ){this.commandsList.push( command );},execute: function(){for ( var i = 0, command; command = this.commandsList[ i++ ]; ){command.execute();}}}
};
var openAcCommand = {execute: function(){console.log( '打开空调' );}
};
/**********家里的电视和音响是连接在一起的，所以可以用一个宏命令来组合打开电视和打开音响的命令
*********/
var openTvCommand = {execute: function(){console.log( '打开电视' );}
};
var openSoundCommand = {execute: function(){console.log( '打开音响' );}
};var macroCommand1 = MacroCommand();
macroCommand1.add( openTvCommand );
macroCommand1.add( openSoundCommand );
/*********关门、打开电脑和打登录QQ 的命令****************/
var closeDoorCommand = {execute: function(){console.log( '关门' );}
};
var openPcCommand = {execute: function(){console.log( '开电脑' );}
};
var openQQCommand = {execute: function(){console.log( '登录QQ' );}
};
var macroCommand2 = MacroCommand();
macroCommand2.add( closeDoorCommand );
macroCommand2.add( openPcCommand );
macroCommand2.add( openQQCommand );
/*********现在把所有的命令组合成一个“超级命令”**********/
var macroCommand = MacroCommand();
macroCommand.add( openAcCommand );
macroCommand.add( macroCommand1 );
macroCommand.add( macroCommand2 );
/*********最后给遥控器绑定“超级命令”**********/
var setCommand = (function( command ){document.getElementById( 'button' ).onclick = function(){command.execute();}
})( macroCommand );

基本对象可以被组合成更复杂的组合对象，组合对象又可以被组合，这样不断递归下去，这棵树的结构可以支持任意多的复杂度。在树最终被构造完成之后，让整颗树最终运转起来的步骤非常简单，只需要调用最上层对象的 execute 方法。每当对最上层的对象进行一次请求时，实际上是在对整个树进行深度优先的搜索，而创建组合对象的程序员并不关心这些内在的细节，往这棵树里面添加一些新的节点对象是非常容易的事情。

var Folder = function( name ){this.name = name;this.parent = null; //增加this.parent 属性this.files = [];
};
Folder.prototype.add = function( file ){file.parent = this; //设置父对象this.files.push( file );
};
Folder.prototype.scan = function(){console.log( '开始扫描文件夹: ' + this.name );for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){file.scan();}
};
Folder.prototype.remove = function(){if ( !this.parent ){ //根节点或者树外的游离节点return;}for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){var file = files[ l ];if ( file === this ){files.splice( l, 1 );}}
};/******************************* File ******************************/
var File = function( name ){this.name = name;this.parent = null;
};
File.prototype.add = function(){throw new Error( '文件下面不能再添加文件' );
};
File.prototype.scan = function(){console.log( '开始扫描文件: ' + this.name );
};File.prototype.remove = function(){if ( !this.parent ){ //根节点或者树外的游离节点return;}for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){var file = files[ l ];if ( file === this ){files.splice( l, 1 );}}
};var folder = new Folder( '学习资料' );
var folder1 = new Folder( 'JavaScript' );
var folder2 = new Folder ( 'jQuery' );
var file1 = new File( 'JavaScript 设计模式与开发实践' );
var file2 = new File( '精通jQuery' );
var file3 = new File( '重构与模式' )
folder1.add( file1 );
folder2.add( file2 );
folder.add( folder1 );
folder.add( folder2 );
folder.add( file3 );var folder3 = new Folder( 'Nodejs' );
var file4 = new File( '深入浅出Node.js' );
folder3.add( file4 );
var file5 = new File( 'JavaScript 语言精髓与编程实践' );folder.add( folder3 );
folder.add( file5 );folder1.remove(); //移除文件夹folder.scan();

一般来说，组合模式适用于以下这两种情况。

表示对象的部分整体层次结构。组合模式可以方便地构造一棵树来表示对象的部分整体结构。特别是我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后，只需要通过请求树的最顶层对象，便能对整棵树做统一的操作。在组合模式中增加和删除树的节点非常方便，并且符合开放封闭原则。

客户希望统一对待树中的所有对象。组合模式使客户可以忽略组合对象和叶对象的区别，客户在面对这棵树的时候，不用关心当前正在处理的对象是组合对象还是叶对象，也就不用写一堆 if 、 else 语句来分别处理它们。组合对象和叶对象会各自做自己正确的事情，这是组合模式最重要的能力。

组合模式详细：https://blog.csdn.net/pcaxb/article/details/100556641

8.工厂模式、构造函数模式、原型模式

//工厂模式
function createPs(name,type){let obj = new Object();obj.name = name;obj.type = type;obj.getType = function(){return this.type;}return obj;
}
let cp = createPs("dd","5");

//构造器模式
function Person(name,age){//独特的属性this.name = name;this.age = age;
}
//原型模式
Person.prototype = {//公共的属性constructor:Person,color:"white"
}
let person = new Person("cc",20);
L(person);
L(Person.prototype.constructor,Person,Person.prototype.constructor === Person);

工厂模式、构造函数模式、原型模式详细：https://blog.csdn.net/pcaxb/article/details/100668246

一、单例模式保证一个类只有一个实例，并提供一个全局访问点二、策略模式：1.定义一系列算法(或者是业务规则)，把他们一个一个封装起来，并且使他们能够相互替换。2.把不变的部分和变化的部分分离开来3.策略模式分为策略类和环境类两部分：第一部分策略类：封装了具体的算法，并负责具体的计算过程第二部分环境类Context：客户对Context发出请求时，Context总是把请求委托给某个策略类进行计算三、代理模式：为一个对象提供一个代用品，以便控制对他的访问保护代理：作为中间层过滤或修改一些请求，用于控制不用权限的访问虚拟代理：把一些开销大的对象，延迟到需要使用的时候去创建四、迭代器模式：指提供一种方式顺序的访问聚合对象的每个元素，而又不需要暴露该对象的内部表示迭代器可以把迭代过程和业务逻辑分离开来五、发布-订阅模式：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖他的对象都会得到通知应用：1.异步编程的一种解决方案，替换回调函数2.取代硬编码的通知机制，一个对象不用显示的调用定一个对象的接口六、命令模式应用：不知道请求的接收者是谁，也不知道请求的操作是什么感觉有点用是是宏命令，执行一组操作七、组合模式组合模式是用小的对象构建一个大的对象，小的对象可能由更小的对象构建。组合对象是一个树形结构，表示整体-部分的层次结构。
组合模式最大的优点是可以一致地对待组合对象和基本对象，使用者不需要知道是组合对象还是普通对象（接口一致性）

JavaScript设计模式系列—模式篇总结（上）

博客地址：https://mp.csdn.net/postedit/102517956