Detaillierte Erläuterung der Funktions-Decorator-Beispiele in JavaScript

In diesem Artikel wird hauptsächlich die JavaScript-Dekoratorfunktion (Decorator) vorgestellt und die Funktion, Implementierung und Verwendung der JavaScript-Dekoratorfunktion (Decorator) anhand von Beispielen analysiert. Freunde in Not können sich auf diesen Artikel beziehen

Das Beispiel beschreibt die Javascript-Dekoratorfunktion (Decorator). Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Decorator-Funktion (Decorator) wird verwendet, um dem Objekt während der Laufzeit dynamisch bestimmte Funktionen, Verantwortlichkeiten usw. hinzuzufügen. Im Vergleich zur Erweiterung der Funktionen von Objekten durch Vererbung sind Dekoratoren flexibler. Erstens können wir einen Dekorator für das Objekt dynamisch auswählen, anstatt das Objekt hart zu erben, um einen bestimmten Funktionspunkt zu implementieren. Zweitens: Die Vererbungsmethode kann zu einer großen Anzahl von Unterklassen führen, was etwas überflüssig ist, nur um einen einzelnen Funktionspunkt hinzuzufügen.

Einige häufig verwendete Beispiele für Dekoratorfunktionen finden Sie unten. Bitte überprüfen Sie Github auf entsprechende Codes.

1 Onload-Listening-Funktion dynamisch hinzufügen

function addLoadEvent(fn) {
  var oldEvent = window.onload;
  if(typeof window.onload != 'function') {
    window.onload = fn;
  }else {
    window.onload = function() {
      oldEvent();
      fn();
    };
  }
}
function fn1() {
  console.log('onloadFunc 1');
}
function fn2() {
  console.log('onloadFunc 2');
}
function fn3() {
  console.log('onloadFunc 3');
}
addLoadEvent(fn1);
addLoadEvent(fn2);
addLoadEvent(fn3);

2 Funktion vor und nach der Ausführung

Function.prototype.before = function(beforfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    beforfunc.apply(this, innerArgs);
    self.apply(this, outerArgs);
  };
};
Function.prototype.after = function(afterfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    self.apply(this, outerArgs);
    afterfunc.apply(this, innerArgs);
  };
};
var func = function(name){
  console.log('I am ' + name);
};
var beforefunc = function(age){
  console.log('I am ' + age + ' years old');
};
var afterfunc = function(gender){
  console.log('I am a ' + gender);
};
var beforeFunc = func.before(beforefunc, 'Andy');
var afterFunc = func.after(afterfunc, 'Andy');
beforeFunc('12');
afterFunc('boy');

Das Ausführungsergebnis wird wie folgt auf der Konsole gedruckt:

I am 12 years old
I am Andy
I am Andy
I am a boy

3 Funktionsausführungszeit Berechnung

function log(func){
  return function(...args){
    const start = Date.now();
    let result = func(...args);
    const used = Date.now() - start;
    console.log(`call ${func.name} (${args}) used ${used} ms.`);
    return result;
  };
}
function calculate(times){
  let sum = 0;
  let i = 1;
  while(i < times){
    sum += i;
    i++;
  }
  return sum;
}
runCalculate = log(calculate);
let result = runCalculate(100000);
console.log(result);

Hinweis: Ich habe hier die Syntax von ES2015 (ES6) verwendet. Wenn Sie interessiert sind, können Sie sich die vorherigen verwandten Inhalte zu ES6 ansehen.

Natürlich sind Dekorationsfunktionen nicht auf diese Verwendungszwecke beschränkt. Das von Tmall verwendete Nodejs-Framework Koa basiert auf Decorator-Funktionen und dem ES2015-Generator. Ich hoffe, dieser Artikel kann Ihnen als Ausgangspunkt für das Schreiben eleganterer JS-Codes dienen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktions-Decorator-Beispiele in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!