Explication détaillée des exemples de fonctions Decorator en JavaScript

Cet article présente principalement la fonction de décorateur JavaScript (Decorator), et analyse la fonction, l'implémentation et l'utilisation de la fonction de décorateur JavaScript (Decorator) sous forme d'exemples. Les amis dans le besoin peuvent se référer à cet article

L'exemple décrit la fonction décorateur Javascript (Decorator). Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La fonction Décorateur (Decorator) est utilisée pour ajouter dynamiquement certaines fonctions, responsabilités, etc. à l'objet pendant l'exécution. Par rapport à l'extension des fonctions des objets par héritage, les décorateurs sont plus flexibles. Premièrement, nous pouvons sélectionner dynamiquement un décorateur pour l'objet au lieu d'hériter de manière hardcore de l'objet pour implémenter un certain point de fonction. Deuxièmement : la méthode d'héritage peut conduire à un grand nombre de sous-classes, ce qui est un peu redondant juste pour ajouter un seul point de fonction.

Voici plusieurs exemples de fonctions de décorateur couramment utilisées. Veuillez consulter github pour les codes associés.

1 Ajouter dynamiquement une fonction d'écoute en charge

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 Fonction de pré-exécution et fonction de post-exécution

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');

Le résultat de l'exécution est imprimé sur la console comme suit :

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

3 Temps d'exécution de la fonction calcul

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);

Remarque : j'ai utilisé la syntaxe ES2015 (ES6) ici. Si vous êtes intéressé, vous pouvez consulter le contenu connexe précédent sur ES6.

Bien entendu, les fonctions du décorateur ne se limitent pas à ces usages. Le framework Nodejs Koa utilisé par Tmall est basé sur les fonctions de décorateur et ES2015 Generator. J'espère que cet article pourra vous servir de point de départ pour écrire du code JS plus élégant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!