Lernen Sie JavaScript-Designmuster – Fliegengewichtsmuster_Javascript-Fähigkeiten

1. Definition

Der Fliegengewichtsmodus ist ein Modus zur Leistungsoptimierung. Der Kern besteht darin, die Sharing-Technologie zu nutzen, um eine große Anzahl feiner 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

• Die Unterwäschefabrik verfügt über 100 Arten von Herrenunterwäsche und 100 Arten von Damenunterwäsche. Von jeder Art Unterwäsche müssen Fotos gemacht werden. Wenn Sie nicht das Fliegengewichtsmodell verwenden, benötigen Sie 200 Kunststoffmodelle; wenn Sie das Fliegengewichtsmodell verwenden, benötigen Sie nur jeweils ein männliches und ein weibliches Modell.

2. In welchen Szenarien wird der Fliegengewichtsmodus verwendet?

(1) Im Programm wird eine große Anzahl ähnlicher Objekte verwendet, was zu einem großen Speicheraufwand führt
(2) Der größte Teil des Status eines Objekts kann in den externen Status geändert werden. Nach dem Entfernen des externen Status kann eine große Anzahl von Objekten durch relativ wenige gemeinsam genutzte Objekte ersetzt werden

3. Wie wende ich den Fliegengewichtsmodus an?

Die erste wird auf der Datenschicht angewendet, hauptsächlich auf eine große Anzahl ähnlicher Objekte im Speicher
Die zweite Methode wird auf der DOM-Ebene angewendet und kann im zentralen Event-Manager verwendet werden, 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 Zustand ist unabhängig von der jeweiligen Szene, ändert sich normalerweise nicht und kann von einigen Objekten geteilt werden Der externe Status hängt vom jeweiligen Szenario ab und Änderungen basierend auf dem Szenario können nicht geteilt werden.

Der Factory-Modus wird häufig im Flyweight-Modus für die gemeinsame Nutzung verwendet. Die Flyweight-Fabrik 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!

4. 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('div');
      dom.innerHTML = "<span>文件名称：" + fileName + "，文件大小：" + fileSize +"</span>"
             + "<button class='delFile'>删除</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: '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
  }
]);

5. Ergänzung

(1) Ändern Sie direkt den formalen 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) Der Objektpool ist ebenfalls eine Lösung zur Leistungsoptimierung. Er weist einige Ähnlichkeiten mit dem Fliegengewichtsmodus auf, es gibt jedoch keinen Prozess zur Trennung des internen Status und des externen Status.

var objectPoolFactory = function(createObjFn) {
  var objectPool = [];
  return {
    create: function() {
      var obj = objectPool.lenght === 0 ? createObjFn.apply(this, arguments) : objectPool.shift();
      return obj;
    },
    recover: function() {
      objectPool.push(obj);
    }
  };
}

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.