Learn JavaScript design patterns template method pattern_javascript skills

1. Definition

The template method is based on the inheritance design pattern, which can greatly improve the scalability of the system. Abstract parent class and subclass in java
The template method consists of two parts of the structure, the first part is the abstract parent class, and the second part is the concrete implementation subclass.

2. Example

Coffee or Tea
(1) Boil water
(2) Soak tea leaves in boiling water
(3) Pour the tea into the cup
(4) Add lemon

/* 抽象父类：饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

Using the template method pattern, the algorithm framework of the subclass is encapsulated in the parent class. These algorithm frameworks are suitable for most subcategories under normal circumstances, but "personality" subcategories will also appear.
As in the above process, adding seasonings is optional.
The hook method can solve this problem. Placing hooks is a common means of isolating changes.

/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗？");
};
var tea = new Tea();
tea.init();

JavaScript does not provide true class inheritance. Inheritance is achieved through delegation between objects.

3. "Hollywood Principle": Don't call us, we will call you

Typical usage scenarios:

(1) Template method pattern: Using this design pattern means that the subclass gives up control of itself and instead informs the subclass to the parent class. As a subclass, it is only responsible for providing some design details.
(2) Observer mode: The publisher pushes the message to the subscribers.
(3) Callback function: ajax asynchronous request encapsulates the operations that need to be performed in the callback function. This callback function is only executed when the data is returned.

I hope this article will be helpful to everyone learning JavaScript programming.