So implementieren Sie das Strategiemuster in Javascript

So implementieren Sie das Strategiemuster in Javascript

Überblick

Das Strategiemuster ist ein verhaltensbasiertes Entwurfsmuster in JavaScript-Entwurfsmustern.

Definition:

Definieren Sie eine Reihe von Algorithmen und kapseln Sie jeden dieser Algorithmen in eine Strategieklasse (Methode). Trennen Sie dann den unveränderten Teil vom variablen Teil. Diese Algorithmen können durcheinander ersetzt werden.

Umgangssprachliche Erklärung:

Tatsächlich bezieht sich der sogenannte Strategiemodus auf die Ausführung verschiedener Methoden gemäß unterschiedlicher Strategien, was der if-else-Verzweigungsbeurteilung sehr ähnlich ist; der Strategiemodus wird jedoch zum Lösen mehrerer bedingter Beurteilungsanweisungen verwendet;

Code-Implementierung

brauchen:

Da das Jahresende naht, hat ein Unternehmen beschlossen, Jahresendprämien im Voraus auszuzahlen. Es gibt jedoch bestimmte Regeln für die Berechnung von Jahresendprämien, und die Höhe der Jahresendprämien hängt eng mit der Leistungsbeurteilung zusammen. Daher sieht der Jahresendprämienplan eines Unternehmens wie folgt aus:

Für Mitarbeiter mit der Leistungseinstufung „S“ beträgt die Jahresendprämie das Vierfache ihres Monatsgehalts;

Für Mitarbeiter mit der Leistungsbeurteilung „A“ beträgt der Jahresendbonus das Dreifache ihres Monatsgehalts;

Für Mitarbeiter mit der Leistungsbewertung B beträgt der Jahresendbonus das Doppelte ihres Monatsgehalts;

Wenn Sie dies sehen, können Sie mit dem Schreiben von Programmen beginnen. Im Allgemeinen sieht der meiste Code so aus:

Funktion berechneBonus(Stufe,Gehalt){
    wenn(Ebene === 'S'){
        Rückkehrgehalt*4;
    }
    
    wenn(Ebene === 'A'){
        Rückkehrgehalt*3
    }

    wenn(Ebene === 'B'){
        Rückkehrgehalt*2
    }
}

console.log(Bonus berechnen("S",14000)); //56000
console.log(Bonus berechnen("A",10000)); //30000
console.log(Bonus berechnen("B",5000)); //10000

Es besteht kein Problem, den obigen Code zur Lösung der aktuellen Anforderungen zu verwenden. Aus Sicht des Programmdesigns kann der obige Code jedoch noch optimiert werden. Da diese Methode relativ groß ist, viele Verzweigungsbeurteilungen aufweist und nicht flexibel ist, müssen wir einen C-Plan hinzufügen, wenn der Bonusplan zum Jahresende geändert wird? Müssen wir der Methode eine Verzweigungsbeurteilung hinzufügen? Dies verstößt gegen das Open-Closed-Prinzip;

Optimierung:

var Strategien = {
    "S": Funktion (Gehalt) {
        Rückkehrgehalt*4
    },
    "A": Funktion (Gehalt) {
        Gehalt zurückzahlen*3;
    },
    "B": Funktion (Gehalt) {
        Rückkehrgehalt*2
    }
}

var berechneBonus =Funktion(Stufe,Gehalt){
    Renditestrategien[Niveau](Gehalt);
} 
console.log(Bonus berechnen("S",14000)); //56000
console.log(Bonus berechnen("A",10000)); //30000
console.log(Bonus berechnen("B",5000)); //10000

Nach der Optimierung des obigen Codes wird das Strategiemuster verwendet, um den Code zu transformieren. Wir können sehen, dass wir ein Strategieobjekt definieren und dann calculateBonus den Betrag des Jahresendbonus entsprechend der vom Benutzer eingegebenen Stufe und des Gehalts berechnen kann. Nach der Transformation wird die Struktur des Codes prägnanter;

