JavaScript-Implementierung von AOP-Beispielen

Die Hauptfunktion von AOP (Aspektorientierte Programmierung) besteht darin, einige Funktionen zu extrahieren, die nichts mit dem Kerngeschäftslogikmodul zu tun haben. Zu diesen Funktionen, die nichts mit der Geschäftslogik zu tun haben, gehören normalerweise Protokollstatistiken, Sicherheitskontrolle usw. Ausnahmebehandlung usw. Nach dem Extrahieren dieser Funktionen werden sie dann durch „dynamisches Weben“ in das Geschäftslogikmodul integriert. Dieser Artikel wird Ihnen eine Methode zur Implementierung von AOP in JavaScript (aspektorientierte Programmierung, Dekoratormuster) vorstellen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Welche Vorteile kann uns AOP bringen?

Der Vorteil von AOP besteht erstens darin, dass es das Geschäftslogikmodul rein und hochkohärent halten kann, und zweitens darin, dass es Funktionsmodule wie Protokollstatistiken problemlos wiederverwenden kann.

Wie implementiert man AOP in JavaScript?

Normalerweise bedeutet die Implementierung von AOP in JavaScript, eine Funktion dynamisch in eine andere Funktion einzubinden. Im Folgenden verwende ich ein wenig den erweiterten Function.prototype. Bitte schauen Sie sich den folgenden Code an:

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函数引用
  return function () { //返回包含了原函数和新函数的"代理函数"
   beforefn.apply(this, arguments); //执行新函数，修正this
   return _self.apply(this, arguments); //执行原函数
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

Die Ausführungsergebnisse sind wie folgt:

Ich habe die beiden Funktionen, die für das Drucken der Nummer 1 verantwortlich sind, eingefügt Drucken der Zahl 3 über AOP Die Methode implantiert dynamisch die Funktion func. Durch die Ausführung des obigen Codes sehen wir, dass die Konsole die Ausführungsergebnisse 1, 2 und 3 erfolgreich zurückgibt.

Diese Methode zur Verwendung von AOP zum Hinzufügen von Verantwortlichkeiten zu Funktionen ist auch eine ganz besondere und clevere Implementierung des Dekoratormusters in der JavaScript-Sprache. Probieren Sie vorher die Leistungsfähigkeit von Function.prototype. aus. Bitte sehen Sie sich den folgenden Code an:

Function.prototype.before = function (beforefn) {
  var __self = this; // 保存原函数的引用
  return function () { // 返回包含了原函数和新函数的"代理"函数
   beforefn.apply(this, arguments); // 执行新函数，且保证 this 不被劫持，新函数接受的参数 // 也会被原封不动地传入原函数，新函数在原函数之前执行
   return __self.apply(this, arguments); // 执行原函数并返回原函数的执行结果， 2 // 并且保证 this 不被劫持
  }
 }
 Function.prototype.after = function (afterfn) {
  var __self = this;
  return function () {
   var ret = __self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 document.getElementById = document.getElementById.before(function(){ alert (1);
 });
 var button = document.getElementById( 'button' );

Ausführungsergebnis:

Wir haben einige Dekorationen für document.getElementById() vorgenommen, bevor wir diese Methode jedes Mal aufrufen. Die Warnung(" 1")-Anweisung wird zuerst ausgeführt. Bitte beachten Sie jedoch, dass unsere Anweisung nicht im Quellcode der Methode document.getElementById() geschrieben, sondern nur außerhalb davon dekoriert ist. Der Vorteil besteht darin, dass wir einige neue Verhaltensweisen hinzufügen können die ursprüngliche Methode ohne Änderung des Quellcodes. Internationale Praxis zum Beispiel:

Mein Kollege hat eine Funktion geschrieben, die die aktuelle Uhrzeit ausgeben kann, und mein aktueller Bedarf besteht darin, das aktuelle Wetter und dann die aktuelle Uhrzeit auszugeben. Es gibt zwei Lösungen:

(1) Traditionelle Lösung: Nehmen Sie die Funktion Ihres Kollegen, suchen Sie seinen Code, der die Uhrzeit ausgibt, und fügen Sie den Code, der das aktuelle Wetter ausgibt, vor diesen Codes hinzu

(2) Dekorationsmusterlösung: Nehmen Sie die Funktion Ihres Kollegen, Sie müssen sich nicht den Quellcode ansehen, sondern nur seine Funktion dekorieren. Die Dekoration ist der Code, der das aktuelle Wetter ausgibt.

Beide Methoden lösen das Problem, aber ihre Ausgangspunkte sind völlig unterschiedlich:

(1) Die Methode besteht darin, das Innere der ursprünglichen Funktion zu transformieren. Anschließend müssen wir den Quellcode verstehen überarbeiten.

Die (2) Methode besteht darin, der ursprünglichen Funktion eine Schicht Schicht hinzuzufügen, und wir müssen uns überhaupt nicht um die interne Implementierung der ursprünglichen Funktion kümmern.

Jetzt gibt es eine neue Anforderung: Bevor Sie die aktuelle Uhrzeit ausgeben, geben Sie zuerst die aktuelle Temperatur aus

(1) Methode, in der ersten Anforderung haben wir den Code unserer Kollegen bis zur Unkenntlichkeit geändert. Jetzt müssen wir das Innere der Funktion neu verstehen und ändern (löschen Sie den Code, der das aktuelle Wetter ausgibt, und fügen Sie dann den Code hinzu, der die aktuelle Temperatur ausgibt).

(2) Methode, die ursprüngliche Funktion des Kollegen hat sich nicht geändert. Jetzt können wir nur noch die Funktion des Kollegen ändern (die aktuelle Temperatur ausgeben).

Verwandte Empfehlungen:

Anmerkungsbeispiele zur Implementierung von AOP im Frühjahr

Warum AOP verwenden

Sprechen Sie über AOP-Programmierung in Javascript

Das obige ist der detaillierte Inhalt vonJavaScript-Implementierung von AOP-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!