Die Definition des Javascript-Fliegengewichtsmodus und eine detaillierte Erklärung seiner Anwendung anhand von Codebeispielen

Der Fliegengewichtsmodus ist ein Modus zur Leistungsoptimierung. Der Kern besteht darin, die Sharing-Technologie zu nutzen, um eine große Anzahl feinskalierter Objekte effektiv zu unterstützen. In JavaScript weisen Browser, insbesondere mobile Browser, nicht viel Speicher zu, sodass das Speichern von Speicher zu einer sehr sinnvollen Sache wird. Der Fliegengewichtsmodus ist ein Optimierungsmodus, der Zeit gegen Raum tauscht

In welchen Szenarien wird der Fliegengewichtsmodus verwendet?

(1) Im Programm werden viele ähnliche Objekte verwendet, was zu einem großen Speicheraufwand führt.
(2) Die meisten Zustände der Objekte können geändert werden Externe Zustände, und die externen Zustände werden entfernt. Anschließend kann eine große Anzahl von Objekten durch eine relativ kleine Anzahl gemeinsam genutzter Objekte ersetzt werden

Wie wendet man das Fliegengewichtsmuster an?

Die erste wird auf die Datenschicht angewendet, hauptsächlich auf eine große Anzahl ähnlicher Objekte im Speicher.
Die zweite wird auf die DOM-Ebene angewendet. In der Mitte können Fliegengewichte verwendet werden Wird im Event-Manager verwendet, um das Anhängen von Event-Handlern an jedes untergeordnete Element im übergeordneten Container zu vermeiden.

Das Fliegengewichtsmuster erfordert, dass die Eigenschaften eines Objekts in internen Zustand und externen Zustand unterteilt werden.
Der interne Status ist unabhängig von der spezifischen Szene, ändert sich normalerweise nicht und kann von einigen Objekten geteilt werden.
Der externe Status hängt von der spezifischen Szene ab und ändert sich entsprechend der Szene, und der externe Status kann nicht sein geteilt.

Der Factory-Modus wird häufig im Flyweight-Modus verwendet. Die Flyweight-Factory ist für die Verwaltung eines Flyweight-Pools (Musterpools) zum Speichern interner Statusobjekte verantwortlich.

Nachteile: Wenn die Anzahl der Objekte gering ist, kann dies den Systemaufwand erhöhen und die Implementierung komplexer machen!

Beispiel: Datei-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
  }
]);

Das obige ist der detaillierte Inhalt vonDie Definition des Javascript-Fliegengewichtsmodus und eine detaillierte Erklärung seiner Anwendung anhand von Codebeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!