js design patterns : qu'est-ce que le modèle décorateur ? Introduction au modèle de décorateur js

Cet article vous apporte du contenu sur les modèles de conception js : Qu'est-ce que le modèle décorateur ? L'introduction du mode décorateur js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Quel est le motif décorateur ?

Définition : Ajouter dynamiquement des responsabilités supplémentaires à un objet. En termes d'ajout de fonctionnalités, le modèle de décorateur est plus flexible que la génération de sous-classes.

Solution principale : Généralement, nous utilisons souvent l'héritage pour étendre une classe. Puisque l'héritage introduit des fonctionnalités statiques dans la classe, et à mesure que les fonctions d'extension augmentent, la sous-classe sera considérablement étendue.

Quand utiliser : Étendez une classe sans ajouter de nombreuses sous-classes.

Comment résoudre : Divisez les responsabilités fonctionnelles spécifiques et héritez du modèle du décorateur.

Exemple d'application de modèle de décorateur JS : 1. Sun Wukong a 72 transformations Lorsqu'il devient un "temple", il est toujours un singe à la base, mais il a le pouvoir d'un temple. . Fonction. 2. Un tableau peut être accroché au mur, qu'il ait ou non un cadre, mais il a généralement un cadre et le cadre est en fait accroché au mur. Avant d'être accroché au mur, le tableau peut être vitré et encadré ; le tableau, le verre et le cadre forment alors un seul objet.

Avantages du modèle décorateur js : La classe de décoration et la classe décorée peuvent se développer indépendamment sans être couplées l'une à l'autre. Le modèle de décoration est un modèle alternatif à l'héritage. étendre dynamiquement une fonction de classe d’implémentation.

Inconvénients du mode décorateur js : La décoration multicouche est plus compliquée.

Scénarios d'utilisation du mode décorateur js : 1. Étendre les fonctionnalités d'une classe. 2. Ajoutez dynamiquement des fonctions et annulez-les dynamiquement.

Remarque : peut remplacer l'héritage.

Exemple de motif de décorateur JS

Exemple dans la vie : quand il fait froid, ajoutez des vêtements pour rester au chaud ; quand il fait chaud, enlevez votre manteau de manière éclatante Le charme ; de la décoration permet d'enfiler et d'enlever les vêtements de manière dynamique selon les changements de temps.

let wear = function() {
  console.log('穿上第一件衣服')
}

const _wear1 = wear

wear = function() {
  _wear1()
  console.log('穿上第二件衣服')
}

const _wear2 = wear

wear = function() {
  _wear2()
  console.log('穿上第三件衣服')
}

wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

Cette méthode présente les inconvénients suivants : 1 : Les variables temporaires deviendront de plus en plus nombreuses ; 2 : Ce pointeur peut parfois être erroné

Fonction de décoration AOP

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(this, arguments)
    return self.apply(this, arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(this, arguments)
    return fn.apply(this, arguments)
  }
}

Utilisez le code postal pour expérimenter la démo ci-dessus de port de vêtements,

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

Mais cela pollue parfois la fonction native, vous pouvez apporter quelques modifications

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

Recommandations associées :

modèle de conception js : Qu'est-ce que le modèle médiateur ? Introduction au modèle de médiateur js

modèle de conception js : qu'est-ce que le modèle de chaîne de responsabilité ? Introduction au modèle de chaîne de responsabilité js

modèle de conception js : qu'est-ce que le modèle de poids mouche ? Introduction au mode poids mouche js

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!