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

转载请注明预见才能遇见的博客：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(){//把校验的步骤用空函数包装起来，并且放入cache
				var rule = ruleObj.strategy;
				var errorMsg = ruleObj.errorMsg;
				var array = rule.split(":");
				var strategy = array.shift();//去掉类别
				array.unshift(dom.value);//第一个参数是dom的value
				array.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 = '';
        return document.body.innerHTML = str;
    }
    return false;
};
 
var getFormUpladObj = function(){//表单的上传控件
    var str = ''; // 
    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);//

//后来我们又给上传项目增加了 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