JavaScript设计模式—模板方法模式

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?
模板方法模式

模板方法模式在一个方法中定义一个算法的骨架，而将一些步骤的实现延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下，重新定义算法中某些步骤的具体实现

一般由两部分组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

模板方法模式的使用场景

• 模板方法模式常被架构师用于搭建项目的框架，架构师定好了框架的骨架，程序员继承框架的结构之后，负责往里面填空
• 钩子方法：各种框架中的钩子函数往往在初始化时就规定各个钩子函数的名称以及执行时机，对于使用者只需要在钩子函数中注入自定义逻辑代码即可
• 回调函数：回调函数在特定的时机执行，但是具体的操作交给具体的函数实现。把变化的部分封装成一个函数剩下的就成了模板

示例：弹出框

弹出框的基本骨架一样，不同的弹出框区别在于有一个按钮还是两个按钮、以及是否有关闭图标、颜色不同、是否有标题。因此只需要一个基本的骨架为模板，然后在指定的内容区块填充自定义的内容即可。

 class Modal{
    constructor(options){
      this.title = options.title || '标题';
      this.content= options.content || '内容';
      this.onConfirm = options.onConfirm;
      this.onCancel = options.onCancel;
      this.init();
    }

    init(){
      this.panel = document.createElement('div');
      this.panel.className = 'modal';
      document.body.appendChild(this.panel);

      let titleP = document.createElement('p');
      titleP.innerHTML = this.title;
      this.panel.appendChild(titleP);

      let contentP = document.createElement('p');
      contentP.innerHTML = this.content;
      this.panel.appendChild(contentP);

      let confirmButton = docuemnt.createElement('button');
      confirmButton.innerHTML = '确定';
      confirmButton.className = 'confirm_button';
      this.panel.appendChild(confirmButton);

      let cancelButton = document.createElement('button');
      cancelButton.innerHTML = '取消';
      cancelButton.className = 'cancel_button';
      this.panel.appendChild(cancelButton);
    }
    eventListener(){
      this.confirmButton.addEventListener('click', this.onConfirm);
      this.cancelButton.addEventListener('click', this.onCancel);
    }

    show(){
      this.panel.style.display = 'block';
    }
    hide(){
      this.panel.style.display = 'none';
    }
  }

只有内容的弹框没有标题只需要把标题移除即可。

 class ContentOnlyModal extends Modal{
  init(){
    super.init();
    this.titleP.parentNode.removeChild(this.titleP);
  }
 }
 let contentOnlyModal = new ContentOnlyModal();
 contentOnlyModal.init();

xModal有一个关闭的图标，只需要在原有的基础上添加一个元素即可。

 class XModal extends Modal{

  init(){
    super.init();
    let x = this.x = document.createElement('span');
    x.innerHTML = 'x';
    x.className = 'close-me';
    this.panel.appendChild(x);
  }
  eventListener(){
    super.eventListener();
    this.x.addEventListener('click', () => {
      this.hide();
    });
  }
 }
let xModal = new XModal();
xModal.init();

总结

模板方法模式是一种典型的通过封装变化提高系统扩展性的设计模式。它把流程进行抽象，把相同的部分再进行封装。子类继承父类，共享父类的方法，在不同的地方进行重写。通过增加新的子类，我们便能给系统增加新的功能，并不需要改动抽象父类以及其他子类。

模板方法模式的优点

1. 模板方法模式在父类中形式化地定义一个算法，而由它的子类来实现细节的处理。在子类实现详细的处理算法时并不会改变算法中步骤的执行次序。
2. 模板方法模式是一种代码复用技术，它在类库设计中尤为重要。它提取了类库中的公共行为，将公共行为放在父类中，而通过其子类来实现不同的行为。它鼓励恰当使用继承来实现代码复用。
3. 模板方法模式可实现一种反向控制结构。通过子类覆盖父类的钩子方法来决定某一特定步骤是否需要执行。
4. 在模板方法模式中可以通过子类来覆盖父类的基本方法，不同的子类可以提供基本方法的不同实现，更换和增加新的子类很方便，符合单一职责原则和开闭原则。

模板方法模式的缺点

模板方法模式的主要缺点是：需要为每一个基本方法的不同实现提供一个子类。如果父类中可变的基本方法太多，将会导致类的个数增加，系统更加庞大，设计也更加抽象。此时，可结合桥接模式来进行设计。