js-Entwurfsmuster: Was ist das Vorlagenmethodenmuster? Einführung in das Muster der JS-Vorlagenmethode

Dieser Artikel enthält Inhalte zu js-Entwurfsmustern: Was ist das Vorlagenmethodenmuster? Die Einführung des js-Vorlagenmethodenmusters hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist das Vorlagenmethodenmuster?

Definition: Definieren Sie das Grundgerüst eines Algorithmus in einer Operation und verschieben Sie einige Schritte auf Unterklassen. Mithilfe von Vorlagenmethoden können Unterklassen bestimmte Schritte eines Algorithmus neu definieren, ohne die Struktur des Algorithmus zu ändern.

Hauptlösung: Einige Methoden sind üblich, aber diese Methode wird in jeder Unterklasse neu geschrieben.

Wann anzuwenden: Es gibt einige allgemeine Methoden.

So lösen Sie: Abstrahieren Sie diese allgemeinen Algorithmen.

Anwendungsbeispiel für JS-Vorlagenmethoden: 1. Beim Bau eines Hauses sind das Fundament, die Verkabelung und die Wasserleitungen gleich. Nur in den späteren Bauphasen gibt es Unterschiede wie z Hinzufügen von Schränken und Zäunen. 2. Die 81 Schwierigkeiten, die Bodhisattva in „Reise in den Westen“ darlegt, sind ein logischer Rahmen auf höchster Ebene.

Vorteile des js-Vorlagenmethodenmusters: 1. Kapseln Sie die konstanten Teile und erweitern Sie die variablen Teile. 2. Extrahieren Sie öffentlichen Code, um die Wartung zu erleichtern. 3. Das Verhalten wird von der übergeordneten Klasse gesteuert und von der Unterklasse implementiert.

Nachteile des js-Vorlagenmethodenmusters: Jede unterschiedliche Implementierung erfordert die Implementierung einer Unterklasse, was zu einer Erhöhung der Anzahl der Klassen und einem größeren System führt.

Verwendungsszenarien für js-Vorlagenmethodenmuster: 1. Es gibt Methoden, die mehreren Unterklassen gemeinsam sind, und die Logik ist dieselbe. 2. Wichtige und komplexe Methoden können als Template-Methoden betrachtet werden.

Tee zubereiten und Kaffee zubereiten

Vergleichen Sie die Gemeinsamkeiten und Unterschiede im Prozess der Tee- und Kaffeezubereitung

步骤	泡茶	泡咖啡
1	烧开水	烧开水
2	浸泡茶叶	冲泡咖啡
3	倒入杯子	倒入杯子
4	加柠檬	加糖

Es ist deutlich zu erkennen, dass es in den Schritten 2 und 4 nur subtile Unterschiede gibt. Beginnen wir mit der Umsetzung:

const Drinks = function() {}
Drinks.prototype.firstStep = function() {
  console.log('烧开水')
}
Drinks.prototype.secondStep = function() {}
Drinks.prototype.thirdStep = function() {
  console.log('倒入杯子')
}
Drinks.prototype.fourthStep = function() {}
Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
  this.firstStep()
  this.secondStep()
  this.thirdStep()
  this.fourthStep()
}
const Tea = function() {}
Tea.prototype = new Drinks
Tea.prototype.secondStep = function() {
  console.log('浸泡茶叶')
}
Tea.prototype.fourthStep = function() {
  console.log('加柠檬')
}
const Coffee = function() {}
Coffee.prototype = new Drinks
Coffee.prototype.secondStep = function() {
  console.log('冲泡咖啡')
}
Coffee.prototype.fourthStep = function() {
  console.log('加糖')
}
const tea = new Tea()
tea.init()
// 烧开水
// 浸泡茶叶
// 倒入杯子
// 加柠檬
const coffee = new Coffee()
coffee.init()
// 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖

Hook

Was ist, wenn der Gast keine Gewürze (Zucker, Zitrone) hinzufügen möchte? Zu diesem Zeitpunkt können Sie einen Haken einführen, um dies zu implementieren:

// ...

Drinks.prototype.ifNeedFlavour = function() { // 加上钩子
  return true
}

Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
  this.firstStep()
  this.secondStep()
  this.thirdStep()
  if (this.ifNeedFlavour()) { // 默认是 true，也就是要加调料
    this.fourthStep()
  }
}

// ...
const Coffee = function() {}

Coffee.prototype = new Drinks()
// ...

Coffee.prototype.ifNeedFlavour = function() {
  return window.confirm('是否需要佐料吗？') // 弹框选择是否佐料
}

Verwandte Empfehlungen:

js Design Patterns: Was ist das Kompositionsmuster? Einführung in das js-Kombinationsmuster

js-Entwurfsmuster: Was ist das Beobachtermuster (Publish-Subscribe-Muster)? Einführung in das JS-Beobachtermuster

Das obige ist der detaillierte Inhalt vonjs-Entwurfsmuster: Was ist das Vorlagenmethodenmuster? Einführung in das Muster der JS-Vorlagenmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!