자바스크립트 플라이웨이트 모드 정의 및 적용방법을 코드 예시와 함께 자세히 설명

플라이웨이트 모드는 성능 최적화를 위해 사용되는 모드입니다. 공유 기술을 사용하여 다수의 미세한 개체를 효과적으로 지원하는 것이 핵심입니다. JavaScript에서는 브라우저, 특히 모바일 브라우저에서는 메모리를 많이 할당하지 않기 때문에 어떻게 메모리를 절약할 것인지가 매우 의미 있는 일이 됩니다. 플라이웨이트 모드는 시간을 공간과 맞바꾸는 최적화 모드입니다

플라이웨이트 모드는 어떤 시나리오에서 사용되나요?

(1) 프로그램에 유사한 객체가 많이 사용되어 메모리 오버헤드가 커집니다.
(2) 객체의 상태 대부분은 외부 상태를 제거한 후 외부 상태로 변경될 수 있습니다. 상대적으로 적은 수의 공유 개체를 사용할 수 있습니다. 많은 수의 개체를 교체합니다.

플라이웨이트 패턴을 적용하는 방법은 무엇입니까?

첫 번째는 데이터 레이어에 적용되며 주로 메모리에 있는 다수의 유사한 개체에 적용됩니다.
두 번째는 DOM 레이어에 적용되며 중앙 이벤트 관리자에서 플라이웨이트를 사용하여 각 하위 요소를 상위 컨테이너에는 이벤트 핸들러가 연결되어 있습니다.

플라이웨이트 패턴에서는 객체의 속성을 내부 상태와 외부 상태로 나누어야 합니다.
내부 상태는 특정 장면과 독립적이며 일반적으로 변경되지 않으며 일부 객체에서 공유할 수 있습니다.
외부 상태는 특정 장면에 따라 달라지며 외부 상태는 공유할 수 없습니다.

Factory 모드는 Flyweight 모드에서 자주 나타납니다. Flyweight의 내부 상태는 공유를 위해 사용됩니다. Flyweight Factory는 내부 상태 개체를 저장하기 위해 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
  }
]);

위 내용은 자바스크립트 플라이웨이트 모드 정의 및 적용방법을 코드 예시와 함께 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!