Bei der Webentwicklung erfordern alle Registrierungs- und Anmeldefunktionen der Anmeldeseite die Übermittlung eines Formulars. Während des Übermittlungsvorgangs müssen jedoch Überprüfungen und Überprüfungen durchgeführt werden. Diejenigen, die die Überprüfungsregeln nicht erfüllen, werden nicht direkt übermittelt. Bevor wir das Entwurfsmuster gelernt haben, kann unsere Überprüfung auch dieselbe wie oben sein, mit mehreren if-Zweigen. Jetzt verwenden wir das Strategiemuster, um eine Formularüberprüfung zu implementieren:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
</Kopf>
<Text>
        <form action="http://xxx.com/register" id="registerForm" method="post">
            Bitte geben Sie Ihren Benutzernamen ein: <input type="text" name="userName"/>
            Bitte geben Sie Ihr Passwort ein: <input type="text" name="password"/>
            Bitte geben Sie Ihre Telefonnummer ein: <input type="text" name="phoneNumber"/>
            <button>Senden</button>
        </form>
</body>
<Skript>
        //Verifizierungsregeln für den Algorithmus der Strategieklasse definieren var strategies = {
        isNonEmpty: Funktion (Wert, Fehlermeldung) {
            wenn (Wert === '') {
                Fehlermeldung zurückgeben;
            }
        },
        minLength: Funktion (Wert, Länge, Fehlermeldung) {
            if (Wert.Länge < Länge){
                Fehlermeldung zurückgeben;
            }
        },
        isMobile: Funktion (Wert, Fehlermeldung) {
            wenn ( !/(^1[3|5|8][0-9]{9}$)/.test( Wert ) ){
                Fehlermeldung zurückgeben;
            }
        }
    };
    //Validator-Klasse var Validator = function(){
        // Verifizierungsregeln speichern this.cache = [];
    };
    //Methode zum Hinzufügen von Validierungsregeln Validator.prototype.add = function( dom, rules ){
        var selbst = dies;
        für (var i = 0, Regel; Regel = Regeln[i++];){
            (Funktion( Regel ){
                //Wert des Strategieattributs im Validierungsregelobjekt aufteilen var strategyAry = rule.strategy.split( ':' );
                var errorMsg = Regel.errorMsg;
                selbst.cache.push(Funktion(){
                    //Gib den ersten Wert des Strategieattributs im Validierungsregelobjekt zurück und füge ihn in die Strategie ein var strategy = strategyAry.shift();
                    //Zusammensetzungsparameter strategyAry.unshift( dom.value );
                    //Assembly-Parameter strategyAry.push( errorMsg );
                    //Suche die Ausführungsmethode des Strategieobjekts und füge sie in die Cache-Variable ein. return strategies[ strategy ].apply( dom, strategyAry );
                });
                console.log(Strategie);
            })( Regel )
        }
    };
    //Verifizierungsmethode starten Validator.prototype.start = function(){
        für (var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
             //Überprüfung der Methode zur Ausführung des Loop-Cache var errorMsg = validatorFunc();
            //Wenn in der Methode des Ausführungsstrategieobjekts errorMsg zurückgegeben wird, bedeutet dies, dass die Methode einen Fehler gemeldet hat (die Überprüfungsregel konnte nicht bestanden werden).
            wenn (Fehlermeldung){
                Fehlermeldung zurückgeben;
            }
        }
    };

    //Verifizierung aufrufen var registerForm = document.getElementById( 'registerForm' );
    //Methode zum Anpassen der Validierungsregeln definieren var validataFunc = function(){
        //Objekt instanziieren var validator = new Validator();
        //Validierungsregeln anpassenvalidator.add(registerForm.userName, [{
            Strategie: 'isNonEmpty',
            Fehlermeldung: „Benutzername darf nicht leer sein“
        }, {
            Strategie: 'minLength:6',
            errorMsg: „Der Benutzername darf nicht kürzer als 10 Zeichen sein“
        }]);
        validator.add( registerForm.password, [{
            Strategie: 'minLength:6',
            errorMsg: „Das Passwort darf nicht weniger als 6 Zeichen lang sein“
        }]);
        //Methode aufrufen, um die Überprüfung in einer Schleife auszuführen var errorMsg = validator.start();
        Fehlermeldung zurückgeben;
    }
    //Klicken Sie auf die Schaltfläche „Senden“ (Senden-Ereignis)
    registerForm.onsubmit = Funktion(){
        //Führen Sie die obige benutzerdefinierte Überprüfungsmethode aus. var errorMsg = validataFunc();
        //Wenn errorMsg vorhanden ist, bedeutet dies, dass die Überprüfung fehlgeschlagen ist, wenn ( errorMsg ){
            Alarm (Fehlermeldung);
            gibt false zurück;
        }

    };
</Skript>
</html>

Wir können das Strategiemuster verwenden, um Probleme wie wiederholte if-else-Beurteilungen in großem Maßstab bei der Formularvalidierung zu lösen. Ich habe den Code oben ausführlich kommentiert. Um Designmuster zu lernen, müssen Sie den Code sorgfältig prüfen und die Ideen lernen. Wie dem auch sei, eine der Hauptideen des Strategiemusters besteht darin, eine Reihe von Algorithmen zu definieren, dann Parameter zu übergeben und unterschiedliche Algorithmusregeln entsprechend unterschiedlicher Parameter auszuführen.

Zusammenfassen

Vorteil:

1. Verwenden Sie Kombinations-, Delegations- und Polymorphismustechnologien und -ideen, um mehrere bedingte Auswahlanweisungen zu vermeiden.

2. Kapseln Sie den Algorithmus in einer unabhängigen Strategieklasse, damit er leicht gewechselt, verstanden und erweitert werden kann.

3. Das Strategiemuster kann in anderen Teilen des Systems wiederverwendet werden, um wiederholtes Kopieren und Einfügen zu vermeiden.

Mangel:

1. Dem Programm werden viele Strategieklassen oder Strategieobjekte hinzugefügt;

2. Wenn Sie Strategieklassen verwenden, müssen Sie alle Strategiealgorithmen klar verstehen, sonst wissen Sie nicht, welche Wahl Sie treffen sollen.

Oben sind die Details des JavaScript-Strategiemusters aufgeführt. Weitere Informationen zum JavaScript-Strategiemuster finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung des JavaScript-Strategiemodus aus der Formularvalidierung
  • JavaScript-Entwurfsmuster-Strategie, Musterimplementierungsprinzip, detaillierte Erklärung
  • Beispielanalyse für die Daten- und Logiktrennungsoperation des JS-Formularvalidierungs-Plugins [Strategiemodus]
  • JavaScript-Entwurfsmuster – Prinzipien und Anwendungsbeispiele für Strategiemuster
  • Analyse des Konzepts und der Verwendung des Strategiemusters im JS-Entwurfsmuster
  • JavaScript schreibt das asynchrone Validierungsformular in ein synchrones Formular um
  • Zusammenfassung der drei Methoden zum Senden des Formulars, nachdem js das Formular überprüft hat
  • Beherrschen Sie ganz einfach den JavaScript-Strategiemodus
  • So verwenden Sie das JavaScript-Strategiemuster zum Validieren von Formularen

<<:  Docker unter Linux installieren (sehr einfache Installationsmethode)

>>:  Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung

Artikel empfehlen

Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3

1. Wann soll setUp ausgeführt werden? Wir alle wi...

Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19

Inhaltsverzeichnis 1. Umgebung Einführung 2. Inst...

Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container

Wenn Sie Docker verwenden, suchen Sie in Docker n...

Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial

1. Einleitung Dieser Artikel enthält keine Screen...

Concat() von kombinierten Feldern in MySQL

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

Hexadezimale Farbcodes (vollständig)

Rot und Pink und ihre Hexadezimalcodes. #990033 #...

Methode und Einführung der Tabellenindexdefinition in MySQL

Überblick Ein Index ist eine vom DBMS basierend a...

Detailliertes Beispiel der MySQL curdate()-Funktion

Einführung in die MySQL CURDATE-Funktion Bei Verw...

MySql-Entwicklung einer automatischen Synchronisierungstabellenstruktur

Schwachstellen bei der Entwicklung Während des En...

Beschreibung der Ausführungsmechanismen von statischen Seiten und dynamischen Seiten

1. Eine statische Seite bedeutet, dass die Webseit...

Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung

Ich habe das System vor einiger Zeit neu installi...

HTML-Tags: Sub-Tag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

Drei Möglichkeiten zur Implementierung von Animationen in CSS3

Hiermit werden die Grundkenntnisse des Interviewt...

Lösungen für das Problem der Erstellung von XHTML- und CSS-Webseiten

Die Lösungen für die Probleme, die bei der Erstell...

MySQL-Joinpufferprinzip

Inhaltsverzeichnis 1. MySQL-Joinpuffer 2. JoinBuf...