Apprenez les modèles de conception JavaScript - compétences flyweight pattern_javascript

1. Définition

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'allouent pas beaucoup de mémoire, donc la façon d'économiser de la mémoire devient une chose très significative.
Le mode Flyweight est un mode d'optimisation qui échange du temps contre de l'espace

• L'usine de sous-vêtements compte 100 types de sous-vêtements pour hommes et 100 types de sous-vêtements pour femmes, et ils sont tenus de prendre des photos de chaque type de sous-vêtements. Si vous n'utilisez pas le modèle masselotte, vous aurez besoin de 200 modèles en plastique ; si vous utilisez le modèle masselotte, vous n'aurez besoin que d'un modèle mâle et femelle chacun.

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

(1) Un grand nombre d'objets similaires sont utilisés dans le programme, provoquant une surcharge de mémoire importante
(2) La majeure partie de l'état d'un objet peut être modifiée en état externe. Après avoir supprimé l'état externe, un grand nombre d'objets peuvent être remplacés par relativement peu d'objets partagés

3. Comment appliquer le mode poids mouche ?

Le premier est appliqué sur la couche de données, principalement sur un grand nombre d'objets similaires en mémoire
; La seconde est appliquée au niveau de la couche DOM et peut être utilisée dans le gestionnaire d'événements central pour éviter d'attacher des gestionnaires d'événements à chaque élément enfant du conteneur parent.

Le

modèle Flyweight 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 du scénario spécifique et les modifications basées sur le scénario ne peuvent pas être partagées.

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 : Si le nombre d'objets est petit, cela peut augmenter la surcharge du système et rendre la mise en œuvre plus complexe !

4. 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('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. Supplément

(1) Changer directement le paramètre formel Démo

function f1() {
  var obj = {a: 1};
  f2(obj);
  console.log(obj);  // {a: 1, b: 2}
}
function f2(obj) {
  obj.b = 2;
}
f1();  

(2) Pool d'objets, est également une solution d'optimisation des performances. Il présente certaines similitudes avec le mode poids mouche, mais il n'y a pas de processus de séparation de l'état interne et de l'état externe.

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

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.