Pelajari corak reka bentuk JavaScript - kemahiran flyweight pattern_javascript

1. Definisi

Mod flyweight ialah mod yang digunakan untuk pengoptimuman prestasi Intinya ialah menggunakan teknologi perkongsian untuk menyokong sejumlah besar objek berskala halus.
Dalam JavaScript, penyemak imbas, terutamanya penyemak imbas mudah alih, tidak memperuntukkan banyak memori, jadi bagaimana untuk menjimatkan memori menjadi perkara yang sangat bermakna.
Mod flyweight ialah mod pengoptimuman yang menukar masa untuk ruang

• Kilang seluar dalam mempunyai 100 jenis seluar dalam lelaki dan 100 jenis seluar dalam wanita, dan mereka dikehendaki mengambil gambar setiap jenis seluar dalam. Jika anda tidak menggunakan model flyweight, anda memerlukan 200 model plastik jika anda menggunakan model flyweight, anda hanya memerlukan satu model lelaki dan wanita setiap satu.

2. Dalam senario apakah mod flyweight digunakan?

(1) Sebilangan besar objek serupa digunakan dalam atur cara, menyebabkan overhed memori yang besar
(2) Kebanyakan keadaan objek boleh ditukar kepada keadaan luaran Selepas menanggalkan keadaan luaran, sejumlah besar objek boleh digantikan dengan objek kongsi yang agak sedikit

.

3. Bagaimana cara menggunakan mod flyweight?

Yang pertama digunakan pada lapisan data, terutamanya pada sebilangan besar objek serupa dalam memori
Yang kedua digunakan pada lapisan DOM Flyweight boleh digunakan dalam pengurus acara pusat untuk mengelak daripada melampirkan pengendali acara pada setiap elemen anak dalam bekas induk.

Corak Flyweight memerlukan sifat objek dibahagikan kepada keadaan dalaman dan keadaan luaran.
Keadaan dalaman adalah bebas daripada adegan tertentu, biasanya tidak berubah dan boleh dikongsi oleh beberapa objek; Keadaan luaran bergantung pada senario tertentu dan perubahan berdasarkan senario tidak boleh dikongsi.

Mod kilang sering muncul dalam mod Flyweight.

Kelemahan: Jika bilangan objek kecil, ia boleh meningkatkan overhed sistem dan menjadikan pelaksanaan lebih kompleks!

4. Contoh: Muat naik fail

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

(1) Tukar terus parameter formal Demo

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

(2) Kumpulan objek,

juga merupakan penyelesaian pengoptimuman prestasi Ia mempunyai beberapa persamaan dengan mod flyweight, tetapi tiada proses memisahkan keadaan dalaman dan keadaan luaran.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

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