JavaScript フライウェイト モードの定義とその適用方法をコード例で詳しく説明

フライウェイト モードは、パフォーマンスの最適化に使用されるモードです。その中心となるのは、共有テクノロジを使用して、多数の細かいスケールのオブジェクトを効果的にサポートすることです。 JavaScriptでは、ブラウザ、特にモバイルブラウザはあまりメモリを割り当てないため、メモリをいかに節約するかが非常に意味のあることになります。 フライウェイト モードは、時間を空間と交換する最適化モードです​​

フライウェイト モードはどのようなシナリオで使用されますか?

(1) プログラム内で多数の同様のオブジェクトが使用されているため、メモリのオーバーヘッドが大きくなります
(2) オブジェクトのほとんどの状態は、外部状態を取り除いた後、外部状態に変更できます。使用できる共有オブジェクトは比較的少ない 多数のオブジェクトを置き換える

フライウェイト パターンを適用するには?

最初はデータ層に適用され、主にメモリ内の多数の同様のオブジェクトに適用されます。
2 番目は DOM 層に適用され、中央のイベント マネージャーでフライウェイトを使用して各子要素が与えられるのを避けることができます。親コンテナにはイベント ハンドラーがアタッチされています。

Flyweight パターンでは、オブジェクトのプロパティを 内部状態 と 外部状態 に分割する必要があります。
内部状態は特定のシーンから独立しており、通常は変化せず、一部のオブジェクトで共有できます。
外部状態は特定のシーンに依存し、シーンに応じて変化しますが、外部状態は共有できません。

ファクトリー モードは、Flyweight モードでよく使用されます。Flyweight ファクトリは、内部状態のオブジェクトを保存するために Flyweight プール (パターン プール) を維持する役割を果たします。

短所: オブジェクトの数が少ない場合、システムのオーバーヘッドが増加し、実装がより複雑になる可能性があります。

例: ファイルのアップロード

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

以上がJavaScript フライウェイト モードの定義とその適用方法をコード例で詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。