找回密码
当前位置：前端开发者 > JavaScript > 正文

前端JS设计模式与开发实践之模板模式

2018-07-08 分类：JavaScript 阅读(825) 评论(0)

洛阳前端设计开发|前端开发设计模式|前端开发软件闭包显示

模板模式是一种只需用继承就可以实现的非常简单的模式。
模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体子类。顾名思义，下面我们由具体例子看看。
Coffee or Tea
咖啡与茶是经典例子，经常用来讲解模板方法模式。
首先我们来泡一杯咖啡，步骤如下：
把水煮沸
用沸水冲泡咖啡
把咖啡倒进杯子
加糖和牛奶
参见代码：

javascript 代码

var Coffee = function() {}
Coffee.prototype.boilWater = function() {
console.log(‘brew water’)
}
Coffee.prototype.brewCoffeeGriends = function() {
console.log(‘bring coffee by boilWater’)
}
Coffee.prototype.pourInCup = function() {
console.log(‘bring coffee into cup’)
}
Coffee.prototype.addSugarAndMilk = function() {
console.log(‘add milk and candy’)
}
Coffee.prototype.init = function() {
this.boilWater()
this.brewCoffeeGriends()
this.pourInCup()
this.addSugarAndMilk()
}
var coffee = new Coffee()
coffee.init()

其次是 泡一杯茶
把水煮沸
用沸水浸泡茶叶
把茶水倒进杯子
加柠檬
代码如下：

javascript 代码

var Tea = function() {}
Tea.prototype.boilWater = function() {
console.log(‘brew water’)
}
Tea.prototype.steepTeaBag = function() {
console.log(‘steepTeaBag by boilWater’)
}
Tea.prototype.pourInCup = function() {
console.log(‘bring Tea into cup’)
}
Coffee.prototype.addLemon = function() {
console.log(‘add lemon’)
}
Coffee.prototype.init = function() {
this.boilWater()
this.steepTeaBag()
this.pourInCup()
this.addLemon()
}
var tea = new Tea()
tea.init()

经过抽象之后，不管是泡咖啡还是泡茶，我们都能整理为以下四步：


1、把水煮沸
2、用沸水冲泡饮料 // 命名其为 brew()
3、把饮料倒进杯子
4、加饮料 // 命名其为 addCondiments()

现在开始抽象出父类出来，如果你能明白我接下来要干什么就最好不过了。
我的意思是找出两者的抽象相同处，然后继承复用。

参见代码：

javascript 代码

var Beverage = function () {};
Beverage.prototype.boilWater = function () {
console.log(‘brew water’)
}
Beverage.prototype.brew = function () {
}
Beverage.prototype.pourInCup = function () {
Beverage.prototype.addCondiments=function(){
}
Beverage.prototype.init = function () {
this.boilWater();
this.brew();
this.pourInCup();
this.addCondiments();
}}

创建Coffee 子类 与 Tea 子类
javascript 代码

var Coffee = function() {}
Coffee.prototype = new Beverage()
Coffee.prototype.brew = function() {
console.log(‘bring coffee by boilWater’)
}
Coffee.prototype.pourInCup = function() {
console.log(‘bring coffee into cup’)
}
Coffee.prototype.addCondiments = function() {
console.log(‘add milk and candy’)
}
var Coffee = new Coffee()
Coffee.init()

这里Tea 子类 我就不实现了 ， 留给聪明的读者吧！
本文一直讨论的是模板方法模式，那么以上谁才是所谓的模板方法呢？
答案是Beverage.prototype.init
原因是他作为一个算法的模板指导子类以何种顺序去执行哪些方法，在其内部，算法内的每一个步骤都清楚的展示在我们眼前。
钩子方法
如果有一些子类非常有个性呢？ 比如以上的饮料类四个步骤， 有些客人喝咖啡不加调料，那么一个问题是Beverage作为父类，已经规定了冲泡饮料的4个步骤，那么有什么方法可以让子类不受这个约束呢？
钩子方法就是用来解决个性化这个问题的呢。
重构父类 ：
javascript 代码

var Beverage = function() {}
Beverage.prototype.boilWater = function() {
console.log(‘brew water’)
}
Beverage.prototype.brew = function() {
thrownewError(‘child class must rewrite brew fun.’)
}
Beverage.prototype.pourInCup = function() {
thrownewError(‘child class must rewrite pourInCup fun.’)
}
Beverage.prototype.addCondiments = function() {
thrownewError(‘child class must rewrite addCondiments fun.’)
}
Beverage.prototype.customerWantsCondiments = function() {
returntrue
}
Beverage.prototype.init = function() {
this.boilWater()
this.brew()
this.pourInCup()
if (this.customerWantsCondiments()) {
this.addCondiments()
}
}

重构子类：

**javascript 代码**
var CoffeeWithHook = function() {}
CoffeeWithHook.prototype = new Beverage()
CoffeeWithHook.prototype.brew = function() {
console.log(‘bring coffee by boilWater’)
}
CoffeeWithHook.prototype.pourInCup = function() {
console.log(‘bring coffee into cup’)
}
CoffeeWithHook.prototype.addCondiments = function() {
console.log(‘add milk and candy’)
}
CoffeeWithHook.prototype.customerWantsCondiments = function() {
returnwindow.confirm(‘need addCondiments please ?’)
}
var CoffeeWithHook = new CoffeeWithHook()
CoffeeWithHook.init()

小结
模板方法模式是一种典型的通过封装变化提供系统扩展性的设计模式，通过增加新的子类，我们便能给系统增加新的功能

前端设计开发流程之分成开发|前端开发设计思路|开发前端设计师

赞(0)
前端开发者 » 前端JS设计模式与开发实践之模板模式
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论