In herkömmlichen objektorientierten Sprachen verwendet das Hinzufügen von Funktionen zu Objekten häufig die Vererbung. Die Vererbungsmethode kann jedoch Probleme bringen: Wenn sich die Elternklasse ändert, ändern sich alle Unterklassen entsprechend.
Wenn ein JavaScript -Skript ausgeführt wird, wirkt sich das Hinzufügen von Verhalten in einem Objekt (oder in seinem Prototyp) alle Instanzen dieses Objekts aus.
Der Dekorateur ist eine Alternative zur Implementierung der Vererbung, die über die Form von überlasteten Methoden neue Funktionen hinzufügt. Dieses Muster kann sein eigenes Verhalten vor oder nach dem Dekorateur hinzufügen, um einen bestimmten Zweck zu erzielen.
Das Dekorateurmuster ist eine Möglichkeit, vorhandenen Funktionen dynamisch mehr Funktionen hinzuzufügen. Jede zu dekorierte Funktion wird in eine separate Funktion platziert und verwenden dann diese Funktion, um das zu dekorierte vorhandene Funktionsobjekt zu wickeln. Wenn ein spezielles Verhalten ausgeführt werden muss, kann der aufrufende Code die Dekorationsfunktion selektiv und nacheinander verwenden, um das Objekt nach Bedarf einzuwickeln. Der Vorteil ist, dass es die Kernverantwortung der Klasse (Funktion) von der dekorativen Funktion unterscheidet.
Wir können Werkzeugfunktionen wie folgt definieren:
Function.prototype.before = function (vorfn) {var self = this; // Speichern Sie die Referenz der ursprünglichen Funktion return function () {// Gibt die Proxy -Funktion zurück, die die neue Funktion und die ursprüngliche Funktion vorfn.apply (diese Argumente) enthält; // Die neue Funktion ausführen und sicherstellen, dass dies nicht entführt wird, Return Self.Apply (dies, Argumente); // Führen Sie die ursprüngliche Funktion aus und geben Sie das Ausführungsergebnis der ursprünglichen Funktion zurück und stellen Sie sicher, dass dies nicht entführt wird}}; Function.Prototype.after = Funktion (Afterfn) {var self = this; return function () {var ret = self.apply (this, argumente); Afterfn.Apply (dies, Argumente); Rückkehr; }};Die Parameter vor dem Fn und Afterfn sind neue Funktionen (Dekoration hinzufügen), um neue Funktionen für die ursprüngliche Funktion zu erweitern. Der einzige Unterschied zwischen ihnen ist die unterschiedliche Ausführungsreihenfolge. Wenn Sie den Prototyp der Funktion nicht kontaminieren möchten, können Sie die folgende Methode verwenden:
var vor = function (fn, vorfn) {return function () {vorfn.apply (this, Argumente); Rückgabe fn.apply (this, Argumente); }}; var After = function (fn, Afterfn) {return function () {var ret = fn.apply (this, Argumente); Afterfn.Apply (dies, Argumente); Return Ret; }};Beispiel: Geben Sie einen Parameter in die HTTP -Anforderung ein, um CSRF -Angriffe zu verhindern
var ajax = function (type, url, param) {console.log (param); // AJAX -Anforderungscode ein wenig senden ...}; var prefn = function (type, url, param) {param.token = 'token';}; ajax = ajax.before (vorfn); 'Token'}Durch die dynamische Dekoration der Token -Parameter auf die AJAX -Funktion, anstatt die Parameter in der ursprünglichen Funktion direkt zu ändern, ist die AJAX -Funktion immer noch eine reine Funktion, die ihre Wiederverwendbarkeit verbessert und direkt in anderen Projekten ohne Änderungen verwendet werden kann.
Beispiel: Formularüberprüfung (trennen Sie die Überprüfungseingabe von dem mit dem Formular eingereichten Code und dekorieren Sie dann die Überprüfeingabefunktion dynamisch, bevor das Formular eingereicht wurde. Auf diese Weise können wir den Bestätigungseingangsteil in ein Plug-in-Formular für die Verwendung in verschiedenen Projekten schreiben.
// Überprüfen Sie die Eingabefunktion var validata = function () {if (userername.value === '') {alert ('Benutzername kann nicht leer sein'); false zurückgeben; } if (password.Value === '') {alert ('Passwort kann nicht leer sein'); false zurückgeben; }}; // Formulationsfunktion var formSubmit = function () {var param = {userername: userername.value, password: password.value}; AJAX ('http://xxx.com/login',param);}; formSubmit = formSubmit.before (validata); subleBtn.onclick = function () {formSubmit ();};Referenzen: "JavaScript -Muster" "JavaScript -Designmuster und Entwicklungspraxis"
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.