The definition of javascript flyweight mode and detailed explanation of how to apply it with code examples-JS Tutorial-php.cn

The definition of javascript flyweight mode and detailed explanation of how to apply it with code examples

伊谢尔伦

Release： 2017-07-24 14:42:39

Original

1490 people have browsed it

The flyweight mode is a mode used for performance optimization. The core is to use sharing technology to effectively support a large number of fine-scale objects. In JavaScript, browsers, especially mobile browsers, do not allocate much memory, so how to save memory becomes a very meaningful thing. The flyweight mode is an optimization mode that trades time for space

In what scenarios is the flyweight mode used?

(1) A large number of similar objects are used in the program, resulting in a large memory overhead
(2) Most of the states of the objects can be changed to external states, and the external states are stripped off Later, a relatively small number of shared objects can be used to replace a large number of objects

How to apply the flyweight pattern?

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

Flyweight mode requires that the properties of the object be divided into internal state and external state.
The internal state is independent of the specific scene, usually does not change, 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.

Factory mode often appears in the flyweight mode. The internal state of Flyweight is used for sharing. The Flyweight factory is responsible for maintaining a Flyweight pool (mode pool) to store the objects of the internal state.

Disadvantages: If the number of objects is small, it may increase the system overhead and make the implementation more complex!

Example: File upload

var Upload = function(uploadType) {
  this.uploadType = uploadType;
}

/* 删除文件（内部状态） */
Upload.prototype.delFile = function(id) {
  uploadManger.setExternalState(id, this);  // 把当前id对应的外部状态都组装到共享对象中
  // 大于3000k提示
  if(this.fileSize < 3000) {
    return this.dom.parentNode.removeChild(this.dom);
  }
  if(window.confirm("确定要删除文件吗？" + this.fileName)) {
    return this.dom.parentNode.removeChild(this.dom);
  }
}

/** 工厂对象实例化 
 * 如果某种内部状态的共享对象已经被创建过，那么直接返回这个对象
 * 否则，创建一个新的对象
 */
var UploadFactory = (function() {
  var createdFlyWeightObjs = {};
  return {
    create: function(uploadType) {
      if(createdFlyWeightObjs[uploadType]) {
        return createdFlyWeightObjs[uploadType];
      }
      return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
    }
  };
})();

/* 管理器封装外部状态 */
var uploadManger = (function() {
  var uploadDatabase = {};

  return {
    add: function(id, uploadType, fileName, fileSize) {
      var flyWeightObj = UploadFactory.create(uploadType);
      var dom = document.createElement(&#39;p&#39;);
      dom.innerHTML = "<span>文件名称：" + fileName + "，文件大小：" + fileSize +"</span>"
             + "<button class=&#39;delFile&#39;>删除</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) {
        // 直接改变形参（新思路！！）
        flyWeightObj[i] = uploadData[i];
      }
    }
  };
})();

/*触发上传动作*/
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);
  }
};

/* 测试 */
startUpload("plugin", [
  {
    fileName: &#39;1.txt&#39;,
    fileSize: 1000
  },{
    fileName: &#39;2.txt&#39;,
    fileSize: 3000
  },{
    fileName: &#39;3.txt&#39;,
    fileSize: 5000
  }
]);
startUpload("flash", [
  {
    fileName: &#39;4.txt&#39;,
    fileSize: 1000
  },{
    fileName: &#39;5.txt&#39;,
    fileSize: 3000
  },{
    fileName: &#39;6.txt&#39;,
    fileSize: 5000
  }
]);

Copy after login

The above is the detailed content of The definition of javascript flyweight mode and detailed explanation of how to apply it with code examples. For more information, please follow other related articles on the PHP Chinese website!