Le mode Xiangyuan est différent du mode de conception général. Il est principalement utilisé pour optimiser les performances du programme. Il est préférable de résoudre les problèmes de performances causés par un grand nombre d'objets similaires. Le modèle d'encyclopédie réduit le nombre d'objets et améliore ainsi les performances de l'application en analysant les objets de l'application et en les analysant en données intrinsèques et externes.
Connaissances de base
Le mode encyclopédie réduit le nombre d'objets en partageant un grand nombre d'objets à grain fin, réduisant ainsi la mémoire des objets et améliorant les performances des applications. L'idée de base est de décomposer la composition d'objets similaires existants et de les étendre en données internes partagées et des données externes non partagées. Nous appelons l'objet des données internes un objet Meta. Habituellement, une classe d'usine est également nécessaire pour maintenir les données intrinsèques.
Dans JS, le mode encyclopédie se compose principalement des caractères suivants:
(1) Client: une classe utilisée pour appeler l'usine de Xiangyuan pour obtenir des données intrinsèques, généralement l'objet requis par l'application.
(2) Factory de Xiangyuan: classe utilisée pour maintenir les données de Xiangyuan
(3) Profitez de la classe Yuan: une classe qui maintient les données internes
Implémentation et application du mode Xiangyuan
Mise en œuvre générale
Donnons un exemple pour illustrer: Apple Produit en masse iPhones. La plupart des données telles que les modèles et les écrans sont les mêmes, et quelques parties des données telles que la mémoire sont divisées en 16G, 32G, etc. Avant d'utiliser le mode Encyclopédie, nous écrivons le code comme suit:
fonction iPhone (modèle, écran, mémoire, sn) {ceci. modèle = modèle; this.screen = écran; this.memory = mémoire; this.sn = sn;} var téléphones = []; for (var i = 0; i <1000000; i ++) {var mémoire = i% 2 == 0? 16: 32; Phones.push (nouvel iPhone ("iPhone6s", 5.0, mémoire, i));}Dans ce code, un million d'iPhones sont créés et chaque iPhone s'applique indépendamment pour une mémoire. Mais lorsque nous regardons de près, nous pouvons voir que la plupart des iPhones sont similaires, sauf que la mémoire et les numéros de série sont différents. S'il s'agit d'un programme avec des exigences de performance élevées, nous devons envisager de l'optimiser.
Pour un grand nombre de programmes avec des objets similaires, nous pouvons envisager d'utiliser le mode Xiangyuan pour l'optimiser. Nous analysons que la plupart des modèles d'iPhone, des écrans et de la mémoire sont les mêmes, donc cette partie des données peut être utilisée à des fins publiques, qui sont les données internes en mode Xiangyuan. La définition de la classe Xiangyuan est la suivante:
fonction iPhoneflyweight (modèle, écran, mémoire) {this.model = modèle; this.screen = écran; this.memory = mémoire;}Nous définissons la classe de profit de l'iPhone, qui contient trois données: modèle, écran et mémoire. Nous avons également besoin d'une usine de Xiangyuan pour maintenir ces données:
var flyweightfactory = (function () {var iPhones = {}; return {get: function (modèle, écran, mémoire) {var key = modèle + screen + mémoire; if (! iphones [key]) {iphones [key] = new iphoneflyweight (modèle, écran, mémoire);} return iPhones [key];}};}) (););Dans cette usine, nous définissons un dictionnaire pour sauver l'objet sacrificiel, fournissons une méthode pour obtenir l'objet sacrificiel en fonction des paramètres, et s'il y a un sacrificiel, il sera retourné directement, et s'il n'y a pas de sacrificiel, il sera créé.
Ensuite, nous créons une classe client, qui est modifiée à partir de la classe iPhone:
fonction iPhone (modèle, écran, mémoire, sn) {this.flyweight = flyweightfactory.get (modèle, écran, mémoire); this.sn = sn;}Ensuite, nous générons toujours plusieurs iPhones comme entre les deux
var téléphones = []; for (var i = 0; i <1000000; i ++) {var memory = i% 2 == 0? 16: 32; Phones.push (nouvel iPhone ("iPhone6s", 5.0, mémoire, i));} console.log (téléphones);La clé ici est ceci.flyweight = flyweightfactory.get (modèle, écran, mémoire) dans le constructeur iPhone. Ce code obtient des données de Xiangyuan via l'usine de Xiangyuan. Dans l'usine Xiangyuan, si un objet avec les mêmes données existe déjà, il renverra directement l'objet. Plusieurs objets iPhone partagent cette partie des mêmes données, de sorte que les données similaires d'origine ont été considérablement réduites, réduisant l'utilisation de la mémoire.
Application de profiter du mode yuan dans DOM
Une application typique du mode Xiangyuan est le fonctionnement de l'événement DOM, et le mécanisme de l'événement DOM est divisé en bulles d'événements et capture d'événements. Présentons brièvement ces deux-là:
Bubble d'événement: L'événement lié commence à partir de l'élément le plus intérieur, puis les bulles vers la couche la plus externe
Capture de l'événement: L'événement lié commence à partir de l'élément le plus extérieur, puis passe à la couche la plus intérieure.
Supposons que nous ayons une liste de menu dans HTML
<ul> <li> Option 1 </li> <li> Option 2 </li> <li> Option 3 </li> <li> Option 4 </li> <li> Option 5 </li> <li> Option 6 </li> </ul>
Cliquez sur l'élément de menu pour effectuer l'opération correspondante. Nous lions les événements via jQuery, ce qui fait généralement:
$ (". item"). sur ("cliquez", fonction () {console.log ($ (this) .text ());})Bind Events pour chaque élément de liste et cliquez pour sortir le texte correspondant. Il n'y a pas de problème pour le moment, mais s'il s'agit d'une très longue liste, surtout s'il s'agit d'un téléphone mobile avec une liste particulièrement longue, il y aura des problèmes de performances, car chaque élément est lié aux événements et prend de la mémoire. Mais ces gestionnaires d'événements sont en fait très similaires, nous devons donc les optimiser.
$ (". menu"). sur ("cliquez", ".item", fonction () {console.log ($ (this) .text ());})De cette façon, le nombre de gestionnaires d'événements peut être réduit. Cette méthode est appelée délégation d'événements, qui utilise également le principe du modèle Xiangyuan. Le gestionnaire d'événements est une pièce interne commune et le texte de chaque élément de menu est une pièce externe. Parlons brièvement du principe de délégation de l'événement: cliquez sur l'élément de menu, et l'événement bouillonnera de l'élément Li à l'élément UL. Lorsque nous lions l'événement à UL, nous lions réellement un événement, puis utilisons la cible dans l'événement du paramètre de l'événement pour déterminer quel élément l'élément est. Par exemple, le premier élément Li au niveau bas, event.target est li. De cette façon, nous pouvons obtenir l'élément de clic spécifique et nous pouvons gérer différemment en fonction des différents éléments.
Résumer
Le mode encyclopédie est un moyen d'optimiser les performances du programme et de réduire le nombre d'objets en partageant des données publiques pour réaliser des programmes d'optimisation. Le mode encyclopédie convient aux scénarios où il existe un grand nombre d'objets similaires et d'exigences de performance. Étant donné que le mode Xiangyuan doit séparer les données internes et externes, elle augmente la complexité logique du programme, il est recommandé d'utiliser le mode Xiangyuan uniquement lorsqu'il existe des exigences de performance.
Les avantages de profiter du modèle Yuan:
La conformité des ressources des pages Web peut être réduite par les ordres de grandeur. Même si l'application du mode Xiangyuan ne peut pas réduire le nombre d'instances à une, vous pouvez toujours en bénéficier beaucoup.
Cette économie ne nécessite pas beaucoup de modification du code d'origine. Après avoir créé le gestionnaire, l'usine et le Xiangyuan, les modifications du code ne sont rien de plus que de changer directement de la classe cible pour appeler une méthode de l'objet Manager.
Inconvénients de profiter du mode yuan:
S'il est utilisé dans des endroits inutiles, le résultat endommagera réellement l'efficacité du code du code. Ce modèle optimise le code tout en augmentant sa complexité, ce qui peut entraîner des difficultés à déboguer et à maintenir.
Cela entrave le débogage car maintenant il y a trois erreurs possibles: le gestionnaire, l'usine et le Xiangyuan.
Cette optimisation peut également rendre la maintenance plus difficile. Maintenant, vous ne faites pas face à une architecture claire composée d'objets encapsulant des données, mais un tas de choses désordonnées. Les données sont enregistrées à au moins deux endroits. Il est préférable de commenter les données internes et les données externes.
Cette optimisation ne doit être effectuée que lorsque cela est nécessaire. Un compromis doit être fait entre l'efficacité opérationnelle et la maintenabilité. Si vous n'êtes pas sûr de savoir si vous devez utiliser le mode Encyclopédie, vous n'en avez probablement pas besoin. Le mode Xiangyuan convient aux occasions telles que les ressources système ont été utilisées presque et, évidemment, une sorte d'optimisation est nécessaire.
Ce modèle est particulièrement utile pour les programmeurs JavaScript car il peut être utilisé pour réduire le nombre d'éléments DOM à utiliser sur une page Web, sachant que ces éléments consomment beaucoup de mémoire. L'utilisation de ce modèle et du type organisationnel telles que les modèles de combinaison peut développer des systèmes d'applications Web complexes riches en fonctionnalités qui peuvent fonctionner en douceur dans tout environnement JavaScript moderne.
Occasions applicables pour le mode Xiangyuan:
Un grand nombre d'objets à forte intensité de ressources doivent être utilisés dans la page Web. Si seulement quelques-uns de ces objets sont utilisés, ce type d'optimisation n'est pas rentable.
Au moins une partie des données stockées dans l'objet peut être convertie en données externes. En outre, le stockage de ces données en dehors de l'objet devrait prendre relativement peu de ressources, sinon cette approche n'a pas de sens pour les conseils de performance. Le type d'objet qui contient une grande quantité de code de base et de contenu HTML peut être plus adapté à ce type d'optimisation.
Après avoir séparé les données externes, le nombre d'objets uniques est relativement faible.