Javascript 디자인 모드: Flyweight 모드

flyweight 모델은 구조 디자인 모델 중의 하나다.이 모델은 대상의 수를 줄이는 방법을 제공하여 응용 프로그램에 필요한 대상 구조를 개선했다.그것의 목표는 관련 대상과 가능한 한 많은 데이터를 공유함으로써 응용 프로그램의 메모리 사용을 최소화하는 것이다.flyweight 대상의 중요한 특징은 그것들이 변할 수 없다는 것이다.이것은 일단 그것들이 구축되면 그것을 수정할 수 없다는 것을 의미한다.
모든'flyweight'대상은 두 부분으로 나뉘는데 그것이 바로 상태 관련(외재) 부분과 상태 무관(내재) 부분이다.내부 상태(공유)는 Flyweight 객체에 저장됩니다.외부 상태는 클라이언트 대상에 의해 저장되거나 계산되며, Flyweight 동작을 호출할 때 전달됩니다.
우리의 대상에 대한 방법은 내재된 정보를 필요로 할 수도 있고, 이런 정보가 없으면 절대로 역할을 발휘할 수 없다.외부 정보는 외부에서 삭제하고 저장할 수 있다.
flyweight 도안은 어떻게 값을 저장합니까?
Flyweight 모드에서, 우리는 만들어진 대상에 대한 인용을 저장하기 위해 해시표를 사용합니다. 모든 대상은 키와 연결됩니다.해시표는 유사한 수조의 형식으로 데이터를 저장하는 키/값을 사용하는 데이터 구조로 그 중 (해시) 키는 수조의 인덱스에 대응한다.해시 테이블은 같은 키/값 기능을 제공하며 맵() 대상의 형식으로 자바스크립트에서 원본으로 만들어집니다.
현재, 클라이언트가 대상을 만들려고 할 때, 그와 관련된 키를 전달하기만 하면 된다.만약 이미 대상을 만들었다면, 우리는 이 대상에 대한 인용을 얻기만 하면, 그렇지 않으면 새 대상을 만들고, 그 인용을 클라이언트에게 되돌려줄 것이다.
예.
Flyweight는 공유를 사용하여 많은 객체를 효율적으로 지원합니다.현대 웹 브라우저는 이런 기술을 사용하여 같은 이미지를 두 번 불러오는 것을 방지한다.브라우저가 웹 페이지를 불러올 때, 웹 페이지의 모든 그림을 훑어볼 것입니다.브라우저는 인터넷에서 새 이미지를 모두 로드하고 내부 캐시에 배치합니다.이미 불러온 이미지에 대해 flyweight 대상을 만들 것입니다. 이 대상은 페이지에 위치와 같은 독특한 데이터를 가지고 있지만, 다른 모든 내용은 캐시된 대상에 인용됩니다.
Addy Osmani의'JavaScript 디자인 모델 배우기'라는 책의 한 예를 살펴보자. 이 책은 도서관의 모든 책을 하나의 시스템으로 관리하는 방법을 설명한다.
각 책의 주요 메타데이터는 다음과 같습니다.

신분증

직함

저자

장르

쪽수

출판사 ID

ISBN

우리는 어떤 회원이 어떤 책을 서명했는지, 그들이 서명한 날짜와 예상한 반환 날짜를 추적하기 위해 다음과 같은 속성을 가지고 있다.

결산 날짜

회원 서명

만료일

가용성

각 책은 Flyweight 모드를 사용하여 최적화를 수행하기 전에 다음과 같이 표시됩니다.
앞날망치

 let Book = function(
  id,
  title,
  author,
  genre,
  pageCount,
  publisherID,
  ISBN,
  checkoutDate,
  checkoutMember,
  dueReturnDate,
  availability
) {
  this.id = id;
  this.title = title;
  this.author = author;
  this.genre = genre;
  this.pageCount = pageCount;
  this.publisherID = publisherID;
  this.ISBN = ISBN;
  this.checkoutDate = checkoutDate;
  this.checkoutMember = checkoutMember;
  this.dueReturnDate = dueReturnDate;
  this.availability = availability;
};

Book.prototype = {
  getTitle: function() {
    return this.title;
  },

  getAuthor: function() {
    return this.author;
  },

  getISBN: function() {
    return this.ISBN;
  },

  // For brevity, other getters are not shown
  updateCheckoutStatus: function(
    bookID,
    newStatus,
    checkoutDate,
    checkoutMember,
    newReturnDate
  ) {
    this.id = bookID;
    this.availability = newStatus;
    this.checkoutDate = checkoutDate;
    this.checkoutMember = checkoutMember;
    this.dueReturnDate = newReturnDate;
  },

  extendCheckoutPeriod: function(bookID, newReturnDate) {
    this.id = bookID;
    this.dueReturnDate = newReturnDate;
  },

  isPastDue: function(bookID) {
    var currentDate = new Date();
    return currentDate.getTime() > Date.parse(this.dueReturnDate);
  }
};

수천 개의 도서 대상을 사용하면 대량의 사용 가능한 메모리를 차지할 수 있지만, 우리는 Flyweight 모드 최적화 시스템을 사용하여 이를 개선할 수 있다.
우리는 현재 데이터를 내재와 외재의 두 가지 상태로 나눌 수 있다. 다음과 같다. 도서 대상(제목, 저자 등)과 관련된 데이터는 내재적인 것이고 서명 데이터(checkout Member,due Return Date 등)는 외재적인 것으로 여겨진다.
실제로 모든 도서의 속성 조합은 하나의 도서 대상만 필요하다는 뜻이다.이것은 여전히 상당한 수량의 물체이지만, 우리 이전보다 현저히 적다.
우리의 서원 데이터 조합의 다음 단일 실례는 특정한 제목을 가진 책의 모든 사본에서 공유될 것이다.
후추

// Flyweight optimized version
var Book = function(title, author, genre, pageCount, publisherID, ISBN) {
  this.title = title;
  this.author = author;
  this.genre = genre;
  this.pageCount = pageCount;
  this.publisherID = publisherID;
  this.ISBN = ISBN;
};

외부 상태가 제거되었습니다.라이브러리 서명과 관련된 모든 내용은 관리자로 옮겨지고 대상 데이터가 분할됨에 따라 공장은 실례화에 사용할 수 있다.
Flyweight는 본질적으로'대상 규범화 기술'이다. 이런 기술에서 공공 속성은 공유된 Flyweight 대상으로 분해된다.(주의: 이 생각은 데이터 모델을 규범화하는 것과 유사하여 모델링자는 불필요한 것을 최소화하려고 한다).
flyweight 모드의 장점과 단점은 무엇입니까?
단점: Flyweights는 전송, 검색, 계산 외부 상태와 관련된 운행 비용을 가져올 수 있습니다. 특히 이전에 내부 상태로 저장되었을 때입니다.
이점*:

더 많은 날짐승 망치를 공유하면서 공간을 절약할 수 있습니다.*대량의 메가바이트를 절약하다.

메모리 한계에 직면하고 수천 개의 유사한 대상을 얻었다.

출처
https://www.geeksforgeeks.org/flyweight-design-pattern/
https://anasshekhamis.com/2017/11/16/flyweight-design-pattern-in-javascript/
https://www.dofactory.com/javascript/design-patterns/flyweight#:~:text=Essentially%20Flyweight%20is%20an%20'object,out%20into%20shared%20flyweight%20objects.&text=An%20example%20of%20the%20Flyweight,are%20shared%20across%20the%20application .