Heim > Web-Frontend > js-Tutorial > Erlernen Sie die Fähigkeiten der JavaScript-Entwurfsmuster-Vorlagenmethode „pattern_javascript'.

Erlernen Sie die Fähigkeiten der JavaScript-Entwurfsmuster-Vorlagenmethode „pattern_javascript'.

WBOY
Freigeben: 2016-05-16 15:19:05
Original
1094 Leute haben es durchsucht

1. Definition

Die Vorlagenmethode basiert auf dem Vererbungsentwurfsmuster, das die Skalierbarkeit des Systems erheblich verbessern kann. Abstrakte übergeordnete Klasse und Unterklasse in Java
Die Vorlagenmethode besteht aus zwei Teilen der Struktur: Der erste Teil ist die abstrakte übergeordnete Klasse und der zweite Teil ist die konkrete Implementierungsunterklasse.

2. Beispiel

Kaffee oder Tee
(1) Wasser kochen
(2) Teeblätter in kochendem Wasser einweichen
(3) Gießen Sie den Tee in die Tasse
(4) Zitrone hinzufügen

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

Nach dem Login kopieren

Mithilfe des Vorlagenmethodenmusters wird das Algorithmus-Framework der Unterklasse in der übergeordneten Klasse gekapselt. Diese Algorithmus-Frameworks sind unter normalen Bedingungen für die meisten Unterkategorien geeignet, es werden jedoch auch Unterkategorien „Persönlichkeit“ angezeigt.
Wie im obigen Prozess ist das Hinzufügen von Gewürzen optional.
Die Hook-Methode kann dieses Problem lösen. Das Platzieren von Hooks ist ein gängiges Mittel zum Isolieren von Änderungen.

/* 添加钩子方法 */
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();

Nach dem Login kopieren

JavaScript bietet keine echte Klassenvererbung durch Delegation zwischen Objekten.

3. „Hollywood-Prinzip“: Rufen Sie uns nicht an, wir rufen Sie an

Typische Nutzungsszenarien:

(1) Vorlagenmethodenmuster: Die Verwendung dieses Entwurfsmusters bedeutet, dass die Unterklasse die Kontrolle über sich selbst aufgibt und stattdessen die Unterklasse durch die übergeordnete Klasse informiert. Als Unterklasse ist sie nur für die Bereitstellung einiger Designdetails verantwortlich.
(2) Beobachtermodus: Der Herausgeber leitet die Nachricht an die Abonnenten weiter.
(3) Rückruffunktion: Eine asynchrone Ajax-Anfrage kapselt die Vorgänge, die in der Rückruffunktion ausgeführt werden müssen. Diese Rückruffunktion wird nur ausgeführt, wenn die Daten zurückgegeben werden.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage