Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Designmuster-Strategiemuster-Beispiel_Javascript-Kenntnisse

JavaScript-Designmuster-Strategiemuster-Beispiel_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:34:231289Durchsuche

Die Bedeutung des Strategiemusters besteht darin, eine Reihe von Algorithmen zu definieren, sie einzeln zu kapseln und sie austauschbar zu machen.
Ein kleines Beispiel kann es uns verdeutlichen.

Erinnern Sie sich an die animate-Methode in jquery.

Code kopieren Der Code lautet wie folgt:

$( div ).animate( {„left: 200px“}, 1000, ‚linear‘ ); // Gleichmäßige Bewegung
$( div ).animate( {“left: 200px”}, 1000, ‘cubic’ ); // Kubische Lockerung

Diese beiden Codezeilen bewirken, dass sich das Div innerhalb von 1000 ms um 200 Pixel nach rechts bewegt. Linear (gleichmäßige Geschwindigkeit) und kubisch (kubische Beschleunigung) sind die Kapselung eines Strategiemusters.

Nehmen wir ein weiteres Beispiel. Auf der Seite dev.qplus.com, die ich in der ersten Jahreshälfte geschrieben habe, gibt es für jedes Mitglied des Formulars unterschiedliche Verifizierungsregeln.

Zum Beispiel muss im Namensfeld überprüft werden, dass es keine leeren, sensiblen Wörter enthält und die Zeichen zu lang sind. Natürlich können Sie drei andere Dinge schreiben, um das Problem zu lösen, aber die Skalierbarkeit und Wartbarkeit des Schreibens von Code auf diese Weise kann man sich vorstellen. Wenn das Formular mehr Elemente enthält und mehr Situationen überprüft werden müssen, ist es nicht unmöglich, insgesamt Hunderte von if elses zu schreiben.

Ein besserer Ansatz besteht also darin, jede Validierungsregel separat mithilfe des Strategiemusters zu kapseln. Wenn Sie welche Art von Bestätigung benötigen, müssen Sie nur den Namen der Richtlinie angeben. So:

Code kopieren Der Code lautet wie folgt:

nameInput.addValidata({
notNull: wahr,
dirtyWords: true,
maximale Länge: 30
})

Die Methoden notNull, maxLength und andere müssen nur einheitlich true oder false zurückgeben, um anzuzeigen, ob die Überprüfung erfolgreich war.
Code kopieren Der Code lautet wie folgt:
validataList = {
notNull: function( value ){
Rückgabewert !== ”;
},
maxLength: function( value, maxLen ){
Rückgabewert.length() > maxLen;
}
}

Wie Sie sehen, können verschiedene Validierungsregeln leicht geändert und untereinander ersetzt werden. Wenn der Produktmanager eines Tages vorschlägt, die Zeichenbeschränkung auf 60 Zeichen zu ändern. Es dauert nur 0,5 Sekunden, um die Arbeit abzuschließen.

Stellungnahme:
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