JavaScript常用设计模式

    1.构造器模式

    我们都知道JavaScript的对象和function有着千丝万缕的关系，每个对象都可以看成是通过new一个function来创建的。而这个过程就可以看成是构造器模式。

var MyObj=function(){
    this.name="Scott";
}

var obj=new MyObj();
console.log(obj.name)

    2.原型模式

    在上面中，如果想要obj具备一个sayHello的行为的话，我们可以这样做。

var MyObj=function(){
    this.name="Scott";
    this.sayHello=function(){
        console.log("say hello");
    }
}

var obj=new MyObj();
console.log(obj.name)
obj.sayHello();

    但这样做的缺点就是，如果其他地方也需要使用这个sayHello的话，我们需要在写一个相同的sayHello,所以函数一般不放到function中。这个时候我们可以运用原型模式来做。

var MyObj=function(){
    this.name="Scott";
}
MyObj.prototype.sayHello=function(){
    console.log("say Hello");
}
var obj=new MyObj();
console.log(obj.name);
obj.sayHello();

    这样如果另一个对象也需要调用sayHello函数，可以这样做。

//如果此时另一个对象也需要调用sayHello函数改怎么做？
var OtherObj=function(){

}
OtherObj.prototype.sayHello=MyObj.prototype.sayHello;
var otherObj=new OtherObj();
otherObj.sayHello();

    
    3.观察者模式

    在Jquery中事件绑定on()和事件触发trigger()的实现就基于观察者模式。现在我们实现一下这两个事件。

    i).首先新建一个函数

var MyObject=function(){
	this.listner=[]; //保存将要绑定的事件
}

    ii).新增事件绑定方法

//因为模拟jquery的事件绑定，所以方法名为on，
MyObject.prototype.on=function(eventName,callback){
    this.listner.push({'eventName':eventName,'callback':callback});
}

    iii)新增取消事件绑定方法

MyObject.prototype.remove=function(eventName){
	var newListner=[];
	this.listner.forEach(function(value,index,arr){
	    if(value.eventName!=eventName){
		newListner.push(value)
	    }
});
	this.listner=newListner;
}

    iv)新增触发事件方法

MyObject.prototype.trigger=function(eventName){
	this.listner.forEach(function(value,index,arr){
		if(value.eventName==eventName){
			value.callback();
		}
	});
}

    有了以上代码，就可以直接模拟jquery的事件绑定和触发了

var obj=new MyObject();
obj.on('click',function(){
    console.log("my click11111");
});
obj.remove('click');
obj.on('click',function(){
    console.log("my click2222");
});
obj.trigger('click');

    4.模板方法模式

    我们有一些操作可能行为都是一样的，比如喝茶和喝咖啡，基本都需要三步，第一烧水，第二放入茶叶或咖啡等材料，第三倒水。模板方法就是定义一组算法，将不变的部分在父类中定义，可变的部分有子类自己定义。就拿喝茶和喝咖啡举例。

    i).定义一个function

var ParentObj=function(){
}

    ii).定义一组算法

ParentObj.prototype.drink=function(){
	this.heatWater(); //烧水
	this.putMaterial();//放入材料
	this.pourWater();//倒水
}
			
ParentObj.prototype.heatWater=function(){
	console.log("烧水");
}
//放入材料根据自己的需要来			
ParentObj.prototype.putMaterial=function(){
	throw "需要子类自己定义"
}
			
 ParentObj.prototype.pourWater=function(){
	console.log("倒水");
}

    其中对应喝茶和喝咖啡来说，烧水喝倒水都是不变的部分，变的只有放入茶叶还是咖啡，所以putMaterial有子类来实现。

    iii)喝茶和喝咖啡

var tea=new ParentObj();
tea.putMaterial=function(){
    console.log("放入茶叶");
}
tea.drink();
			
