Interprétation détaillée du modèle de poids mouche dans la programmation de modèles de conception JavaScript

Le modèle flyweight est le plus approprié pour résoudre les problèmes de performances causés par la création d'un grand nombre d'objets similaires. Cet article résumera l'utilisation du modèle flyweight dans la programmation de modèles de conception JavaScript, y compris des exemples d'utilisation lors des opérations DOM :

Le modèle de poids mouche est différent du modèle de conception général. Il est principalement utilisé pour optimiser les performances du programme. Il est le plus approprié pour résoudre les problèmes de performances causés par un grand nombre d'objets similaires. Le mode Flyweight améliore les performances des applications en analysant les objets de l'application et en les analysant en données intrinsèques et en données extrinsèques, réduisant ainsi le nombre d'objets.

Connaissances de base

Le mode Flyweight réduit le nombre d'objets en partageant un grand nombre d'objets à granularité fine, réduisant ainsi la mémoire des objets et améliorant les performances des applications. L'idée de base est de décomposer les composants d'objets similaires existants et de les développer en données intrinsèques partageables et en données extrinsèques non partageables. Nous appelons les objets de données intrinsèques des objets poids mouche. Habituellement, une classe d'usine est également nécessaire pour conserver les données internes.
En JS, le modèle flyweight se compose principalement des rôles suivants :
(1) Client : une classe utilisée pour appeler la fabrique de poids mouche pour obtenir des données intrinsèques, généralement les objets requis par l'application,
(2 ) Usine de poids mouche : une classe utilisée pour conserver les données de poids mouche
(3) Classe de poids mouche : une classe qui conserve les données internes

Mise en œuvre et application du modèle de poids mouche

Mise en œuvre générale

Prenons un exemple pour illustrer : Apple produit en masse des iPhones. La plupart des données de l'iPhone telles que le modèle et l'écran sont les mêmes, mais quelques parties des données sont les mêmes. pareil. Par exemple, la mémoire est divisée en 16G, 32G, etc. Avant d'utiliser le mode poids mouche, nous avons écrit le code comme suit :

function Iphone(model, screen, memory, SN) {
  this. model = model;
  this.screen = screen;
  this.memory = memory;
  this.SN = SN;
}
var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}

Dans ce code, un million d'iPhone sont créés, et chaque iPhone demande une mémoire indépendamment. Mais si nous regardons attentivement, nous pouvons voir que la plupart des iPhones sont similaires, sauf que la mémoire et le numéro de série sont différents. S'il s'agit d'un programme avec des exigences de performances relativement élevées, il faut envisager de l'optimiser.
Pour les programmes avec un grand nombre d'objets similaires, nous pouvons envisager d'utiliser le mode poids mouche pour l'optimiser. Nous avons analysé que la plupart des modèles, écrans et mémoires d'iPhone sont les mêmes, donc cette partie des données peut être partagée, qui est le poids mouche Les données intrinsèques du modèle définissent la classe de poids mouche comme suit :

function IphoneFlyweight(model, screen, memory) {
  this.model = model;
  this.screen = screen;
  this.memory = memory;
}

Nous définissons la classe de poids mouche de l'iPhone, qui comprend le modèle, l'écran et les données de mémoire. Nous avons également besoin d'une usine de poids mouche pour conserver ces données :

 var flyweightFactory = (function () {
  var iphones = {};
  return {
    get: function (model, screen, memory) {
      var key = model + screen + memory;
      if (!iphones[key]) {
        iphones[key] = new IphoneFlyweight(model, screen, memory);
      }
      return iphones[key];
    }
  };
})();

Dans cette usine, nous définissons un dictionnaire pour enregistrer les objets poids mouche, à condition qu'une méthode obtienne un Objet flyweight basé sur des paramètres. S'il existe dans le dictionnaire, il renvoie directement. Sinon, il crée un objet flyweight et le renvoie.
Ensuite, nous créons une classe client, qui est modifiée à partir de la classe iphone :

 function Iphone(model, screen, memory, SN) {
  this.flyweight = flyweightFactory.get(model, screen, memory);
  this.SN = SN;
}

Ensuite, nous la générons toujours comme avant Plusieurs iphones

var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}
console.log(phones);

La clé ici est this.flyweight = flyweightFactory.get(model, screen, memory) dans le constructeur de l'Iphone. Ce code obtient les données de poids mouche via l'usine de poids mouche. Dans l'usine de poids mouche, si un objet avec les mêmes données existe déjà, l'objet sera renvoyé directement. Plusieurs objets iPhone partagent cette partie des mêmes données, de sorte que les données similaires d'origine ont été. Utilisation de la mémoire considérablement réduite.

Application du mode poids mouche dans DOM

Une application typique du mode poids mouche est le fonctionnement des événements DOM. Le mécanisme d'événements DOM est divisé en bouillonnement d'événements et capture d'événements. Présentons brièvement les deux :
Bullage d'événement : l'événement lié commence à se déclencher à partir de l'élément le plus interne, puis remonte jusqu'à l'élément le plus externe.
Capture d'événement : l'événement lié commence à partir de l'élément le plus externe. pour déclencher puis passe à la couche la plus interne
Supposons que nous ayons une liste de menu en HTML

