好程式設計師web前端教程分享js模板模式

什麼是模板模式？

 

模板模式是抽象父類定義了子類需要重寫的相關方法。 而這些方法，仍然是透過父類方法呼叫的。   根據描述， “模板”的思想體現在：父類定義的介面方法。 除此之外，子類方法的呼叫，也是被父類控制的。

 

 

應用場景

 

   一些系統的架構或者演算法骨架，由 “ BOSS ”編寫抽象方法，具體的實現，交給“小弟們”實現。 而絕對是不是用“小弟們”的方法，還是看“ BOSS ”的心情。 不是很恰當的比喻哈 ~

 

 

ES6 實現

 

Animal 是抽象類， Dog 和 Cat 分別具體實現了 eat() 和 sleep() 方法。 Dog 或 Cat 例項可以透過 live() 方法呼叫 eat() 和 sleep() 。

 

  注意： Cat 和 Dog 例項會被自動新增 live() 方法。不暴露 live() 是為了防止 live() 被子類重寫，保證父類的控制權。

 

class Animal {

  constructor() {

    // this 指向例項

    this.live = () => {

      this.eat();

      this.sleep();

    };

  }

 

  eat() {

    throw new Error(" 模板類方法必須被重寫 ");

  }

 

  sleep() {

    throw new Error(" 模板類方法必須被重寫 ");

  }

}

 

class Dog extends Animal {

  constructor(...args) {

    super(...args);

  }

  eat() {

    console.log(" 狗吃糧 ");

  }

  sleep() {

    console.log(" 狗睡覺 ");

  }

}

 

class Cat extends Animal {

  constructor(...args) {

    super(...args);

  }

  eat() {

    console.log(" 貓吃糧 ");

  }

  sleep() {

    console.log(" 貓睡覺 ");

  }

}

 

/********* 以下為測試程式碼 ********/

 

// 此時 , Animal 中的 this 指向 dog

let dog = new Dog();

dog.live();

 

// 此時 , Animal 中的 this 指向 cat

let cat = new Cat();

cat.live();