Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des JavaScript-Strategiemodus, der Verwendungsszenarien des Vorlagenmodus und des Implementierungscodes

Detaillierte Erläuterung des JavaScript-Strategiemodus, der Verwendungsszenarien des Vorlagenmodus und des Implementierungscodes

伊谢尔伦
Freigeben: 2017-07-24 14:12:58
Original
2755 Leute haben es durchsucht

Strategiemuster

Strategiemuster bezieht sich auf die Definition einer Reihe von Algorithmen und deren Kapselung nacheinander. Der Zweck besteht darin, die Verwendung des Algorithmus von der Implementierung des Algorithmus zu trennen. Um es ganz klar auszudrücken: Die Schreibmethode, die früher viele Urteile erforderte, wird nun vom Inhalt der Urteile getrennt und in kleine Individuen umgewandelt.

Code-Implementierung:

Das Code-Szenario ist eine Supermarkt-Aktion, VIP erhält 50 % Rabatt, Stammkunden erhalten 30 % Rabatt und normale Kunden erhalten keinen Rabatt. Berechnen Sie den zu zahlenden Endbetrag .

Situation ohne Verwendung des Strategiemodus:

function Price(personType, price) {
  //vip 5 折
  if (personType == 'vip') {
    return price * 0.5;
  }
  else if (personType == 'old'){ //老客户 3 折
    return price * 0.3;
  } else {
    return price; //其他都全价
  }
}
Nach dem Login kopieren

Nachteile: Nachteile: Wenn ich andere Rabatte habe oder sich die Rabatte meiner Aktivitäten oft ändern, müssen Sie die Bedingungen ständig ändern wenn...sonst. Und es verstößt auch gegen eines der Prinzipien von Designmustern: das Prinzip, gegenüber Änderungen verschlossen und offen für Erweiterungen zu sein.

Nach der Verwendung des Strategiemusters:

// 对于vip客户
function vipPrice() {
  this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于老客户
function oldPrice() {
  this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于普通客户
function Price() {
  this.discount = 1;
}
Price.prototype.getPrice = function(price) {
  return price ;
}
// 上下文,对于客户端的使用
function Context() {
  this.name = '';
  this.strategy = null;
  this.price = 0;
}
Context.prototype.set = function(name, strategy, price) {
  this.name = name;
  this.strategy = strategy;
  this.price = price;
}
Context.prototype.getResult = function() {
  console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}
var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();  // vip客户 的结账价为: 100
var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult(); // 老客户 的结账价为: 60
var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult(); // 普通客户 的结账价为: 200
Nach dem Login kopieren

Durch das Strategiemuster; Die Rabatte und Algorithmen des Kunden sind entkoppelt und ermöglichen die unabhängige Durchführung von Änderungen und Erweiterungen, ohne die Verwendung von Kunden oder anderen Algorithmen zu beeinträchtigen.

Nutzungsszenarien:

Der praktischste Anlass für das Strategiemuster ist Eine bestimmte „Klasse“ enthält eine große Anzahl bedingter Anweisungen, z. B. if...else oder switch. Jeder bedingte Zweig bewirkt, dass sich das spezifische Verhalten der „Klasse“ auf unterschiedliche Weise ändert. Anstatt

eine große bedingte Anweisung zu verwalten, ist es besser, jedes Verhalten in mehrere unabhängige Objekte aufzuteilen. Jedes Objekt wird als Richtlinie bezeichnet. Das Einrichten mehrerer solcher Richtlinienobjekte kann die Qualität unseres Codes verbessern und bessere Unit-Tests ermöglichen.

Vorlagenmuster

definiert das Grundgerüst eines Algorithmus in einem Vorgang und verschiebt einige Schritte auf Unterklassen. Mithilfe von Vorlagenmethoden können Unterklassen bestimmte Schritte eines Algorithmus neu definieren, ohne die Struktur des Algorithmus zu ändern.

Laienhaft ausgedrückt bedeutet dies, dass einige öffentliche Methoden in einer übergeordneten Klasse gekapselt werden. Unterklassen können diese übergeordnete Klasse erben und die Methoden der übergeordneten Klasse in der Unterklasse überschreiben, um ihre eigene Geschäftslogik zu implementieren.

Code-Implementierung:

Front-End-Interviews umfassen beispielsweise im Wesentlichen schriftliche Tests, technische Interviews, Führungsinterviews, HR-Interviews usw. Die schriftlichen Testfragen und technischen Aspekte sind jedoch für jedes Unternehmen unterschiedlich können unterschiedlich oder gleich sein. Wenn sie gleich sind, erben Sie die Methoden der übergeordneten Klasse. Wenn sie unterschiedlich sind, überschreiben Sie die Methoden der übergeordneten Klasse.

var Interview = function(){};
// 笔试
Interview.prototype.writtenTest = function(){
  console.log("这里是前端笔试题");
};
// 技术面试
Interview.prototype.technicalInterview = function(){
  console.log("这里是技术面试");
};
// 领导面试
Interview.prototype.leader = function(){
  console.log("领导面试");
};
// 领导面试
Interview.prototype.HR = function(){
  console.log("HR面试");
};
// 等通知
Interview.prototype.waitNotice = function(){
  console.log("等通知啊,不知道过了没有哦");
};
// 代码初始化
Interview.prototype.init = function(){
  this.writtenTest();
  this.technicalInterview();
  this.leader();
  this.HR();
  this.waitNotice();
};
// 阿里巴巴的笔试和技术面不同,重写父类方法,其他继承父类方法。
var AliInterview = function(){};
AliInterview.prototype = new Interview();
// 子类重写方法 实现自己的业务逻辑
AliInterview.prototype.writtenTest = function(){
  console.log("阿里的技术题就是难啊");
}
AliInterview.prototype.technicalInterview = function(){
  console.log("阿里的技术面就是叼啊");
}
var AliInterview = new AliInterview();
AliInterview.init();
// 阿里的技术题就是难啊
// 阿里的技术面就是叼啊
// 领导面试
// HR面试
// 等通知啊,不知道过了没有哦
Nach dem Login kopieren

Anwendungsszenarien:

Der Vorlagenmodus wird hauptsächlich verwendet, wenn Code einmal geöffnet werden muss. Implementieren Sie die unveränderlichen Teile. Wenn die Seite jedoch in Zukunft geändert wird, muss ein Teil der Geschäftslogik geändert oder ein neues Geschäft hinzugefügt werden. Hauptsächlich wird die übergeordnete Klasse durch die Unterklasse neu geschrieben, und andere Teile, die nicht geändert werden müssen, erben die übergeordnete Klasse.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Strategiemodus, der Verwendungsszenarien des Vorlagenmodus und des Implementierungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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