js设计模式之模板方法模式

一、简单介绍

模板方法模式是基于继承的一种设计模式。分为两部分，一部分是抽象父类，另一部分是具体的实现子类。通常在父类封装了子类的一些公共方法以及它们的执行顺序，子类通过继承父类，继承了公共方法，同时可以根据需要重写父类的方法或者定义自己的方法。

二、使用场景

模板方法模式适用于执行顺序固定，具体实现不同的一些功能的封装，如有几个页面，进入页面之后都需要初始化数据，然后做一些初始化操作，各个页面有些接口相同，有些接口不同，这时就可以用模板方法模式去写。

三、示例

class PageControl {
  constructor() {
    this.userInfo = {};
    this.init();
  }
  init() {
    this.initUserInfo();
  }
  initUserInfo() {
    // 公共接口 get userInfo
    //example: this.userInfo=await geiUserInfo()..
  }
  initTableData() {
    //可以为空
  }
  initCardData() {
    //可以为空
  }
}
class Page1 extends PageControl {
  constructor() {
    super();
    //...
  }
  initTableData() {
    // page1的获取表格数据的接口
  }
  initCardData() {
    //page1的获取卡片数据的接口
  }
}
class Page2 extends PageControl {
  constructor() {
    super();
    //...
  }
  initTableData() {
    // page2的获取表格数据的接口
  }
  initCardData() {
    //page2的获取卡片数据的接口
  }
}

上面这个是简单的demo，模板方法模式的核心是，大致的流程封装在父类，具体的执行交给子类。这样不同的子类有相同的执行流程，但是执行的可以是不同的逻辑。