Comment implémenter AOP en JavaScript

Maintenant, je vais partager avec vous une méthode d'implémentation d'AOP en JavaScript (programmation orientée aspect, modèle décorateur). Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Qu'est-ce que l'AOP ?

La fonction principale de l'AOP (Aspect Oriented Programming) est d'extraire certaines fonctions qui n'ont rien à voir avec le module de logique métier de base. Ces fonctions qui n'ont généralement rien à voir avec la logique métier. inclure les statistiques de journaux et le contrôle de sécurité, la gestion des exceptions, etc. Après avoir extrait ces fonctions, elles sont ensuite intégrées au module de logique métier par « tissage dynamique ».

Quels bénéfices l'AOP peut-elle nous apporter ?

L'avantage d'AOP est d'une part qu'il peut maintenir la pureté et la haute cohésion des modules de logique métier, et d'autre part qu'il peut facilement réutiliser des modules fonctionnels tels que les statistiques de journalisation.

Comment implémenter AOP en JavaScript ?

Habituellement, implémenter AOP en JavaScript signifie "tisser dynamiquement" une fonction dans une autre fonction. Ci-dessous, j'utilise une fonction étendue .prototype pour ce faire. Veuillez regarder le code suivant :

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

Le résultat de l'exécution est le suivant :

Je suis responsable de l'impression des nombres. Les deux fonctions 1 et impression du numéro 3 sont implantées dynamiquement dans la fonction func via AOP. En exécutant le code ci-dessus, nous voyons que la console renvoie avec succès les résultats d'exécution 1, 2 et 3.

Cette méthode d'utilisation d'AOP pour ajouter des responsabilités aux fonctions est également une implémentation très spéciale et intelligente du modèle de décorateur dans le langage JavaScript. Essayons la puissance de Function.prototype. Avant, veuillez consulter le code suivant :

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

Résultat de l'exécution :

Nous le faisons pour document.getElementById() Avec certains décorations, nous exécuterons l'instruction alert("1") chaque fois que nous appellerons cette méthode à l'avenir. Cependant, veuillez noter que notre instruction n'est pas écrite dans le code source de la méthode document.getElementById(), mais seulement l'avantage. L'avantage d'ajouter des décorations à son extérieur est que nous pouvons lui ajouter de nouveaux comportements sans changer le code source de la méthode d'origine. Pratique internationale, par exemple :

Mon collègue a écrit une fonction qui peut afficher l'heure actuelle, et mon besoin actuel est d'afficher la météo actuelle puis l'heure actuelle. Il existe deux solutions :

(1) Solution traditionnelle : Prenez la fonction de votre collègue, trouvez son code qui sort l'heure, et ajoutez le code qui sort la météo actuelle avant ces codes

(2) Solution motif décorateur : Prenez la fonction de votre collègue, vous n'avez pas besoin de regarder son code source, décorez simplement sa fonction. La décoration est le code qui affiche la météo actuelle.

Les deux méthodes résolvent le problème, mais leurs points de départ sont complètement différents :

(1) La méthode consiste à transformer la fonction d'origine en interne, nous devons comprendre le code source puis apporter des modifications.

La méthode (2) consiste à ajouter une couche de couche à la fonction d'origine, et nous n'avons pas du tout à nous soucier de l'implémentation interne de la fonction d'origine.

Maintenant, il y a une nouvelle exigence : avant de sortir l'heure actuelle, sortez d'abord la température actuelle

(1) Méthode, nous sommes dans Chapitre 1 Une exigence a changé le code d'un collègue au point de le rendre méconnaissable, et il est maintenant nécessaire de re-comprendre l'intérieur de la fonction et de le modifier (supprimer le code qui produit la météo actuelle, puis ajouter le code qui produit la température actuelle) .

(2) méthode, la fonction d'origine du collègue n'a pas changé. Maintenant, nous pouvons simplement changer la fonction du collègue (sortir la température actuelle).

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment écrire la table de multiplication en utilisant JS

Comment implémenter la liaison d'attribut HTML dans Angular4

Utilisez Nodejs pour vous connecter à MySQL afin d'implémenter des opérations de base

Comment configurer Sass dans Vue Scaffolding

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!