js modèles de conception : qu'est-ce que le modèle de méthode de modèle ? Introduction au modèle de méthode de modèle js

Cet article vous apporte du contenu sur les modèles de conception js : qu'est-ce que le modèle de méthode de modèle ? L'introduction du modèle de méthode de modèle js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

Quel est le modèle de méthode de modèle ?

Définition : Définir le squelette d'un algorithme dans une opération, en reportant certaines étapes aux sous-classes. Les méthodes modèles permettent aux sous-classes de redéfinir des étapes spécifiques d'un algorithme sans modifier la structure de l'algorithme.

Solution principale : Certaines méthodes sont courantes, mais cette méthode est réécrite dans chaque sous-classe.

Quand utiliser : Il existe quelques méthodes générales.

Comment résoudre : Résumer ces algorithmes généraux.

Exemple d'application de modèle de méthode de modèle JS : 1. Lors de la construction d'une maison, les fondations, le câblage et les conduites d'eau sont les mêmes. Ce n'est que dans les étapes ultérieures de la construction qu'il existe des différences telles que. ajout de placards et de clôtures. 2. Les 81 difficultés fixées par le Bodhisattva dans Journey to the West constituent un cadre logique de haut niveau.

Avantages du modèle de méthode de modèle js : 1. Encapsulez les parties constantes et développez les parties variables. 2. Extrayez le code public pour faciliter la maintenance. 3. Le comportement est contrôlé par la classe parent et implémenté par la sous-classe.

Inconvénients du modèle de méthode de modèle js : Chaque implémentation différente nécessite une sous-classe à implémenter, ce qui entraîne une augmentation du nombre de classes et un système plus grand.

Scénarios d'utilisation du modèle de méthode de modèle js : 1. Il existe des méthodes communes à plusieurs sous-classes, et la logique est la même. 2. Les méthodes importantes et complexes peuvent être considérées comme des méthodes modèles.

Faire du thé et préparer du café

Comparez les similitudes et les différences dans le processus de préparation du thé et du café

Vous pouvez clairement voir qu'il n'y a que des différences subtiles dans les étapes 2 et 4. Commençons par la mise en œuvre :

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()
// 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖

Crochet

Et si le client ne souhaite pas ajouter de condiments (sucre, citron) ? A ce moment, vous pouvez introduire un crochet pour y parvenir. La logique de mise en œuvre est la suivante :

// ...

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('是否需要佐料吗？') // 弹框选择是否佐料
}

Recommandations associées :

modèle de conception js : quel est le modèle de combinaison ? Introduction au modèle de combinaison js

modèle de conception js : qu'est-ce que le modèle d'observateur (modèle de publication-abonnement) ? Introduction au modèle d'observateur js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!