JavaScript-Dekoratormuster

In herkömmlichen objektorientierten Sprachen wird die Vererbung häufig verwendet, um Objekten Funktionalität hinzuzufügen. Die Vererbung kann jedoch Probleme verursachen: Wenn sich die übergeordnete Klasse ändert, ändern sich alle ihre Unterklassen entsprechend.

Wenn ein JavaScript-Skript ausgeführt wird, wirkt sich das Hinzufügen von Verhalten zu einem Objekt (oder seinem Prototyp) auf alle Instanzen des Objekts aus.

Decorator ist eine Alternative zu Vererbung, die neue Funktionen in Form überladener Methoden hinzufügt. Dieses Muster kann Ihr eigenes Verhalten vor oder nach dem Dekorator hinzufügen, um einen bestimmten Zweck zu erreichen.

Das Dekoratormuster ist eine Möglichkeit, dynamisch weitere Funktionen zu vorhandenen Funktionen hinzuzufügen. Fügen Sie jede zu dekorierende Funktion in eine separate Funktion ein und verwenden Sie diese Funktion, um die zu dekorierende Funktion zu umschließen Funktionsobjekte. Wenn also ein spezielles Verhalten ausgeführt werden muss, kann der aufrufende Code das Objekt nach Bedarf selektiv und sequentiell mit dekorativen Funktionen umschließen. Der Vorteil besteht darin, dass die Kernaufgaben der Klasse (Funktion) und der Dekorationsfunktion getrennt sind.

Wir können Werkzeugfunktionen wie folgt definieren:

Function.prototype.before = function (beforeFn) {
  var self = this; //保存原函数的引用
  return function () { //返回包含了新函数和原函数的代理函数
    beforeFn.apply(this,arguments); //执行新函数,且保证this不被劫持
    return self.apply(this,arguments); //执行原函数,并返回原函数的执行结果,并保证this不被劫持
  }
};
Function.prototype.after = function (afterFn) {
  var self = this;
  return function () {
    var ret = self.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

Die Parameter beforeFn und afterFn sind hier neue Funktionen (Hinzufügen von Dekorationen), um neue Funktionen zur ursprünglichen Funktion zu erweitern Der Unterschied liegt in der Reihenfolge der Ausführung. Wenn Sie den Funktionsprototyp nicht verunreinigen möchten, können Sie die folgende Methode verwenden:

var before = function (fn, beforeFn) {
  return function () {
    beforeFn.apply(this,arguments);
    return fn.apply(this,arguments);
  }
};
var after = function (fn, afterFn) {
  return function () {
    var ret = fn.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

Beispiel: Fügen Sie der HTTP-Anfrage einen Parameter hinzu, um CSRF-Angriffe zu verhindern

var ajax = function (type, url, param) {
  console.log(param); //发送ajax请求代码略...
};
var beforeFn = function (type, url, param) {
  param.Token = 'Token';
};
ajax = ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{ name: 'SuFa', Token: 'Token' }

Durch die dynamische Dekoration der Ajax-Funktion mit dem Token-Parameter, anstatt die Parameter direkt an der Originalfunktion zu ändern, wird sichergestellt, dass die Ajax-Funktion weiterhin eine reine Funktion ist und ihre Wiederverwendbarkeit verbessert wird Modifikation. Holen Sie es sich und verwenden Sie es in anderen Projekten.

Beispiel: Formularüberprüfung (trennen Sie die Überprüfungseingabe und den Formularübermittlungscode und dekorieren Sie dann die Überprüfungseingabefunktion dynamisch, bevor das Formular gesendet wird. Auf diese Weise können wir den Überprüfungseingabeteil einfügen. Eingeschrieben (in Form eines Plug-ins und in verschiedenen Projekten verwendet)

//验证输入函数
var validata = function () {
  if(username.value === ''){
    alert('用户名不能为空');
    return false;
  }
  if(password.value === ''){
    alert('密码不能为空');
    return false;
  }
};
//表单提交函数
var formSubmit = function () {
  var param = {
    username: username.value,
    password: password.value
  };
  ajax('http://xxx.com/login',param);
};
 
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
  formSubmit();
};

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird, und ich hoffe auch, dass jeder ihn unterstützt die chinesische PHP-Website.

Weitere Artikel zum JavaScript-Decorator-Muster finden Sie auf der chinesischen PHP-Website!