Modèle de décorateur JavaScript

Dans les langages traditionnels orientés objet, l'héritage est souvent utilisé pour ajouter des fonctionnalités aux objets, mais l'héritage peut poser des problèmes : lorsque la classe parent change, toutes ses sous-classes changent en conséquence.

Lorsqu'un script JavaScript est exécuté, l'ajout d'un comportement à un objet (ou à son prototype) affectera toutes les instances de l'objet

Decorator est une implémentation d'une alternative à. l'héritage, qui ajoute de nouvelles fonctionnalités sous la forme de méthodes surchargées. Ce modèle peut ajouter votre propre comportement avant ou après le décorateur pour atteindre un objectif spécifique.

Le modèle de décorateur est un moyen d'ajouter dynamiquement plus de fonctions aux fonctions existantes. Placez chaque fonction à décorer dans une fonction distincte, puis utilisez cette fonction pour envelopper la fonction à décorer. objets de fonction, donc lorsqu'un comportement spécial doit être effectué, le code appelant peut envelopper l'objet de manière sélective et séquentielle avec des fonctions décoratives selon les besoins. L'avantage est que les responsabilités essentielles de la classe (fonction) et la fonction de décoration sont séparées.

Nous pouvons définir les fonctions de l'outil comme suit :

Function.prototype.before = function (beforeFn) {
  var self = this; //保存原函数的引用
  return function () { //返回包含了新函数和原函数的代理函数
    beforeFn.apply(this,arguments); //执行新函数,且保证this不被劫持
    return self.apply(this,arguments); //执行原函数,并返回原函数的执行结果,并保证this不被劫持
  }
};
Function.prototype.after = function (afterFn) {
  var self = this;
  return function () {
    var ret = self.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

Les paramètres beforeFn et afterFn sont ici de nouvelles fonctions (ajout de décorations) pour étendre de nouvelles fonctions à la fonction d'origine. la différence est l’ordre d’exécution. Si vous ne souhaitez pas polluer le prototype de Fonction, vous pouvez utiliser la méthode suivante :

var before = function (fn, beforeFn) {
  return function () {
    beforeFn.apply(this,arguments);
    return fn.apply(this,arguments);
  }
};
var after = function (fn, afterFn) {
  return function () {
    var ret = fn.apply(this,arguments);
    afterFn.apply(this,arguments);
    return ret;
  }
};

Exemple : Ajouter un paramètre à la requête HTTP pour empêcher les attaques CSRF

var ajax = function (type, url, param) {
  console.log(param); //发送ajax请求代码略...
};
var beforeFn = function (type, url, param) {
  param.Token = 'Token';
};
ajax = ajax.before(beforeFn);
ajax('get','http://...com/userinfo',{name:'SuFa'});
//{ name: 'SuFa', Token: 'Token' }

En décorant dynamiquement la fonction ajax avec le paramètre Token au lieu de modifier les paramètres directement sur la fonction d'origine, cela garantit que la fonction ajax est toujours une fonction pure et améliore sa réutilisabilité. modification. Obtenez-le et utilisez-le dans d’autres projets.

Exemple : vérification du formulaire (séparez l'entrée de vérification et le code de soumission du formulaire, puis décorez dynamiquement la fonction d'entrée de vérification avant la soumission du formulaire. De cette façon, nous pouvons mettre la partie d'entrée de vérification écrite dans sous la forme d'un plug-in et utilisé dans différents projets)

//验证输入函数
var validata = function () {
  if(username.value === ''){
    alert('用户名不能为空');
    return false;
  }
  if(password.value === ''){
    alert('密码不能为空');
    return false;
  }
};
//表单提交函数
var formSubmit = function () {
  var param = {
    username: username.value,
    password: password.value
  };
  ajax('http://xxx.com/login',param);
};
 
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
  formSubmit();
};

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde le soutiendra. le site Web PHP chinois.

Pour plus d'articles liés au modèle de décorateur JavaScript, veuillez faire attention au site Web PHP chinois !