La définition du mode poids mouche JavaScript et une explication détaillée de la façon de l'appliquer avec des exemples de code

Le mode poids mouche est un mode utilisé pour l'optimisation des performances. L'essentiel est d'utiliser la technologie de partage pour prendre en charge efficacement un grand nombre d'objets à petite échelle. En JavaScript, les navigateurs, en particulier les navigateurs mobiles, n'alloent pas beaucoup de mémoire, donc comment économiser de la mémoire devient une chose très significative. Le mode poids mouche est un mode d'optimisation qui échange du temps contre de l'espace

Dans quels scénarios le mode poids mouche est-il utilisé ?

(1) Un grand nombre d'objets similaires sont utilisés dans le programme, ce qui entraîne une surcharge de mémoire importante
(2) La plupart des états des objets peuvent être modifiés en états externes, et les états externes sont supprimés. Ensuite, un grand nombre d'objets peuvent être remplacés par un nombre relativement petit d'objets partagés

Comment appliquer le modèle de poids mouche ?

Le premier est appliqué à la couche de données, principalement appliqué à un grand nombre d'objets similaires dans la mémoire
Le second est appliqué à la couche DOM, les poids mouches peuvent être utilisés dans la couche centrale ; Utilisé sur le gestionnaire d'événements pour éviter d'attacher des gestionnaires d'événements à chaque élément enfant du conteneur parent.

Le modèle de poids mouche nécessite que les propriétés d'un objet soient divisées en état interne et état externe.
L'état interne est indépendant de la scène spécifique, ne change généralement pas et peut être partagé par certains objets
L'état externe dépend de la scène spécifique et change en fonction de la scène, et l'état externe ne peut pas être ; commun.

Le mode Factory apparaît souvent en mode Flyweight. L'état interne de Flyweight est utilisé pour le partage. L'usine Flyweight est responsable de la maintenance d'un pool Flyweight (pool de modèles) pour stocker les objets d'état internes.

Inconvénients : Lorsque le nombre d'objets est petit, cela peut augmenter la surcharge du système et rendre la mise en œuvre plus complexe !

Exemple : Téléchargement de fichiers

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!