Dans les langages traditionnels orientés objet, l'ajout de fonctions aux objets utilise souvent l'héritage, mais la méthode d'héritage peut apporter des problèmes: lorsque la classe parent change, toutes ses sous-classes changent en conséquence.
Lorsqu'un script JavaScript est en cours d'exécution, l'ajout d'un comportement dans un objet (ou sur son prototype) affecte toutes les instances de cet objet.
Le décorateur est une alternative à la mise en œuvre de l'héritage, qui ajoute de nouvelles fonctionnalités via la forme de méthodes surchargées. Ce modèle peut ajouter son propre comportement avant ou après le décorateur pour atteindre un objectif spécifique.
Le motif du décorateur est un moyen d'ajouter dynamiquement plus de fonctions aux fonctions existantes. Chaque fonction à décorer est placée dans une fonction distincte, puis utilisez cette fonction pour envelopper l'objet de fonction existant à décorer. Par conséquent, lorsque un comportement spécial doit être effectué, le code d'appel peut utiliser de manière sélective et séquentiellement la fonction de décoration pour envelopper l'objet au besoin. L'avantage est qu'il distingue les responsabilités de base de la classe (fonction) de la fonction décorative.
Nous pouvons définir les fonctions de l'outil comme suit:
Function.prototype.before = function (avantfn) {var self = this; // Enregistrer la référence de la fonction de retour de la fonction d'origine () {// renvoie la fonction proxy qui contient la nouvelle fonction et la fonction d'origine avantfn.Apply (this, arguments); // Exécuter la nouvelle fonction et s'assurer que ce n'est pas détourné de retour soi.Apply (ceci, arguments); // Exécutez la fonction d'origine et renvoyez le résultat d'exécution de la fonction d'origine et assurez-vous que cela n'est pas détourné}}; Function.prototype.after = function (AfterFn) {var self = this; return function () {var ret = self.Apply (this, arguments); AfterFn.Apply (ceci, arguments); retour retour; }};Les paramètres avant FN et AfterFN ici sont de nouvelles fonctions (ajouter de la décoration) pour étendre de nouvelles fonctions pour la fonction d'origine. La seule différence entre eux est l'ordre d'exécution différent. Si vous ne souhaitez pas contaminer le prototype de la fonction, vous pouvez utiliser la méthode suivante:
var avant = fonction (fn, avantfn) {return function () {beforefn.Apply (this, arguments); retour fn.apply (ceci, arguments); }}; var after = function (fn, afterfn) {return function () {var ret = fn.Apply (this, arguments); AfterFn.Apply (ceci, arguments); return ret; }};Exemple: mettez un paramètre dans la demande HTTP pour empêcher les attaques CSRF
var ajax = fonction (type, url, param) {console.log (param); //Send ajax request code a little...};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 les paramètres de jeton à la fonction AJAX, au lieu de modifier directement les paramètres de la fonction d'origine, la fonction AJAX est toujours une fonction pure, améliorant sa réutilisabilité, et elle peut être directement utilisée dans d'autres projets sans aucune modification.
Exemple: vérification du formulaire (séparez l'entrée de vérification du code soumis au formulaire, puis décorez dynamiquement la fonction d'entrée de vérification avant le formulaire soumis. De cette manière, nous pouvons écrire la pièce d'entrée de vérification dans un formulaire de plug-in à utiliser dans différents projets)
// Vérifiez la fonction d'entrée var validata = function () {if (username.value === '') {alert ('username ne peut pas être vide'); retourne false; } if (mot de passe.value === '') {alert ('mot de passe ne peut pas être vide'); retourne false; }}. ajax ('http://xxx.com/login',Param);}; formSubmit = formSubmit.before (validata); soumitbtn.onclick = function () {formSubmit ();};Références: "modèle javascript" "modèle de conception JavaScript et pratique de développement"
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.