设计模式之模板方法模式

桥接模式同享元模式、桥接模式一样，主要使为了提高项目中的代码的复用性，从而提高代码质量。

桥接模式

目的：定义一系列操作的骨架，简化后面类似的操作。当一个功能朝着多样化发展，不妨定义一个基础的模块，把具体实现功能延申到后面。好比建房子，先给出一套基本的房子骨架，房主可以根据自己的需求实现自己想要的房子类型。
应用场景：当项目中出项很多个类似的操作。相同的操作一个类又满足不了要求，多个类又显得代码冗余，这时桥接模式就能排上用场。
如项目中的弹框操作，有相同的基本操作功能，如弹框的弹出隐藏。又有不一样的地方，每个弹框点击弹框确定按钮可能需要做的任务不一样。这里可以定义一个基本的弹框，具体的功能使用桥接模式，从而组成一个完整功能的弹框，如面示例代码。

function basePop(word,size){
//定义弹框的基本功能
  this.word=word;
  this.size=size;
  this.dom=null;
}
basePop.prototype.init=function(){
	var div=document.createElement('div');
	div.innerHTML=this.word;
	div.style.width=this.size.width+'px';
	div.style.height=this.size.height+'px';
	this.dom=div;
}
basePop.prototype.hidden=function(){
   //定义基础操作
   this.dom.style.display='none';
}
basePop.prototype.confirm=function(){
   //定义基础操作
   this.dom.style.display='none';
}

若点击弹框确认按钮，需要做ajax请求，那么就赋予这个弹框具体的任务了，可以基于基础弹框矿建上再次封装具体功能的弹框。

function ajaxPop(word,size){
  basePop.call(this,word,size);
}
ajaxPop.prototype=new basePop();
var hidden=ajaxPop.prototype.hidden;
ajaxPop.prototype.hidden=function(){
	hidden.call(this);
	//这里可以定义自己想要的操作
}
var confirm=ajaxPop.prototype.confirm;
ajaxPop.prototype.confirm=function(){
	confirm.call(this);
	//这里可以定义自己想要的操作
}
var pop=new ajaxPop('sendmes',{width:100,height:300});
pop.init();
pop.confirm();

代码基于基本的框架实现具体功能的操作，这种思想就是模板方法的设计思想。上述代码用到了js中继承的思想，让ajax弹框继承基本弹框，这里根据自己代码的习惯，也可以使用回调函数，思想都是一样的。

本文地址：https://blog.csdn.net/weaJung/article/details/107526120