Apprenez les compétences de la méthode de modèle de modèles de conception JavaScript pattern_javascript

1. Définition

La méthode du modèle est basée sur le modèle de conception d'héritage, ce qui peut grandement améliorer l'évolutivité du système. Classe parent abstraite et sous-classe en Java
La méthode modèle se compose de deux parties de la structure, la première partie est la classe parent abstraite et la deuxième partie est la sous-classe d'implémentation concrète.

2. Exemple

Café ou Thé
(1) Faire bouillir de l'eau
(2) Faire tremper les feuilles de thé dans de l'eau bouillante
(3) Versez le thé dans la tasse
(4) Ajouter du citron

/* 抽象父类：饮料 */
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();

À l'aide du modèle de méthode modèle, le cadre algorithmique de la sous-classe est encapsulé dans la classe parent. Ces cadres algorithmiques conviennent à la plupart des sous-catégories dans des conditions normales, mais des sous-catégories « personnalité » apparaîtront également.
Comme dans le processus ci-dessus, l’ajout d’assaisonnements est facultatif.
La méthode des crochets peut résoudre ce problème. Le placement de crochets est un moyen courant d’isoler les modifications.

/* 添加钩子方法 */
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 ne fournit pas de véritable héritage de classe. L'héritage est obtenu par délégation entre objets.

3. "Principe d'Hollywood" : Ne nous appelez pas, nous vous appellerons

Scénarios d'utilisation typiques :

(1) Modèle de méthode de modèle : L'utilisation de ce modèle de conception signifie que la sous-classe abandonne le contrôle d'elle-même et informe à la place la sous-classe par la classe parent. En tant que sous-classe, elle est uniquement chargée de fournir certains détails de conception.
(2) Mode Observateur : L'éditeur pousse le message jusqu'aux abonnés.
(3) Fonction de rappel : La requête asynchrone ajax encapsule les opérations qui doivent être effectuées dans la fonction de rappel. Cette fonction de rappel n'est exécutée que lorsque les données sont renvoyées.

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.