En JavaScript, les navigateurs, en particulier les navigateurs sur les appareils mobiles, all font de la mémoire très limitée, et comment enregistrer la mémoire est devenue une chose très significative. Un moyen efficace de sauvegarder la mémoire consiste à réduire le nombre d'objets.
Le mode Flyweight (Flyweight) exécute la technologie de partage pour soutenir efficacement un grand nombre d'objets à grain fin, en évitant les frais généraux d'un grand nombre de petites classes avec le même contenu (comme la consommation de mémoire), et permettant à chacun de partager une classe (métaclasse).
Le modèle d'encyclopédie peut éviter une grande quantité de frais généraux de classes très similaires. En programmation, il est parfois nécessaire de produire un grand nombre d'instances de classe à grains fins pour représenter les données. Si vous pouvez constater que ces instances ont essentiellement les mêmes frais généraux, à l'exception de quelques paramètres, vous pouvez réduire considérablement le nombre de classes qui doivent être instanciées. Si ces paramètres peuvent être déplacés en dehors de l'instance de classe et les transmettre lors de l'appel, le nombre d'instances individuelles peut être considérablement réduite par le partage.
Il existe deux façons d'appliquer le mode Encyclopedia en JavaScript. La première consiste à l'appliquer sur la couche de données, principalement à un grand nombre d'objets similaires en mémoire; La seconde consiste à l'appliquer sur la couche DOM, l'encyclopédie peut être utilisée sur le gestionnaire d'événements central pour éviter d'ajouter des poignées d'événements à chaque élément enfant du conteneur parent.
Il existe deux concepts importants dans le poids mouche - l'état interne intrinsèque et l'extrinsèque à l'état externe. L'état interne est géré via des méthodes internes dans l'objet, et les informations externes peuvent être supprimées ou enregistrées en externe.
Pour le dire franchement, il s'agit d'abord de pincer un modèle original, puis de produire des modèles spécifiques avec différentes caractéristiques en fonction de différentes occasions et environnements. De toute évidence, différents nouveaux objets doivent être générés ici, donc le mode d'usine apparaît souvent en mode Flyweight. L'état interne du poids mouche est utilisé pour partager. Flyweight Factory est responsable du maintien d'une piscine de poids mouche (pool de mode) pour stocker des objets à l'état interne.
Nous pouvons remplacer tous les objets par le même état interne par le même objet partagé, et pour créer un tel objet partagé, une méthode d'usine singleton est requise au lieu d'un constructeur normal. Cela peut suivre les objets individuels qui ont été instanciés, de sorte qu'un nouvel objet est créé uniquement si l'état interne de l'objet requis est différent de l'objet existant. L'état externe de l'objet est enregistré dans un objet Manager. Lorsque vous appelez la méthode de l'objet, le gestionnaire passera ces états externes sous forme de paramètres.
Enregistrez les données d'un objet dans deux objets différents (objet partagé, objet Manager)
1. Objet partagé (profitez de l'objet d'origine)
2. Méthode d'usine Singleton (créer un objet partagé)
3. Objet Manager (Gérer l'état externe)
Par exemple, un livre dans une bibliothèque peut être représenté par un objet, qui a de nombreux attributs.
var book = function (id, title, auteur, genre, pageCount, Publisherid, isbn, cachersdate, checkoutmember, duereturndate, disponibilité) {... // code d'initialisation} book.prototype = {getTitle: function () {return this.title; }, ... // Mettez à jour la méthode d'état de prêt UpdateCheckoutStatus: fonction (bookid, newstatus, checkoutDate, checkoutmember, newreturndate) {...}, // renouveler le prêt extensionCheckoutperiod: function (bookid, newreturndate) {...}, // it it expires iSpastDue (function (bookid) {...}}Le programme peut être bien au début, mais au fil du temps, les livres peuvent augmenter en grande quantité, et chaque type de livre a des versions et des quantités différentes, vous constaterez que le système devient de plus en plus lent. Des milliers d'objets de livre peuvent être imaginés en mémoire, et nous devons utiliser le mode Encyclopédie pour optimiser.
Nous pouvons diviser les données en deux types de données. Dans le même livre, les données liées aux objets de livre (titre, auteur, etc.) peuvent être attribuées aux propriétés internes, tandis que (CheckoutMember, duereturndate, etc.) peut être attribuée aux propriétés externes. De cette façon, le code suivant peut partager le même objet dans le même livre, car peu importe qui emprunte le livre, tant que le livre est le même livre, les informations de base sont les mêmes:
// Object partagé var book = function (title, auteur, genre, pageCount, publihserid, isbn) {this.title = title; this.author = auteur; this.genre = genre; this.pageCount = PageCount; this.publisherid = Publisherid; this.isbn = isbn;};Définissons une usine de base pour vérifier si l'objet du livre a été créé auparavant, retournez s'il y en a, et recréez et le stockez afin qu'il puisse continuer à accéder plus tard, ce qui garantit que nous ne créons qu'un seul objet pour chaque livre:
/ * Book Factory Singleton * / var bookFactory = (function () {var existantbooks = {}; return {CreateBook: function (title, auteur, genre, pageCount, PublisheRid, ISBN) {/ * Trouver s'il faut créer avant * / var existant = existant [ISBN]; if (existant) {return existant;} else {/ * si pas, créer * / VarBook) {return existant;} else {/ * si pas, créer * / VarBook) Livre (titre, auteur, genre, pageCount, Publisherid, ISBN);L'état externe est relativement simple. À l'exception du livre que nous avons encapsulé, tout le reste doit être géré ici:
/ * BookRecordManager singleton pour emprunter Management * / var bookRecordManager = (function () {var bookRecordDatabase = {}; return {/ * Ajouter un enregistrement d'emprunt * / addbookRecord: function (id, titre, auteur, genere, pageCount, publisherid, iSbn) BookFactory.CreateBook (Titre, auteur, Genre, PageCount, Publisherid, ISBN); CheckoutDate, CheckoutMember, NewReturndate) {var Record = BookRecordDatabase [BookId]; bookRecordDatabase [bookid] .DuereTurnDate = newReturndate;}, IspastDue: fonction (bookid) {var currentDate = new Date ();De cette façon, nous avons enregistré les mêmes informations du même livre dans un objet BookManager et enregistré une seule copie; Par rapport au code précédent, nous pouvons constater qu'il économise beaucoup de mémoire.
Pool d'objets
Object Pool est une autre solution d'optimisation des performances, qui présente certaines similitudes avec le mode Xiangyuan, mais ne sépare pas l'état interne et l'état externe.
Implémentation générale du pool d'objets:
var objectPoolFactory = fonction (createObjfn) {var objectPool = []; // Object Pool return {create: function () {// Récupérer var obj = objectPool.length === 0? createObjfn.Apply (this, arguments): objectPool.shift (); retour obj; }, rétabli: fonction (obj) {// récupérer objectPool.push (obj); }}};Utilisez maintenant ObjectPoolFactory pour créer un pool d'objets qui charge certains iframes:
var iframefactory = objectPoolFactory (function () {var iframe = document.createElement ('iframe'); document.body.appendChild (iframe); iframe.onload = function () {iframe.onload = null; // prévenir les bogues de la charge d'objet iframe iframefactory) }; return iframe;}); // appelle var iframe1 = iframefactory.create (); iframe1.src = 'http://www.qq.com';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.