Dieses Mal zeige ich Ihnen, wie Sie das Strategiemuster des Designmusters im Frontend verwenden und wie Sie das Strategiemuster des Designmusters im verwenden Frontend. HinweiseEs gibt welche, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.
Was ist ein Strategiemuster?
In den klassischen „Design Patterns“ der vier GoF-Brüder ist das Strategiemuster wie folgt definiert:
Definieren Sie eine Reihe von Algorithmen, kapseln Sie sie einzeln und machen Sie sie austauschbar.
Der obige Satz ist im wahrsten Sinne des Wortes sehr einfach. Aber wie man es im Entwicklungsprozess anwenden kann, ist mit nur einer Definition immer noch verwirrend. Nehmen Sie als Beispiel das Kauf-, Verkaufs- und Lagersystem für Händler, an dem der Autor gearbeitet hat:
Ein Supermarkt bereitet die Durchführung einer Werbeveranstaltung vor. Das Marktpersonal hat nach Untersuchung und Analyse einige Werbestrategien formuliert:
10 Rabatt für Einkäufe über 100
30 Rabatt für Einkäufe über 200
50 Rabatt für Einkäufe über 300
. . .
Die Oberfläche der Kassiersoftware sieht folgendermaßen aus (einfaches Diagramm):
Wie sollen wir den tatsächlichen Verbrauchsbetrag berechnen?
Die anfängliche Implementierung sieht folgendermaßen aus:
//方便起见，我们把各个促销策略定义为枚举值：0,1,2...
var getActualTotal = function(onSaleType,originTotal){
if(onSaleType===0){
return originTotal-Math.floor(originTotal/100)*10
}
if(onSaleType===1){
return originTotal-Math.floor(originTotal/200)*30
}
if(onSaleType===0){
return originTotal-Math.floor(originTotal/300)*50
}
}
getActualTotal(1,2680); //2208Nach dem Login kopieren
Nach dem Login kopieren
Der obige Code ist sehr einfach und seine Mängel sind ebenfalls offensichtlich. Wenn meine vollständige Reduktionsstrategie allmählich zunimmt, wird die getActualTotal-Funktion immer größer und voller if-Beurteilungen, und es ist leicht, Fehler zu machen, wenn ich nicht aufpasse.
OK, manche Leute sagen, dass das nicht elegant genug ist, aber es hat keinen Einfluss auf meine Verwendung. Egal wie viele vollständige Reduktionsstrategien ich verwende, es wird nicht ausreichen.
Ich kann nur sagen, dass Anforderungen niemals von Programmierern bestimmt werden. . Zu diesem Zeitpunkt teilten die Marktmitarbeiter mit, dass unsere neue Version des Programms eine Mitgliedschaftsfunktion hinzugefügt hat und wir die folgende Werbestrategie unterstützen müssen:
Mitgliederwerbestrategie:
-
Mitglieder laden 300 RMB auf und erhalten 60 RMB zurück und 10 % Rabatt auf den ersten Einzelkauf
Mitglieder laden 500 RMB auf und erhalten 100 RMB und 20 % Rabatt auf den ersten Einzelkauf
Mitglieder laden 1000 RMB auf und erhalten 300 RMB zurück, und der erste Einzelkauf kostet das 7-fache
...
Wenn Sie zu diesem Zeitpunkt weiterhin getActualTotal Urteile zur ursprünglichen Funktion if hinzufügen, denke ich, dass Ihr Vorgesetzter, wenn er Ihren Code überprüft, sich möglicherweise fragt, warum er Sie überhaupt eingestellt hat. .
OK, wir haben uns endlich entschieden, den Code der Werbestrategie zu überarbeiten. Wir können Folgendes tun:
var vipPolicy_0=function(originTotal){
return originTotal-Math.floor(originTotal/100)*10
}
var vipPolicy_1=function(originTotal){
return originTotal-Math.floor(originTotal/200)*30
}
...
//会员充1000返300
var vipPolicy_10=function(account,originTotal){
if(account===0){
account+=1300;
return originTotal*0.9
}else{
account+=1300;
return originTotal;
}
return originTotal-Math.floor(originTotal/200)*30
}
...
var vipPolicy_n=function(){
...
}
var getActualTotal=function(onSaleType,originTotal,account){
switch(onSaleType){
case 0:
return vipPolicy_0(originTotal);
case 1:
return vipPolicy_0(originTotal);
...
case n:
return ...
default:
return originTotal;
}
}Nach dem Login kopieren
Nach dem Login kopieren
Okay, jetzt hat jede unserer Strategien ihren eigenen unabhängigen Bereich . Es gibt jedoch noch zwei Probleme, die nicht gelöst wurden:
Mit der Zunahme der Werbestrategien wird das Codevolumen von getActualTotal immer größer werden
Dem System mangelt es an Flexibilität. Zusätzlich zum Hinzufügen einer Strategiefunktion müssen Sie auch die switch...case..-Anweisung
Let ändern Wir überprüfen die Definition des Strategiemusters:
Definieren Sie eine Reihe von Algorithmen, kapseln Sie sie einzeln und machen Sie sie austauschbar
In unserem Beispiel ist die Implementierung jeder Werbestrategie unterschiedlich. aber wir Das ultimative Ziel ist es, den tatsächlichen Betrag zu finden. Das Strategiemuster kann unsere Algorithmen für Werbestrategien einzeln kapseln und austauschbar machen, ohne unsere Bewertung des tatsächlichen Betrags zu beeinträchtigen, was genau das ist, was wir brauchen.
Verwenden wir das Strategiemuster, um den obigen Code zu rekonstruieren:
var policies={
"Type_0":function(originTotal){
return originTotal-Math.floor(originTotal/100)*10
},
"Type_1":function(originTotal){
return originTotal-Math.floor(originTotal/200)*30
},
...
"Type_n":function(originTotal){
...
}
}
var getActualTotal=function(onSaleType,originTotal,account){
return policies["Type_"+onSaleType](originTotal,account)
}
//执行
getActualTotal(0,2680.00);//2208Nach dem Login kopieren
Nach dem Login kopieren
Bei der Analyse des obigen Codes haben wir festgestellt, dass die Funktion getActualTotal unabhängig davon, wie die Werbestrategie erhöht wird, nicht erforderlich ist überhaupt ändern. Wir müssen lediglich die Funktion der neuen Strategie hinzufügen.
Durch den Strategiemustercode haben wir die nervenaufreibenden bedingten Verzweigungsanweisungen eliminiert. getActualTotal selbst hat keine Rechenleistung, sondern delegiert die Berechnung an die Strategiefunktion.
Daraus können wir die wichtigsten Punkte der Strategiemusterimplementierung zusammenfassen:
Kapseln Sie den sich ändernden Algorithmus in eine unabhängige Strategiefunktion und übernehmen Sie die Verantwortung für die spezifische Berechnung
Delegationsfunktion, die Kundenanfragen entgegennimmt und die Anfrage an eine bestimmte Strategiefunktion delegiert
wird durch ein UML-Diagramm wie folgt dargestellt:
? Nachdem Sie das Bild oben gesehen haben, haben Sie es jetzt klar verstanden? Dann beeilen Sie sich und probieren Sie den Strategiemodus aus!
Nachschlagewerke:
"Design Patterns: WiederverwendbarObjektorientiertGrundlagen der Software"
《Dahua Design Patterns》
《JavascriptDesign Patterns and Development Practices 》
Ich mache seit mehreren Jahren Front-End-Entwicklung, habe die Designmuster jedoch nie eingehend studiert und zusammengefasst. Je mehr ich mich mit Architektur beschäftige, desto mehr habe ich das Gefühl, dass Designmuster zu einem Hindernis auf meinem Weg nach vorne geworden sind. Beginnen Sie also noch heute damit, klassische Designmuster und mehrere wichtige objektorientierte Prinzipien eingehend zu studieren und zusammenzufassen.
Heute ist der erste Tag, lasst uns zuerst über den Strategiemodus sprechen.
Was ist ein Strategiemuster?
In den klassischen „Design Patterns“ der vier GoF-Brüder ist das Strategiemuster wie folgt definiert:
Definieren Sie eine Reihe von Algorithmen, kapseln Sie sie einzeln und machen Sie sie austauschbar.
Der obige Satz ist im wahrsten Sinne des Wortes sehr einfach. Aber wie man es im Entwicklungsprozess anwenden kann, ist mit nur einer Definition immer noch verwirrend. Nehmen Sie als Beispiel das Kauf-, Verkaufs- und Lagersystem für Händler, an dem der Autor gearbeitet hat:
Ein Supermarkt bereitet die Durchführung einer Werbeveranstaltung vor. Das Marktpersonal hat nach Untersuchung und Analyse einige Werbestrategien formuliert:
- 10 Rabatt für Einkäufe über 100
- 30 Rabatt für Einkäufe über 200
- 50 Rabatt für Einkäufe über 300
- . . .
Die Oberfläche der Kassiersoftware sieht folgendermaßen aus (einfaches Diagramm):
Wie sollen wir den tatsächlichen Verbrauchsbetrag berechnen?
Die anfängliche Implementierung sieht folgendermaßen aus:
//方便起见，我们把各个促销策略定义为枚举值：0,1,2...
var getActualTotal = function(onSaleType,originTotal){
if(onSaleType===0){
return originTotal-Math.floor(originTotal/100)*10
}
if(onSaleType===1){
return originTotal-Math.floor(originTotal/200)*30
}
if(onSaleType===0){
return originTotal-Math.floor(originTotal/300)*50
}
}
getActualTotal(1,2680); //2208Nach dem Login kopieren
Nach dem Login kopieren
Der obige Code ist sehr einfach und seine Mängel sind ebenfalls offensichtlich. Wenn meine vollständige Reduktionsstrategie allmählich zunimmt, wird die
-Funktion immer größer und voller getActualTotal-Beurteilungen, und es ist leicht, Fehler zu machen, wenn ich nicht aufpasse. if
OK, manche Leute sagen, dass das nicht elegant genug ist, aber es hat keinen Einfluss auf meine Verwendung. Egal wie viele vollständige Reduktionsstrategien ich verwende, es wird nicht ausreichen.
Ich kann nur sagen, dass Anforderungen niemals von Programmierern bestimmt werden. . Zu diesem Zeitpunkt teilten die Marktmitarbeiter mit, dass unsere neue Version des Programms eine Mitgliedschaftsfunktion hinzugefügt hat und wir die folgende Werbestrategie unterstützen müssen:
Mitgliederwerbestrategie:
- Mitglieder laden 300 RMB auf und erhalten 60 RMB zurück und 10 % Rabatt auf den ersten Einzelkauf
- Mitglieder laden 500 RMB auf und erhalten 100 RMB und 20 % Rabatt auf den ersten Einzelkauf
- Mitglieder laden 1000 RMB auf und erhalten 300 RMB zurück, und der erste Einzelkauf kostet das 7-fache
- ...
Wenn Sie zu diesem Zeitpunkt weiterhin
Urteile zur ursprünglichen Funktion getActualTotal hinzufügen, denke ich, dass Ihr Vorgesetzter, wenn er Ihren Code überprüft, sich möglicherweise fragt, warum er Sie überhaupt eingestellt hat. . if
OK, wir haben uns endlich entschieden, den Code der Werbestrategie zu überarbeiten. Wir können Folgendes tun:
var vipPolicy_0=function(originTotal){
return originTotal-Math.floor(originTotal/100)*10
}
var vipPolicy_1=function(originTotal){
return originTotal-Math.floor(originTotal/200)*30
}
...
//会员充1000返300
var vipPolicy_10=function(account,originTotal){
if(account===0){
account+=1300;
return originTotal*0.9
}else{
account+=1300;
return originTotal;
}
return originTotal-Math.floor(originTotal/200)*30
}
...
var vipPolicy_n=function(){
...
}
var getActualTotal=function(onSaleType,originTotal,account){
switch(onSaleType){
case 0:
return vipPolicy_0(originTotal);
case 1:
return vipPolicy_0(originTotal);
...
case n:
return ...
default:
return originTotal;
}
}Nach dem Login kopieren
Nach dem Login kopieren
Okay, jetzt hat jede unserer Strategien ihren eigenen unabhängigen Bereich . Es gibt jedoch noch zwei Probleme, die nicht gelöst wurden:
- Mit der Zunahme der Werbestrategien wird das Codevolumen von
immer größer werdengetActualTotal
- Dem System mangelt es an Flexibilität. Zusätzlich zum Hinzufügen einer Strategiefunktion müssen Sie auch die
-Anweisung switch...case..
Let ändern Wir überprüfen die Definition des Strategiemusters:
定义一系列的算法，把它们一个个封装起来，并且使它们可互相替换
在我们的例子中，每种促销策略的实现方式是不一样的，但我们最终的目的都是为了求得实际金额。策略模式可以把我们对促销策略的算法一个个封装起来，并且使它们可互相替换而不影响我们对实际金额的求值，这正好是我们所需要的。
下面我们用策略模式来重构上面的代码：
var policies={
"Type_0":function(originTotal){
return originTotal-Math.floor(originTotal/100)*10
},
"Type_1":function(originTotal){
return originTotal-Math.floor(originTotal/200)*30
},
...
"Type_n":function(originTotal){
...
}
}
var getActualTotal=function(onSaleType,originTotal,account){
return policies["Type_"+onSaleType](originTotal,account)
}
//执行
getActualTotal(0,2680.00);//2208Nach dem Login kopieren
Nach dem Login kopieren
分析上面的代码我们发现，不管促销策略如何增加，getActualTotal函数完全不需要再变化了。我们要做的，就是增加新策略的函数而已。
通过策略模式的代码，我们消除了让人反胃的大片条件分支语句，getActualTotal本身并没有计算能力，而是将计算全权委托给了策略函数。
由此我们可以总结出策略模式实现的要点：
将变化的算法封装成独立的策略函数，并负责具体的计算
委托函数，该函数接受客户请求，并将请求委托给某一个具体的策略函数
用一张UML图表示如下：
怎么样？现在看到上面这张图是不是有了了然于胸的感觉？那就赶紧去试一试策略模式吧！
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎样使用JS+H5实现微信摇一摇
如何对微信小程序进行开发
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Strategiemuster von Designmustern im Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
