这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

在面向对象编程的过程中我们常提到重构，将一些重复的代码进行提取封装等，因为重复的代码在一定程度上会造成在编码中容易出错，在编码后难以维护。

同学们手抄试题：

我们通过使用原始的方法来抄两份试题交给老师

image.png

手抄试卷01

  1. class Paper01 {
  2.   constructor() {
  3.     console.log("==========试卷01==========");
  4.   }
  6.   question1(): void {
  7.     console.log("题目01: 窗前明月光,下一句?");
  8.     console.log("答案: ", "疑似地上霜");
  9.   }
  11.   question2(): void {
  12.     console.log("题目02: 鹅鹅鹅,下一句?");
  13.     console.log("答案: ", "曲项向天歌");
  14.   }
  16.   question3(): void {
  17.     console.log("题目02: 长风破浪会有时,下一句?");
  18.     console.log("答案: ", "直挂云帆济沧海");
  19.   }
  20. }

手抄试卷02

  1. class Paper02 {
  2.   constructor() {
  3.     console.log("==========试卷02==========");
  4.   }
  5.   question1(): void {
  6.     console.log("题目01: 窗前明月光,下一句?");
  7.     console.log("答案: ", "疑似地上霜");
  8.   }
  9.   question2(): void {
  10.     console.log("题目02: 鹅鹅鹅,下一句?");
  11.     console.log("答案: ", "曲项向天歌");
  12.   }
  13.   question3(): void {
  14.     console.log("题目03: 臣心一片磁针石,下一句?");
  15.     console.log("答案: ", "不指南方不肯休");
  16.   }
  17. }

上交答案

  1. const paper01 = new Paper01();
  2. paper01.question1();
  3. paper01.question2();
  4. paper01.question3();
  5. const paper02 = new Paper02();
  6. paper02.question1();
  7. paper02.question2();
  8. paper02.question3();

说明

上面的实践可以看出，试卷02中的第三题似乎抄错了，并且两份试卷除了答案会有差异外，题目应该是一致的才是，老师要是需要修改题目的话每个同学又需要一起重抄一遍。

老师准备了一份试卷

老师为我们准了的试卷有助于我们题目的统一

image.png

试卷模板

  1. class PaperBase {
  2.   question1(): void {
  3.     console.log("题目01: 窗前明月光,下一句?");
  4.   }
  6.   question2(): void {
  7.     console.log("题目02: 鹅鹅鹅,下一句?");
  8.   }
  10.   question3(): void {
  11.     console.log("题目02: 长风破浪会有时,下一句?");
  12.   }
  13. }

改造试卷01和02

  1. // 试卷02同试卷01
  2. class Paper01 extends PaperBase {
  3.   constructor() {
  4.     super();
  5.     console.log("==========试卷01==========");
  6.   }
  8.   question1(): void {
  9.     super.question1();
  10.     console.log("答案: ", "疑似地上霜");
  11.   }
  13.   question2(): void {
  14.     super.question2();
  15.     console.log("答案: ", "曲项向天歌");
  16.   }
  18.   question3(): void {
  19.     super.question3();
  20.     console.log("答案: ", "直挂云帆济沧海");
  21.   }
  22. }

说明

通过将试卷01和02共同继承自Base版本，解决了我们题目容易出错的现象，但是在我们的试卷01和02中还是有很多重复的内容同样可以提取到父类中，使得我们的子类中只保留不通的地方，充分的利用我们的父类。

引入模板方法模式

当我们要完成某一细节层次一致的一个过程或一系列步骤，但其个别步骤在更详细的层次上的实现可能不同时，我们通常考虑用模板方法模式来处理。—【大话设计模式】94页

image.png

基础试卷2.0

  1. abstract class PaperBase {
  2.   question1(): void {
  3.     console.log("题目01: 窗前明月光,下一句?");
  4.     console.log("答案: ", this.answer1());
  5.   }
  7.   question2(): void {
  8.     console.log("题目02: 鹅鹅鹅,下一句?");
  9.     console.log("答案: ", this.answer2());
  10.   }
  12.   question3(): void {
  13.     console.log("题目02: 长风破浪会有时,下一句?");
  14.     console.log("答案: ", this.answer3());
  15.   }
  17.   abstract answer1(): string;
  18.   abstract answer2(): string;
  19.   abstract answer3(): string;
  20. }

再次改造试卷01和02

  1. class Paper01 extends PaperBase {
  2.   answer1(): string {
  3.     return "疑似地上霜";
  4.   }
  5.   answer2(): string {
  6.     return "曲项向天歌";
  7.   }
  8.   answer3(): string {
  9.     return "直挂云帆济沧海";
  10.   }
  11. }

说明

通过模板方法模式使得我们的试卷01和02就只剩下了各自的答案，完成了又一次改造。

模板方法模式

定义一个操作中的算法骨架，将一些步骤延迟到子类。模板方法使得子类可以实现不改变算法结构即可重新定义该算法的特定步骤。

image.png