JavaScript 디자인 패턴 배우기 - 플라이급 패턴_javascript 기술

1. 정의

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

• 속옷 공장에는 남성용 속옷 100종, 여성용 속옷 100종이 있는데, 속옷 종류별로 사진을 찍어야 합니다. 플라이급 모델을 사용하지 않는 경우 플라스틱 모델 200개가 필요하고, 플라이급 모델을 사용하는 경우 남성과 여성 모델 각각 하나씩만 필요합니다.

2. 플라이웨이트 모드는 어떤 상황에서 사용되나요?

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

3. 플라이웨이트 모드는 어떻게 적용하나요?

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

플라이웨이트 패턴에서는 객체의 속성을

내부 상태와 외부 상태로 나누어야 합니다. 내부 상태는 특정 장면과 독립적이며 일반적으로 변경되지 않으며 일부 객체에서 공유될 수 있습니다.
외부 상태는 특정 시나리오에 따라 달라지며, 시나리오에 따른 외부 상태는 공유될 수 없습니다.

Flyweight 모드에는 Factory 모드가 자주 등장합니다. Flyweight의 내부 상태는 공유를 위해 사용됩니다. Flyweight Factory는 내부 상태 개체를 저장하기 위한 Flyweight 풀(패턴 풀)을 유지하는 역할을 담당합니다.

단점: 객체 수가 적으면 시스템 오버헤드가 증가하고 구현이 더 복잡해질 수 있습니다!

4. 예: 파일 업로드

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) 형식 매개변수 직접 변경 Demo

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

(2) 개체 풀, 역시 플라이웨이트 모드와 일부 유사하지만 내부 상태와 외부 상태를 분리하는 프로세스가 없습니다.

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

이 기사가 자바스크립트 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.