|
|
Posted on 7/30/2018 10:30:45 AM
|
|
|
Introduction
Flyweight mode effectively supports a large number of fine-grained objects by running sharing technology, avoiding the overhead of a large number of small classes with the same content (such as consuming memory), and allowing everyone to share a class (meta-class).
In programming, it is sometimes necessary to produce a large number of fine-grained class instances to represent data, and if you can find that these instances have basically the same overhead except for a few parameters, the number of classes that need to be instantiated can be greatly reduced. If you can move those parameters outside the class instance and pass them in when the method is called, you can greatly reduce the number of individual instances by sharing.
So what if you apply the meta mode in JavaScript? There are two ways, the first is applied to the data layer, mainly to a large number of similar objects in memory; The second is applied to the DOM layer, which can be used on the central event manager to avoid attaching event handles to each child element in the parent container.
Enjoy metaverse and data layers
There are two important concepts in Flyweight - internal state intrinsic and external state extrinsic, internal state is managed in the object through internal methods, and external information can be deleted or saved externally.
To put it bluntly, it is to first pinch an original model, and then with different occasions and environments, and then produce specific models with their own characteristics, obviously, different new objects need to be generated here, so the factory mode often appears in the Flyweight mode, the internal state of the Flyweight is used to share, and the Flyweight factory is responsible for maintaining a Flyweight pool (pattern pool) to store the objects of the internal state.
Use the Yuanyuan mode
Let's demonstrate that if we had a library to manage all the books, the metadata for each book would tentatively look like this:
ID
Title
Author
Genre
Page count
Publisher ID
ISBN
We also need to define when and by whom each book was checked out, as well as the return date and availability:
checkoutDate
checkoutMember
dueReturnDate
availability
Because the book object is set to the following code, note that the code has not been optimized yet:
The program may be fine at first, but over time, the number of books may increase in large quantities, and each book has a different version and quantity, and you will find that the system is getting slower and slower. Thousands of book objects in memory can be imagined, and we need to optimize them with the sharing mode.
We can divide the data into two types of data: internal and external, and the data related to the book object (title, author, etc.) can be attributed to internal attributes, while (checkoutMember, dueReturnDate, etc.) can be attributed to external attributes. In this way, the following code can share the same object in the same book, because no matter who borrows the book, as long as the book is the same book, the basic information is the same:
Define the basic factory
Let's define a basic factory to check if the object of the book was created before, return if there is, and recreate and store it if not, which ensures that we only create an object for each type of book:
Manage external status
The external state is relatively simple, except for the book we encapsulated, everything else needs to be managed here:
In this way, we can save the same information of the same book in a bookmanager object, and only one copy; Compared with the previous code, it can be found that a lot of memory is saved.
Enjoy the meta mode and DOM
I won't say much about the DOM bubbling incident here, I believe everyone already knows, let's give two examples.
Example 1: Centralized Incident Management
For example, if we have many similar types of elements or structures (such as menus, or multiple li in ul) that need to monitor his click event, then we need to bind each more element for event binding, if there are very, very many elements, then the performance can be imagined, and combined with the knowledge of bubbling, if any child element has an event trigger, then the event will bubble to the higher element after triggering, so using this feature, we can use the Xiangyuan mode. We can monitor the events of the parent elements of these similar elements, and then determine which child element has an event triggered before proceeding with further operations.
Here we will combine jQuery's bind/unbind methods as an example.
HTML:
JavaScript:
Example 2: Apply the Xiangyuan mode to improve performance
Another example, still related to jQuery, generally we use the element object in the callback function of the event, we often use the form $(this), in fact, it repeatedly creates a new object, because this in the callback function is already the DOM element itself, we must use the following code:
In fact, if we have to use something like $(this), we can also implement our own version of the single-instance pattern, for example, we can implement a function like jQuery.signle(this) to return the DOM element itself:
How to use:
This returns the DOM element itself as it is, without creating a jQuery object.
summary
Flyweight mode is a mode that improves the efficiency and performance of the program, which will greatly speed up the running speed of the program. There are many applications: for example, if you want to read a series of strings from a database, many of which are duplicates, then we can store these strings in a Flyweight pool.
If an application uses a large number of objects, and these large number of objects cause a lot of storage happiness, it should consider using the sharing mode; If you delete the external state of the object, you can replace many groups of objects with relatively few shared objects, and you can consider using the Xiangyuan mode.
Reference address:http://www.addyosmani.com/resour ... ok/#detailflyweight
|
Previous:Recommend 3 websites to find icon iconsNext:NumberOfPendingMessages, MessagesEnqueued, Messag...
|
