introduire
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.
Et si vous appliquez le mode encyclopédie en JavaScript? Il y a deux façons. La première consiste à l'appliquer à la couche de données, principalement à un grand nombre d'objets similaires en mémoire; La seconde consiste à l'appliquer à la couche DOM, qui peut être utilisée sur le gestionnaire d'événements central pour éviter d'ajouter des manches d'événements à chaque élément enfant du conteneur parent.
Profitez de la couche de données
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.
Utilisez le mode de plaisir
Voyons que si le système utilise une bibliothèque de classe pour gérer tous les livres, les métadonnées de chaque livre sont provisoirement définies sur le contenu suivant:
La copie de code est la suivante:
IDENTIFIANT
Titre
Auteur
Genre
Nombre de pages
ID de l'éditeur
ISBN
Nous devons également définir l'heure et l'emprunteur de chaque livre, ainsi que la date de retour et s'il est disponible:
La copie de code est la suivante:
camionnette
à camion
duereturnded
disponibilité
Étant donné que l'objet livre est défini sur le code suivant, veuillez noter que le code n'a pas encore été optimisé:
La copie de code est la suivante:
var book = function (id, titre, auteur, genre, pageCount, Publisherid, isbn, cachersdate, camion-membre, dueRurnDate, disponibilité) {
this.id = id;
this.title = title;
this.author = auteur;
this.genre = genre;
this.pageCount = PageCount;
this.publisherid = Publisherid;
this.isbn = isbn;
this.CheckoutDate = CheckoutDate;
this.CheckoutMember = CheckoutMember;
this.duereTurnDate = duereturnDate;
this.availlabilité = disponibilité;
};
Book.prototype = {
gettitle: function () {
Renvoyez ce.title;
},
getAuthor: function () {
Renvoyez ce.auteur;
},
getisbn: function () {
Renvoyez ceci.isbn;
},
/ * D'autres méthodes Get ne seront pas affichées ici * /
// Mette à jour le statut de prêt
UpdateCheckoutStatus: Function (bookId, newstatus, checkoutdate, camion-noeud, newreturnDate) {
this.id = bookid;
this.availabilité = newstatus;
this.CheckoutDate = CheckoutDate;
this.CheckoutMember = CheckoutMember;
this.duereTurnDate = newreturnDate;
},
//renouveler
ExtendCheckoutPeriod: function (bookid, newreturnDate) {
this.id = bookid;
this.duereTurnDate = newreturnDate;
},
// est-il expiré
ISPASTDUE: fonction (bookid) {
var currentDate = new Date ();
return currentDate.getTime ()> Date.Parse (this.dueReturnDate);
}
};
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 internes et externes. Les données relatives 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 à des 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:
La copie de code est la suivante:
/ * Code d'optimisation du mode Xienyuan * /
var book = function (titre, auteur, genre, pageCount, Publisherid, isbn) {
this.title = title;
this.author = auteur;
this.genre = genre;
this.pageCount = PageCount;
this.publisherid = Publisherid;
this.isbn = isbn;
};
Définir l'usine de base
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:
La copie de code est la suivante:
/ * Réserver singleton d'usine * /
var bookFactory = (function () {
var existantbooks = {};
retourner{
createbook: function (title, auteur, genre, pageCount, Publisherid, isbn) {
/ * Recherchez si vous devez créer avant * /
var existant = existant books [ISBN];
if (existantbook) {
return existantbook;
}autre{
Sinon, créez-en un et enregistrez * /
var livre = nouveau livre (titre, auteur, genre, pageCount, Publisherid, ISBN);
existantbooks [ISBN] = livre;
livre de retour;
}
}
}
});
Gérer le statut externe
L'état externe est relativement simple. À l'exception du livre que nous avons encapsulé, tout le reste doit être géré ici:
La copie de code est la suivante:
/ * BookRecordManager Singleton pour emprunter la gestion * /
var bookRecordManager = (function () {
var bookRecordDatabase = {};
retourner{
/ * Ajouter un enregistrement d'emprunt du livre * /
AddBookRecord: Fonction (ID, titre, auteur, genre, PageCount, Publisherid, ISBN, CheckoutDate, CheckoutMember, duereturnDate, Disponibilité) {
var book = bookfactory.createbook (titre, auteur, genre, pageCount, Publisherid, isbn);
bookRecordDatabase [id] = {
Cocher
CheckoutDate: CheckoutDate,
duereturndate: duereturndate,
Disponibilité: disponibilité,
Livre: Livre;
};
},
UpdateCheckoutStatus: Function (bookid, newstatus, checkoutdate, camion-noeud, newreturnDate) {
var enregistre = bookRecordDatabase [bookid];
enregistre.Availabilité = newStatus;
enregistre.CheckoutDate = CheckoutDate;
record.CheckoutMember = CheckoutMember;
Record.DuereRurdate = newreTurnDate;
},
ExtendCheckoutPeriod: function (bookid, newreturnDate) {
bookRecordDatabase [bookid] .duereTurnDate = newReturnDate;
},
ISPASTDUE: fonction (bookid) {
var currentDate = new Date ();
return currentDate.getTime ()> date.parse (bookRecordDatabase [bookid] .guereRenTurdAd);
}
};
});
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.
Profitez du mode Yuan et DOM
Je ne dirai pas grand-chose sur l'incident DOM ici. Je crois que tout le monde le sait déjà. Donnons deux exemples.
Exemple 1: Gestion centralisée d'événements
Par exemple, si nous devons surveiller son événement de clic pour de nombreux éléments ou structures similaires (tels que les menus ou plusieurs LIS dans UL), nous devons lier des événements pour chaque élément. S'il y a très, de très nombreux éléments, les performances peuvent être imaginées. Combiné avec la connaissance des bulles, si un élément enfant est déclenché, l'événement bouillonnera à l'élément précédent après le déclenchement du déclencheur. Par conséquent, en utilisant cette fonctionnalité, nous pouvons utiliser le mode Encyclopédie, nous pouvons surveiller les événements d'événements sur les éléments parents de ces éléments similaires, puis juger quel élément enfant a un événement déclenché, puis effectuer d'autres opérations.
Ici, nous combinons la méthode Bind / Unbind de jQuery pour donner un exemple.
HTML:
La copie de code est la suivante:
<div id = "conteneur">
<div href = "#"> Plus d'informations (adresse)
<span>
Voici plus d'informations
</span> </div>
<div href = "#"> Plus d'informations (carte)
<span>
<iframe src = "http://www.map-generator.net/extmap.php?name=london&address=london%2c%20england&width=500...gt;" </ iframe>
</span>
</div>
</div>
Javascript:
La copie de code est la suivante:
StatManager = {
fly: function () {
var self = this;
$ ('# Container'). Unbind (). bind ("cliquez", fonction (e) {
var cible = $ (e.originalTarget || e.srcelement);
// déterminer quel élément enfant il s'agit
if (cible.is ("div.toggle")) {
self.Handleclick (cible);
}
});
},
handleclick: function (elem) {
elem.find ('span'). toggle ('lent');
}
});
Exemple 2: Application du mode encyclopédie pour améliorer les performances
Un autre exemple est toujours lié à jQuery. Généralement, nous utilisons des objets Element dans la fonction de rappel des événements. Nous utilisons souvent la forme de $ (ceci). En fait, il crée à plusieurs reprises un nouvel objet car cela dans la fonction de rappel est déjà l'élément DOM lui-même. Nous devons utiliser le code suivant:
La copie de code est la suivante:
$ ('div'). bind ('click', function () {
console.log ('vous avez cliqué:' + $ (this) .attr ('id'));
});
// Le code ci-dessus doit être évité et éviter de générer à nouveau des objets jQuery sur l'élément DOM, car vous pouvez directement utiliser l'élément DOM lui-même.
$ ('div'). bind ('click', function () {
console.log ('vous avez cliqué:' + this.id);
});
En fait, si nous devons utiliser la forme de $ (ceci), nous pouvons également implémenter notre propre version du modèle d'instruction unique, par exemple, nous pouvons implémenter une fonction comme jQuery.signle (ceci) pour renvoyer l'élément DOM lui-même:
La copie de code est la suivante:
jQuery.single = (fonction (o) {
var collection = jQuery ([1]);
return function (élément) {
// Mettez des éléments dans la collection
Collection [0] = élément;
// retour à la collection
Collection de retour;
};
});
Comment utiliser:
La copie de code est la suivante:
$ ('div'). bind ('click', function () {
var html = jQuery.single (this) .next (). html ();
console.log (html);
});
De cette façon, l'élément DOM lui-même est renvoyé tel quel et l'objet jQuery n'est pas créé.
Résumer
Le mode Flyweight est un mode qui améliore l'efficacité et les performances du programme, ce qui accélérera considérablement la vitesse d'exécution du programme. Il existe de nombreux scénarios d'application: par exemple, si vous souhaitez lire une série de chaînes d'une base de données, beaucoup de ces chaînes sont répétées, alors nous pouvons stocker ces chaînes dans la piscine de poids mouche (piscine).
Si une application utilise un grand nombre d'objets et que ces grands nombres d'objets provoquent un excellent stockage, vous devriez envisager d'utiliser le mode Encyclopedia; et la plupart des états d'objets peuvent être externes. Si l'état externe de l'objet est supprimé, de nombreux groupes d'objets peuvent être remplacés par relativement peu d'objets partagés. Pour le moment, vous pouvez envisager d'utiliser le mode Encyclopedia.