Learning JavaScript Design Patterns _javascript Techniques

I. Definition

The flyweight mode is a model for performance optimization, and the core is the use of shared technology to effectively support a large number of fine-scale objects.
In JavaScript, browsers, especially mobile browsers, are not allocating as much memory, and how to save memory is a significant thing.
The element mode is a kind of optimization mode with time changing space

• Underwear Factory has 100 kinds of men's underwear, 100 of women's underwear, asked to take pictures of each kind of underwear. 200 plastic models are required if you do not use the usage mode, and you need only one model for both men and women.

What is the use of the element mode in the scenario?

(1) The use of a large number of similar objects in the program, resulting in a large memory overhead
(2) Most states of an object can become external, and after stripping the external state, a large number of objects can be replaced with relatively few shared objects

Third, how to apply the mode of the meta?

The first is applied on the data layer, mainly in the memory of a large number of similar objects;
The second applies to the DOM layer, which can be used on a central event manager to avoid attaching an event handle to each child element in the parent container.

The privilege mode requires that the attributes of an object be divided into internal state and external state .
The internal state is independent of the specific scene, usually not changed, and can be shared by some objects;
The external state depends on the specific scene and changes according to the scene, and the external state cannot be shared.

The factory pattern often appears in the Flyweight mode, where the internal state of the Flyweight is shared, and the factory is responsible for maintaining a Flyweight pool (pattern pool) to store the internal state of the object.

Disadvantages: A small number of objects, may increase the cost of the system, the complexity of achieving greater!

Four, example: File Upload

var Upload = function (uploadtype) {this.uploadtype = Uploadtype;}  /* Delete file (internal state) */Upload.prototype.delFile = function (id) {uploadmanger.setexternalstate (ID, this); The external state corresponding to the current ID is assembled into the shared object//greater than the 3000k hint if (This.filesize < 3000) {return This.dom.parentNode.removeChild (this.do
  m); } if (window.confirm) are you sure you want to delete the file?
  "+ This.filename)" {return this.dom.parentNode.removeChild (this.dom); /** Factory Object Instantiation * If a shared object of an internal state has been created, return directly to the object * Otherwise, create a new object/var Uploadfactory = (function () {var createdflyw
  Eightobjs = {}; return {create:function (uploadtype) {if (Createdflyweightobjs[uploadtype]) {return Createdflyweightob
      Js[uploadtype];
    return Createdflyweightobjs[uploadtype] = new Upload (uploadtype);
}
  };

})();

  /* Manager Encapsulation External state */var Uploadmanger = (function () {var uploaddatabase = {}; return {add:function (ID, Uploadtype, fileName, fileSize) {var flyweightobj = uploadfactory.create (Uploadtype)
      ; VaR dom = document.createelement (' div '); dom.innerhtml = "<span> file name:" + filename + ", File size:" + fileSize + "</span>" + "<button class= ' de

      Lfile ' > Delete </button> ';
      Dom.queryselector (". Delfile"). onclick = function () {flyweightobj.delfile (ID);
      };

      Document.body.appendChild (DOM);

      Uploaddatabase[id] = {filename:filename, filesize:filesize, dom:dom};
    return flyweightobj;
      }, Setexternalstate:function (ID, flyweightobj) {var uploaddata = Uploaddatabase[id]; for (var i in uploaddata) {//Direct change of formal parameters (new ideas!!)
      ) Flyweightobj[i] = Uploaddata[i];
}
    }
  };

})();
/* Trigger Upload action */var id = 0; Window.startupload = function (Uploadtype, files) {for (var i=0,file; file = files[i++];)
  {var uploadobj = Uploadmanger.add (++id, Uploadtype, File.filename, file.filesize);

}
};
 * * Test/startupload ("plugin", [{fileName: ' 1.txt ', filesize:1000},{   FileName: ' 2.txt ', filesize:3000},{fileName: ' 3.txt ', filesize:5000}]; 
    Startupload ("Flash", [{filename: ' 4.txt ', filesize:1000},{filename: ' 5.txt ', filesize:3000},{

 FileName: ' 6.txt ', filesize:5000}]);

V. Supplementary

(1) Direct change of formal parameter demo

Function F1 () {
  var obj = {a:1};
  F2 (obj);
  Console.log (obj);  {a:1, b:2}
}
function F2 (obj) {
  obj.b = 2;
}
F1 ();  

(2) object pooling, which is also a performance optimization scheme, has some similarities with the meta pattern, but it does not separate the internal and external state of the process.

var objectpoolfactory = function (CREATEOBJFN) {
  var objectpool = [];
  return {
    create:function () {
      var obj = objectpool.lenght = 0-createobjfn.apply (this, arguments): Objectpoo L.shift ();
      return obj;
    },
    recover:function () {
      objectpool.push (obj);
    }
  }

I hope this article will help you learn about JavaScript programming.