前端必须掌握的设计模式——模板模式

简介: 模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。

定义

       模板模式(Template Pattern)属于行为型设计模式,会在父类定义一套固定的流程,这个流程包含各个行为执行的步骤顺序;子类通过去继承父类,将父类某些方法重写,从而实现具体的步骤方法。

适用场景

       模板模式适合那种具有固定结构或者固定流程和标准的场景,那些与固定流程大同小异的行为可以进行重写,甚至不需要的流程可以不执行。如组装汽车、拼积木、包装礼物、房屋装修等。

Pasted Graphic 21.png

举例说明

       年底了,公司年会征集音乐类节目,蜘蛛侠被任命为总负责人。他将歌曲的组成分为了四个步骤,分别是前奏、主歌、副歌、结尾,所有来彩排的表演者都需要根据这个模板的标准设计节目内容。

歌曲组成.png

       热爱音乐的金刚狼和绿巨人踊跃报名, 他们都需要根据这个标准流程设计自己的歌曲内容。于是金刚狼和绿巨人分别根据模板,设计出了自己节目特定的前奏、主歌、副歌及结尾。

(intro).png

代码实现

       这种固定行为和步骤的方式非常适合模板模式。整体思路很简单,设计一个抽象类,定义行为和执行顺序;再设计每一个具体类,继承抽象类再重写抽象类中的所有行为。

image.gif image.png

       定义一个抽象类Temp,把前奏、主歌、副歌、结尾的抽象方法定义,这些方法需要在子类去实现;另外需要定义一个步骤执行方法start,用来规定这些方法的执行顺序。

       再分别定义金刚狼和绿巨人的表演类,这些类都继承于Temp,需要将前奏、主歌、副歌、结尾这些抽象方法具像化,同时每个类都继承了start。

// 定义一个抽象类模板
abstract class Temp{
  // 前奏
  abstract intro():void;
  // 主歌
  abstract verse():void;
  // 副歌
  abstract chorus():void;
  // 结尾
  abstract outro():void;
  // 初始化步骤
  start():void{
    this.intro();
    this.verse();
    this.chorus();
    this.outro();
  }
} 
// 金刚狼表演类
class Wolf extends Temp{
  constructor() {
    super();
  }
  intro():void{
    console.log('金刚狼-前奏用军鼓渐强递进');
  }
  verse():void{
    console.log('金刚狼-主歌用四二拍常规节奏型');
  }
  chorus():void{
    console.log('金刚狼-副歌用四二拍轻快节奏型');
  }
    outro():void{
    console.log('金刚狼-吊镲加过骨渐慢收尾');
  }
}
// 绿巨人表演类
class Hulk extends Temp{
  constructor() {
    super();
  }
  intro():void{
    console.log('绿巨人-前奏吉他分解solo');
  }
  verse():void{
    console.log('绿巨人-主歌吉他分解和弦弹唱');
  }
  chorus():void{
    console.log('绿巨人-副歌吉他扫弦弹唱');
  }
    outro():void{
    console.log('绿巨人-结尾吉他分解solo加泛音');
  }
}
const wolf = new Wolf();
const hulk = new Hulk();
wolf.start();
hulk.start();

image.gif    当客户端生成两个表演类实例后,用实例去调用各自的start方法,就会把实例中的intro、verse、chorus、outro方法按顺序调用。

金刚狼-前奏用军鼓渐强递进.png

钩子方法

       一些情况可能不需要中间的某一步或几步。绿巨人突然发现,自己要演奏的歌曲如果直接开始主歌效果更好,所以就尝试一下,如何不执行前奏才能直接进入主歌部分。

Pasted Graphic 27.png

       这种特殊场景,需要自定义是否执行某些方法,重写出来的函数称为“钩子方法”。根据例子,Temp类中可以定义一个doIntro方法,默认return true,start方法中添加一个if判断分支;子类中重写这个doIntro方法 return false,客户端再调用就不会执行了。

