So implementieren Sie AOP in JavaScript

Jetzt werde ich Ihnen eine Methode zur Implementierung von AOP in JavaScript (aspektorientierte Programmierung, Dekoratormuster) vorstellen, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich ist.

Was ist AOP?

Die Hauptfunktion von AOP (Aspektorientierte Programmierung) besteht darin, einige Funktionen zu extrahieren, die nichts mit dem Kerngeschäftslogikmodul zu tun haben. Diese Funktionen haben normalerweise nichts mit der Geschäftslogik zu tun Dazu gehören Protokollstatistiken und Sicherheitskontrolle, Ausnahmebehandlung usw. Nach dem Extrahieren dieser Funktionen werden sie dann durch „dynamisches Weben“ in das Geschäftslogikmodul integriert.

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 dazu die erweiterte Funktion .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();

Das Ausführungsergebnis lautet wie folgt:

Ich bin Verantwortlich für das Drucken der Zahlen 1 und Die beiden Funktionen, die die Zahl 3 drucken, werden über AOP dynamisch mit der Funktion func implantiert. 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 einiges für document.getElementById() Dekoration gemacht, das werden wir Führen Sie die Anweisung „alert(„1“) in Zukunft jedes Mal aus, wenn wir diese Methode aufrufen. Bitte beachten Sie jedoch, dass unsere Anweisung nicht in den Quellcode der Methode „document.getElementById()“ geschrieben wird, sondern nur darin enthalten ist Der Vorteil davon ist, dass wir einige neue Verhaltensweisen hinzufügen können, ohne den Quellcode der ursprünglichen Methode zu ändern. 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, die ursprüngliche Funktion intern zu transformieren. Wir müssen den Quellcode verstehen und dann Änderungen vornehmen.

Die Methode (2) 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 Zeit ausgeben, geben Sie zuerst die aktuelle Temperatur aus

(1) Methode, wir sind dabei Kapitel 1 Eine Anforderung hat den Code eines Kollegen bis zur Unkenntlichkeit verändert. Jetzt muss das Innere der Funktion neu verstanden und geändert werden (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).

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So schreiben Sie die Multiplikationstabelle mit JS

So implementieren Sie die HTML-Attributbindung in Angular4

Verwenden Sie Nodejs, um eine Verbindung zu MySQL herzustellen und grundlegende Vorgänge zu implementieren

So konfigurieren Sie Sass im Vue-Gerüst

Das obige ist der detaillierte Inhalt vonSo implementieren Sie AOP in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!