<ul class="menu">
  <li class="item">选项1</li>
  <li class="item">选项2</li>
  <li class="item">选项3</li>
  <li class="item">选项4</li>
  <li class="item">选项5</li>
  <li class="item">选项6</li>
</ul>

Cliquez sur l'élément de menu pour effectuer l'action correspondante opération , nous lions les événements via jQuery, en faisant généralement ceci :

$(".item").on("click", function () {
  console.log($(this).text());
})

Liez les événements à chaque élément de la liste et cliquez pour afficher le texte correspondant. Il n'y a pas de problème de cette manière pour le moment, mais s'il s'agit d'une très longue liste, surtout s'il s'agit d'une très longue liste sur le terminal mobile, il y aura des problèmes de performances, car chaque élément est lié à un événement et prend jusqu'à la mémoire. Mais ces gestionnaires d’événements sont en réalité très similaires, nous devons donc les optimiser.

$(".menu").on("click", ".item", function () {
  console.log($(this).text());
})

La liaison d'événements de cette manière peut réduire le nombre de gestionnaires d'événements. Cette méthode est appelée délégation d'événements, et elle utilise également les principes des poids mouches du modèle. . Le gestionnaire d'événements est la partie interne commune et le texte respectif de chaque élément de menu est la partie externe. Parlons brièvement du principe de la délégation d'événement : lorsque vous cliquez sur un élément de menu, l'événement passe de l'élément li à l'élément ul. Lorsque nous lions l'événement à ul, nous lions en fait un événement, puis utilisons la cible. dans le paramètre d'événement event pour déterminer sur quel élément a été cliqué, par exemple, le premier élément li de bas niveau, event.target est li, afin que vous puissiez obtenir l'élément spécifique sur lequel vous avez cliqué et effectuer différents traitements en fonction de différents éléments.

Résumé

Le mode Flyweight est un moyen d'optimiser les performances du programme. Il réduit le nombre d'objets en partageant des données communes pour optimiser le programme. Le mode Flyweight convient aux scénarios comportant un grand nombre d’objets similaires et des exigences de performances élevées. Étant donné que le mode poids mouche nécessite la séparation des données internes et externes, ce qui augmente la complexité logique du programme, il est recommandé d'utiliser le mode poids mouche uniquement lorsque des performances sont requises.

Avantages du mode poids mouche :
Il peut réduire les besoins en ressources des pages Web de plusieurs ordres de grandeur. Même si l’application du mode poids mouche ne peut pas réduire le nombre d’instances à une, vous pouvez quand même en bénéficier grandement.

Ce type de sauvegarde ne nécessite pas de modification importante du code d'origine. Après avoir créé le gestionnaire, l'usine et le poids mouche, la seule modification à apporter au code est de passer de l'instanciation directe de la classe cible à l'appel d'une méthode de l'objet gestionnaire.

Inconvénients du mode poids mouche :
S'il est utilisé à des endroits inutiles, le résultat sera préjudiciable à l'efficacité du code. Si ce mode optimise le code, il augmente également sa complexité, ce qui rend le débogage et la maintenance difficiles.

La raison pour laquelle cela gêne le débogage est qu'il y a désormais trois endroits possibles qui peuvent mal tourner : le directeur, l'usine et le poids mouche.

Cette optimisation rendra également la maintenance plus difficile. Au lieu d’une structure claire composée d’objets encapsulant des données, vous êtes désormais confronté à un ensemble de choses fragmentées et désordonnées. Les données sont enregistrées à au moins deux endroits. Il est préférable d'annoter les données internes et externes.

Cette optimisation ne doit être effectuée que lorsque cela est nécessaire. Un compromis doit être fait entre efficacité opérationnelle et maintenabilité. Si vous ne savez pas si vous devez utiliser le mode poids mouche, vous n'en avez probablement pas besoin. Le mode Flyweight convient aux situations où les ressources du système sont presque entièrement utilisées et où une certaine sorte d’optimisation est évidemment nécessaire.

Ce mode est particulièrement utile aux programmeurs Javascript car il peut être utilisé pour réduire le nombre d'éléments DOM utilisés sur une page web, sachant que ces éléments consomment beaucoup de mémoire. La combinaison de ce modèle avec des modèles organisationnels tels que le modèle Composite vous permet de développer des applications Web complexes et riches en fonctionnalités qui peuvent fonctionner correctement dans n'importe quel environnement Javascript moderne.

Occasions applicables du mode poids mouche :
Un grand nombre d'objets gourmands en ressources doivent être utilisés dans les pages Web. Si seulement quelques objets de ce type sont utilisés, cette optimisation n’est pas rentable.

Au moins une partie des données stockées dans l'objet peut être convertie en données externes. De plus, le stockage de ces données en dehors de l'objet devrait être relativement peu coûteux, sinon les implications de cette approche en termes de performances n'ont pratiquement aucun sens. Les objets contenant beaucoup de code de base et de contenu HTML peuvent être mieux adaptés à cette optimisation.

Une fois les données extrinsèques séparées, le nombre d'objets uniques est relativement faible.

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

Articles associés :

javascriptPlusieurs méthodes de définition de tableau (tutoriel graphique)

À propos javascriptCollection d'instructions de contrôle de flux (tutoriel image et texte)

Compréhension approfondie et utilisation pratique de la fonction javascript (Code ci-joint)

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!