// 定义一个抽象类模板
abstract class Temp{
  // 前奏
  abstract intro():void;
  // 主歌
  abstract verse():void;
  // 副歌
  abstract chorus():void;
  // 结尾
  abstract outro():void;
  // 初始化步骤
  start():void{
    this.intro();
    this.verse();
    this.chorus();
    this.outro();
  }
    // 是否执行前奏
    doIntro():boolean {
        return true;
    }
} 
// 绿巨人表演类
class Hulk extends Temp{
  constructor() {
    super();
  }
  intro():void{
    console.log('绿巨人-前奏吉他分解solo');
  }
  verse():void{
    console.log('绿巨人-主歌吉他分解和弦弹唱');
  }
  chorus():void{
    console.log('绿巨人-副歌吉他扫弦弹唱');
  }
    outro():void{
    console.log('绿巨人-结尾吉他分解solo加泛音');
  }
    doIntro():boolean {
        return false;
    }
}
const hulk = new Hulk();
hulk.start();

总结

       模板模式是一种经典的抽象思想,旨在将一系列类似行为的共性行为抽出,作为抽象逻辑,个性行为会作为重写的个性呈现,这样有利于提取公共代码,减少重复逻辑。前端必须掌握的设计模式系列持续更新,如果对您有帮助希望多多点赞哦!

temp1.png

相关文章
|
2月前
|
设计模式 存储 供应链
前端必须掌握的设计模式——观察者模式
观察者模式(Observer Pattern)是一种行为型设计模式,实现了一种订阅机制。它包含两个角色:**观察者**(订阅消息、接收通知并执行操作)和**被观察者**(维护观察者列表、发送通知)。两者通过一对多的关系实现解耦,当被观察者状态改变时,会通知所有订阅的观察者。例如,商店老板作为被观察者,记录客户的需求并在商品到货时通知他们。前端应用中,如DOM事件注册、MutationObserver等也体现了这一模式。
|
27天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
88 40
|
28天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
54 19
|
26天前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
53 12
|
28天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
45 15
|
2月前
|
设计模式 前端开发 调度
前端必须掌握的设计模式——工厂模式
工厂模式是一种创建型设计模式,通过工厂媒介提供统一接口来创建对象,客户端只需告知创建需求,具体逻辑由工厂处理。工厂模式分为简单工厂、标准工厂和抽象工厂,分别适用于不同场景下的对象创建需求。简单工厂利用静态方法创建对象,标准工厂通过具体工厂类减少耦合,抽象工厂则用于创建一系列相关或依赖对象的家族。
|
2月前
|
设计模式 存储 缓存
前端必须掌握的设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,旨在将多分支复杂逻辑解耦。每个分支类只关心自身实现,无需处理策略切换。它避免了大量if-else或switch-case代码,符合开闭原则。常见应用场景包括表单验证、风格切换和缓存调度等。通过定义接口和上下文类,策略模式实现了灵活的逻辑分离与扩展。例如,在国际化需求中,可根据语言切换不同的词条包,使代码更加简洁优雅。总结来说,策略模式简化了多条件判断,提升了代码的可维护性和扩展性。
|
2月前
|
设计模式 消息中间件 供应链
前端必须掌握的设计模式——发布订阅模式
发布订阅模式(Publish-Subscribe Pattern)是一种设计模式,类似于观察者模式,但通过引入第三方中介实现发布者和订阅者的解耦。发布者不再直接通知订阅者,而是将消息发送给中介,由中介负责分发给订阅者。这种方式提高了异步支持和安全性,适合复杂、高并发场景,如消息队列和流处理系统。代码实现中,通过定义发布者、订阅者和中介接口,确保消息的正确传递。此模式在前端开发中广泛应用,例如Vue的数据双向绑定。
|
2月前
|
设计模式 前端开发 JavaScript
前端必须掌握的设计模式——装饰器模式
装饰器模式是一种结构型设计模式,通过创建新类来包装原始对象,实现在不修改原有结构的前提下扩展新行为。其核心在于“组合”思想,使新功能可“即插即拔”。该模式具有解耦性、灵活性和动态性等特点,广泛应用于类的面向对象编程语言中,如JavaScript的注解和TypeScript的写法。示例中,通过装饰器模式为游戏角色动态添加装备,展示了其强大的扩展性和灵活性。
|
2月前
|
设计模式 存储 前端开发
前端必须掌握的设计模式——单例模式
单例模式是一种简单的创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点。适用于窗口对象、登录弹窗等场景,优点包括易于维护、访问和低消耗,但也有安全隐患、可能形成巨石对象及扩展性差等缺点。文中展示了JavaScript和TypeScript的实现方法。

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    31
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    61
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    143
  • 6
    详解智能编码在前端研发的创新应用
    99
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    123
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75