Summarizing the usage of the meta pattern in JavaScript design pattern Programming-basics

The meta pattern differs from the general design pattern in that it is mainly used to optimize the performance of the program, which is best suited for solving the performance problems caused by a large number of similar objects. The meta mode improves application performance by parsing an application's objects, resolving them to intrinsic and external data, and reducing the number of objects.

Basic knowledge

The element mode reduces the amount of objects by sharing a large number of fine-grained objects, thereby reducing the memory of the object and improving the performance of the application. The basic idea is to decompose the composition of the existing similar objects, expand them into the intrinsic data and the external data that can be shared, and we call the objects of the intrinsic data as the object of the privilege. Typically, a factory class is also required to maintain intrinsic data.
In JS, the mode of the privilege has the following main roles:
(1) Client: A class used to invoke the exclusive factory to obtain intrinsic data, usually an object required by the application.
(2) Privilege Factory: class for maintaining metadata
(3) Enjoy Meta class: the class that maintains the intrinsic data

Realization and application of the pattern of the privilege

General implementation

Let us give an example to illustrate: Apple mass production Iphone,iphone Most of the data, such as models, screens are the same, a small number of data such as the existence of 16g,32g and so on. Before using the pattern, we write the following code:

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));
}

In this code, 1 million iphone is created and each iphone has an independent application for one memory. But we can see that most of the iphone is similar, but the memory and serial number is not the same, if it is a high performance requirements of the program, we should consider to optimize it.
A large number of similar objects of the program, we can consider the use of the meta mode to optimize it, we analyzed most of the iphone model, screen, memory is the same, that this part of the data can be public, that is, enjoy the meta mode of the intrinsic data, the definition of the following categories:

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

We define the iphone's meta class, which contains three data for model, screen and memory. We also need an exclusive factory to maintain this data:

 var flyweightfactory = (function () {
  var iphones = {};
  return {
    get:function (model, screens, memory) {
      var key = model + screen + memory;
      if (!iphones[key]) {
        Iphones[key] = new Iphoneflyweight (model, screen, memory);
      }
      return Iphones[key];}}
();

In this factory, we define a dictionary to hold the object, provide a method to get the object based on the parameters, if there is a direct return in the dictionary, do not create a return.
Then we create a client class, which is modified from the iphone class:

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

And we're still creating multiple iphones like that.

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);

The key here is the This.flyweight = Flyweightfactory.get (model, screen, memory) inside the iphone constructor. This code is used to obtain metadata from the factory, and in the exclusive factory, if the same data already exist objects will return directly to the object, multiple iphone objects share this part of the same data, so the original similar data has been greatly reduced, reduce the footprint of memory.

The application of the mode of privilege in DOM

A typical application of the meta pattern is DOM event operations, where the DOM event mechanism is divided into event bubbling and event capture. Let's briefly introduce the two:
Event bubbling: The bound event triggers from the innermost element and bubbles to the outermost
Event capture: Bound events are triggered from the outermost element and then uploaded to the innermost
Let's say we have a menu list in HTML

<ul class= "Menu" >
  <li class= "item" > Option 1</li> <li class=
  "item" > Option 2</li>
  <li class= "Item" > Options 3</li>
  <li class= "item" > Option 4</li> <li class=
  "item" > Option 5 </li>
  <li class= "Item" > Options 6</li>
</ul>

Click on the menu item, do the appropriate action, we bind the event through jquery, usually do:

$ ('. Item '). On (' click ', Function () {
  Console.log ($ (this). text ());
})

To bind events to each list item, click to output the corresponding text. There's nothing wrong with that, but if it's a long list, especially if you're moving a particularly long list, there's a performance problem, because each item is bound to the event, and it takes up memory. But these event handlers are really similar and we need to optimize them.

$ (". Menu"). On ("click", ". Item", function () {
  Console.log ($ (this). text ());

By doing event binding in this way, you can reduce the number of event handlers, called event delegates, and the principle of using the element pattern. The event handler is the intrinsic part of the public, and the text of each menu item is the external part. Let's simply say the principle of the event delegate: Click menu items, events from the LI element bubbling to the UL element, we bind events to the UL, in fact, binding an event, and then through the event parameters inside the target to determine the specific click of what element, such as the lower first LI element, Event.target is Li, so you can get the specific click elements, you can according to different elements for different processing.

Summarize

The meta pattern is a means of optimizing program performance by sharing common data to reduce the number of objects to reach the optimizer. The pattern of the privilege is suitable for scenarios that have a large number of similar objects and require performance. Because the element mode needs to separate internal and external data, increase the logic complexity of the program, it is recommended that the use of the meta mode when the performance is required.

Benefits of the META mode:
the resources of the Web page can be reduced by several orders of magnitude. Even though the application of the meta mode cannot reduce the number of instances to one, you can still benefit a lot from it.

This savings does not require extensive modification of the original code. After you have created the manager, factory, and the dollar, you need to modify the code only to change from a direct instantiation of the target class to a method that invokes the manager object.

The disadvantages of the mode of enjoying the meta:
If you use it in an unnecessary place, the result is detrimental to the efficiency of your code. This pattern improves the complexity of the code while optimizing it, which can cause difficulties in debugging and maintenance.

The reason it interferes with debugging is that there are three things that can go wrong now: managers, factories, and dollars.

This optimization also makes maintenance more difficult. Now you're not dealing with a clear framework of objects that encapsulate data, but a bunch of broken and messy things. The data is stored in at least two places. The best annotation indicates intrinsic and external data.

This optimization should be done only when necessary. There must be a trade-off between operational efficiency and maintainability. If you're unsure if you need to use the meta pattern, you probably don't need it. The meta pattern is suitable for situations where system resources have been used almost and clearly require some sort of optimization.

This pattern is especially useful for JavaScript programmers because it can be used to reduce the number of DOM elements that are used on a Web page, knowing that these elements require a lot of memory. With the use of this pattern and the combination of patterns and other organizations can develop a rich and complex web application systems, they can run smoothly in any modern JavaScript environment.

The application of the privilege mode:
a large number of resource-intensive objects must be used in the Web page. If only a little of this type of object is used, this optimization is not cost-effective.

At least some of the data stored in the object can be converted to external data. In addition, the resources used to store the data outside the object should be relatively small, otherwise this approach to performance is meaningless. A large number of objects that contain basic code and HTML content may be more appropriate for this optimization.

After separating the external data, the number of unique objects is relatively small.