var coffee=new ParentObj();
coffee.putMaterial=function(){
    console.log("放入咖啡");
}
coffee.drink();

    5.策略模式

    策略模式就是定义很多算法，每个算法直接可以相互替换。实现过程一般需要一个策略类去定义各个算法，然后还需要一个接受客户请求的类来根据客户请求类型去调用策略类的相关算法。

    比如表单验证中，我们可能需要验证一个type为text的input是否为空，长度是否超过给定值等。现在就有策略模式来写一个简单的验证js.

    i).定义一个策略类来定义各个算法：

var Validation={
	required:function(elementObj,showContext,showErrorElementObj){
		if(elementObj.value.trim()==""){
			showErrorElementObj.innerHTML=showContext;
		}
	},
	maxLength:function(elementObj,showContext,showErrorElementObj,maxLength){
		if(elementObj.value.trim().length>maxLength){
			showErrorElementObj.innerHTML=showContext;
		}
	}
}

    其中required验证是否为空，maxLeng验证长度是否超出，elementObj是需要验证的DOM对象，showContent是验证错误后的提示语，showErrorElementObj是错误提示语显示的DOM对象，maxLength是最大长度。

    ii).接受客户请求的类：

var validationContext=function(validateType,elementObj,showContext,showErrorElementObj,12){
				
	Validation[validateType](elementObj,showContext,showErrorElementObj,12);
}

    其中validateType是要验证的类型，根据这个类型去策略类中选择相关算法。

    iii).开始使用上面的策略模式：

    

//html


			
验证

//js
document.getElementById('validation').addEventListener('click',function(){
	var input=document.getElementById('test');
	var div=document.getElementById('showRequiredError');
				
	validationContext('required',input,'必填',div);
	validationContext('maxLength',input,'超过长度',div,3);
});

    6.装饰模式

    装饰模式就是在不改变原有对象自身的基础上，为该对象增加新的功能。因为JavaScript的语言特性，可以很方便的实现装饰模式。

    比如如果我们想统计项目中现有函数的运行时间，该怎么做？难道在每个函数开始运行的地方得到时间，然后在运行结束的时候也得到一个时间，两者相减吗？要是突然我不想要这个计算时间的代码，难道再去一个函数一个函数的删除代码吗？

    这个问题我们可以利用JavaScript的原型对象来实现。

    函数都继承一个原型对象Function.prototype对象，现在我们扩展这个对象。

Function.prototype.before=function(){
	this.startTime=new Date();
	return this;  //return this，这样可以链式操作
}
			
Function.prototype.after=function(){
	this();
	this.endTime=new Date();
	return this.endTime-this.startTime;  //return运行时间
}
			
var test=function(){
				
	console.log("aaa");
}
			
console.log(test.before().after());

    7. 职责链模式

    职责链模式就是请求沿着一个链从头到尾的执行，直到遇到可以处理该请求的应用。变量在原型链中的查找过程很想这个职责链模式。

Object.prototype.sex="female";
			
var MyFun=function(){
	this.name="Scott"
}
MyFun.prototype.age=11;
var fun=new MyFun();
			
console.log(fun.name);//"Scott"
console.log(fun.age);//11  该值是fun沿着原型链在MyFun.prototype中找到的
console.log(fun.sex);//"female"  该值是fun沿着原型链在MyFun.prototype中没有找到的，在Object.prototype找到的

    现在我们就通过职责链模式来模拟一下这个沿着原型链找变量的过程。

    加入这个职责链有三层（firstLevel，secondLevel，thirdLevel），我们来找变量var findVariance=3;在哪个层。

var firstLevel=function(variance){
	this.myVariance=1;
	if(this.myVariance==variance){
		console.log("在first level找到变量");
	}else{
		secondLevel(variance);
	}
}
			
var secondLevel=function(variance){
	this.myVariance=2;
	if(this.myVariance==variance){
		console.log("在second level找到变量");
	}else{
		thirdLevel(variance);
	}
}
			
var thirdLevel=function(variance){
	this.myVariance=3;
	if(this.myVariance==variance){
		console.log("在third level找到变量");
	}else{
		console.log("在职责链中没有找到变量");
	}
				
}
			
var findVariance=3;
firstLevel(findVariance);