Maison > interface Web > js tutoriel > Explication détaillée des exemples de fonctions Decorator en JavaScript

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

零下一度
Libérer: 2017-04-18 11:03:02
original
1698 Les gens l'ont consulté

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);
Copier après la connexion

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');
Copier après la connexion
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
Copier après la connexion
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);
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal