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

Cet article vous apporte du contenu sur les modèles de conception js : qu'est-ce que le modèle de poids mouche ? L'introduction du mode js flyweight 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.

Qu'est-ce que le mode poids mouche ?

Définition : Le mode Flyweight est un mode qui optimise les performances du programme. Son essence est de réduire le nombre d'objets créés.

Solution principale : Lorsqu'il y a un grand nombre d'objets, cela peut provoquer un débordement de mémoire. S'il y a la même demande métier, renvoyons directement les données déjà stockées. dans la mémoire. Certains objets ne peuvent pas être recréés.

Quand utiliser : 1. Il y a un grand nombre d'objets dans le système. 2. Ces objets consomment beaucoup de mémoire. 3. La plupart du statut de ces objets peut être externalisé. 4. Ces objets peuvent être divisés en plusieurs groupes selon leurs états intrinsèques. Lorsque les objets extrinsèques sont supprimés des objets, chaque groupe d'objets peut être remplacé par un objet. 5. Le système ne repose pas sur l'identité de ces objets, et ces objets sont indiscernables.

Comment résoudre : Utilisez le code d'identification unique pour juger s'il existe dans la mémoire, renvoyez l'objet identifié par le code d'identification unique.

Code clé : Utilisez des objets de hachage pour stocker ces objets.

Exemple d'application du mode poids mouche js : 1. Par exemple, une chaîne, si elle existe, renvoyez-la, sinon, créez une chaîne et enregistrez-la dans le pool de cache de chaînes. 2. Le pool de données de la base de données.

Avantages du mode js flyweight : Réduit considérablement la création d'objets, réduit la mémoire système et améliore l'efficacité.

Inconvénients du mode js flyweight : Augmente la complexité du système, nécessitant la séparation des états externes et internes, et l'état externe a une nature inhérente et ne devrait pas changer avec l'état interne Changer en fonction des changements, sinon cela provoquerait le chaos dans le système.

Scénarios d'utilisation du mode poids mouche js : 1. Le système possède un grand nombre d'objets similaires. 2. Scénarios nécessitant un pool de mémoire tampon.

Exemple du mode poids mouche JS :

Un commerçant possède 50 sortes de sous-vêtements pour hommes et 50 sortes de sous-vêtements pour femmes, et souhaite les exposer

Option 1 : Fabriquer 50 plastiques Prendre un modèle masculin et 50 modèles féminins en plastique et laissez-les les porter pour les exposer. Le code est le suivant :

const Model = function(gender, underwear) {
  this.gender = gender
  this.underwear = underwear
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

for (let i = 1; i < 51; i++) {
  const maleModel = new Model(&#39;male&#39;, `第${i}款衣服`)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const female = new Model(&#39;female&#39;, `第${i}款衣服`)
  female.takephoto()
}

Option 2 : Fabriquez 1 modèle masculin en plastique et 1 modèle féminin en plastique et essayez 50 styles de. sous-vêtements respectivement

const Model = function(gender) {
    this.gender = gender
}

Model.prototype.takephoto = function() {
    console.log(`${this.gender}穿着${this.underwear}`)
}

const maleModel = new Model('male')
const femaleModel = new Model('female')

for (let i = 1; i < 51; i++) {
    maleModel.underwear = `第${i}款衣服`
    maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
    femaleModel.underwear = `第${i}款衣服`
    femaleModel.takephoto()
}

La comparaison a révélé que : le plan 1 a créé 100 objets, le plan 2 n'a créé que 2 objets. Dans cette démo, le genre est un objet interne et les sous-vêtements sont un objet externe.

Bien sûr, dans la démo de l'option 2, d'autres améliorations peuvent être apportées :

1. Créez l'instance explicitement via le constructeur au début et utilisez le mode usine pour le mettre à niveau vers une génération Control

2. Ajouter manuellement des sous-vêtements sur l'instance n'est pas très élégant. Vous pouvez écrire une fonction de gestionnaire distincte en externe

const Model = function(gender) {
  this.gender = gender
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

const modelFactory = (function() { // 优化第一点
  const modelGender = {}
  return {
    createModel: function(gender) {
      if (modelGender[gender]) {
        return modelGender[gender]
      }
      return modelGender[gender] = new Model(gender)
    }
  }
}())

const modelManager = (function() {
  const modelObj = {}
  return {
    add: function(gender, i) {
      modelObj[i] = {
        underwear: `第${i}款衣服`
      }
      return modelFactory.createModel(gender)
    },
    copy: function(model, i) { // 优化第二点
      model.underwear = modelObj[i].underwear
    }
  }
}())

for (let i = 1; i < 51; i++) {
  const maleModel = modelManager.add(&#39;male&#39;, i)
  modelManager.copy(maleModel, i)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const femaleModel = modelManager.add(&#39;female&#39;, i)
  modelManager.copy(femaleModel, i)
  femaleModel.takephoto()
}

Recommandations associées :

modèle de conception js : quel est le modèle de combinaison ? Introduction au modèle de combinaison js

modèle de conception js : quel est le modèle de méthode de modèle ? Introduction au modèle de méthode de modèle 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!