javascript模板方法模式和职责链模式实例分析

2023-12-01 0 545

一、模板方法模式

1、模板方法模式,基于继承的设计模式,由两部分组成,抽象父类和具体实现子类。

2、例子Coffe 和 Tea

//创建抽象类 — 饮料
function Beverage(){}
Beverage.prototype.boilWater = function(){
console.log(\”把水煮沸\”)
}
//抽象的父类方法,具体实现由子类来写
Beverage.prototype.brew = function(){} //泡
Beverage.prototype.pourIncup = function(){} //饮料倒进杯子
Beverage.prototype.addCond = function(){} //加调料
Beverage.prototype.init = function(){
this.boilWater();
this.brew();
this.pourIncup();
this.addCond();
}
//创建具体子类 coffee and tea
var Coffee = function (){};
Coffee.prototype = new Beverage();
Coffee.prototype.brew = function (){
console.log(\”用沸水冲泡咖啡\”)
}
Coffee.prototype.brew = function (){
console.log(\”把咖啡倒进杯子\”)
}
Coffee.prototype.brew = function (){
console.log(\”加糖和牛奶\”)
}
var coffee = new Coffee();
coffee.init();
var Tea = function(){};
Tea.prototype = new Beverage();
Tea.prototype.brew = function (){
console.log(\”用沸水冲泡茶\”)
}
Tea.prototype.brew = function (){
console.log(\”茶倒进杯子\”)
}
Tea.prototype.brew = function (){
console.log(\”加柠檬\”)
}
var tea= new Tea();
tea.init();

Beverage.prototype.init 被称为模板方法的原因是:该方法封装了子类的算法框架,作为算法模板,指导子类以何种顺序去执行方法。

​​抽象方法没有具体的实现过程,是一些哑方法,当子类继承这个抽象类,必须重写父类的抽象方法。

如果子类忘记实现父类中的抽象方法?

Beverage.prototype.brew = function (){
throw new Error(\”子类必须重写父类的brew方法\”)
}

二、职责链模式

1、职责链模式:弱化了发送(请求)-接收者之间的强联系。

javascript模板方法模式和职责链模式实例分析

2、购物付定金例子

//旧版 order
//orderType 预付定金类型,code为1 500元定金 code为2 200元定金 code为3 普通用户
//pay 是否已经支付过定金
//stock 当前用于普通购买客户的手机内存数量
var order = function (orderType, pay, stock) {
if (orderType === 1) {
if (pay) {
console.log(\”预付500定金并且已支付,得到100元优惠券\”)
} else { //定金未支付,降到普通购买
if (stock > 0) {
console.log(\”普通购买,无优惠券\”)
} else {
console.log(\”库存不足\”);
}
}
}
if (orderType === 2) {
if (pay) {
console.log(\”预付200定金并且已支付,得到50元优惠券\”)
} else { //定金未支付,降到普通购买
if (stock > 0) {
console.log(\”普通购买,无优惠券\”)
} else {
console.log(\”库存不足\”);
}
}
}
if (orderType === 3) {
if (stock > 0) {
console.log(\”普通购买,无优惠券\”)
} else {
console.log(\”库存不足\”);
}
}
}
//重构
var order500 = function(orderType, pay, stock){
if(orderType ===1 && pay){
console.log(\”预付500定金并且已支付,得到100元优惠券\”)
}else{
order200(orderType, pay, stock)
}
}
var order500 = function(orderType, pay, stock){
if(orderType ===1 && pay){
console.log(\”预付500定金并且已支付,得到100元优惠券\”)
}else{
order200(orderType, pay, stock)
}
}
var order200 = function(orderType, pay, stock){
if(orderType ===2 && pay){
console.log(\”预付200定金并且已支付,得到50元优惠券\”)
}else{
orderNormal(orderType, pay, stock)
}
}
var orderNormal = function(orderType, pay, stock){
if (stock > 0) {
console.log(\”普通购买,无优惠券\”)
} else {
console.log(\”库存不足\”);
}
}

大函数拆分成3个小函数,去掉了许多嵌套的条件分支语句。

但是耦合严重,order500和order200耦合在一起,违反开放-封闭原则;

更多设计模式相关知识点,还可以参考本站文章:

https://www.jb51.net/article/252965.htm

https://www.jb51.net/article/27973.htm

您可能感兴趣的文章:

  • JavaScript设计模式之责任链模式实例分析
  • JS设计模式之责任链模式实例详解
  • 学习JavaScript设计模式之责任链模式
  • javascript设计模式 – 模板方法模式原理与用法实例分析
  • JavaScript设计模式之模板方法模式原理与用法示例
  • 学习JavaScript设计模式之模板方法模式
  • JavaScript 设计模式 安全沙箱模式
  • JavaScript设计模式之观察者模式(发布者-订阅者模式)
  • javascript设计模式之解释器模式详解
  • 学习JavaScript设计模式(链式调用)
  • JavaScript 设计模式之组合模式解析

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript javascript模板方法模式和职责链模式实例分析 https://www.u-9.cn/biancheng/javascript/5003.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务