欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

设计模式之模板方法模式

程序员文章站 2022-07-09 21:58:55
读书那会,我们经常要抄题目,从黑板上抄,从同学笔记那里抄,说实话,我就不喜欢这种学习方式,容易抄错题目。 我们来代码实现一下: 两份题目非常类似,除了答案不同。但如果一人抄错题目,那后面的人都会出错,这真实糟糕至极。那有没有更好点的实现方式呢? 第二版: 这里我们把题目都放到了TestPaper父类 ......

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

桥接模式

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

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

相关标签: javascript