JavaScript 디자인 패턴 프로그래밍의 플라이웨이트 패턴에 대한 자세한 해석-JS 튜토리얼-php.cn

플라이웨이트 모드는 유사한 개체를 많이 생성하여 발생하는 성능 문제를 해결하는 데 가장 적합합니다. 이 기사에서는 DOM 작업 중 활용 사례를 포함하여 JavaScript 디자인 패턴 프로그래밍에서 플라이웨이트 모드의 사용을 요약합니다.

플라이웨이트 모드 일반과 다릅니다. 디자인 패턴은 주로 프로그램의 성능을 최적화하는 데 사용됩니다. 다수의 유사한 개체로 인해 발생하는 성능 문제를 해결하는 데 가장 적합합니다. 플라이웨이트 모드는 애플리케이션 개체를 분석하고 이를 내부 데이터와 외부 데이터로 구문 분석하여 개체 수를 줄여 애플리케이션 성능을 향상시킵니다.

기본 지식

플라이웨이트 패턴은 세분화된 객체를 대량으로 공유하여 객체 수를 줄여 객체의 메모리를 줄이고 애플리케이션의 성능을 향상시킵니다. 기본 아이디어는 기존 유사한 객체의 구성 요소를 분해하여 공유 가능한 내부 데이터와 공유할 수 없는 외부 데이터로 확장하는 것입니다. 일반적으로 내부 데이터를 유지하려면 팩토리 클래스도 필요합니다.
JS에서 Flyweight 모드는 주로 다음 역할로 구성됩니다.
(1) 클라이언트: 내부 데이터를 얻기 위해 Flyweight 팩토리를 호출하는 데 사용되는 클래스, 일반적으로 애플리케이션에 필요한 객체,
(2) Flyweight Metafactory: 클래스 플라이웨이트 데이터를 유지하는 데 사용됩니다
(3) 플라이웨이트 클래스: 내부 데이터를 유지하는 클래스

플라이웨이트 패턴의 구현 및 적용

일반 구현

예를 들어 설명하겠습니다. Apple은 iPhone을 대부분 일괄 생산합니다. 모델, 화면 등 iPhone 데이터 중 메모리 등 일부 데이터가 16G, 32G 등으로 구분됩니다. 플라이웨이트 모드를 사용하기 전에 다음과 같이 코드를 작성했습니다.

function Iphone(model, screen, memory, SN) {
  this. model = model;
  this.screen = screen;
  this.memory = memory;
  this.SN = SN;
}
var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}

로그인 후 복사

이 코드에서는 백만 대의 iPhone이 생성되고 각 iPhone은 독립적으로 메모리를 적용합니다. 하지만 자세히 살펴보면 메모리와 일련번호가 다른 점을 제외하면 대부분의 iPhone이 유사하다는 것을 알 수 있습니다. 상대적으로 성능 요구 사항이 높은 프로그램이라면 최적화를 고려해야 합니다.
유사한 개체가 많은 프로그램의 경우 플라이웨이트 모드를 사용하여 최적화하는 것을 고려할 수 있습니다. 대부분의 iPhone 모델, 화면 및 메모리가 동일하므로 이 부분의 데이터가 공유될 수 있다는 것입니다. 내부 데이터의 경우 플라이급 클래스는 다음과 같이 정의됩니다.

function IphoneFlyweight(model, screen, memory) {
  this.model = model;
  this.screen = screen;
  this.memory = memory;
}

로그인 후 복사

모델, 화면, 메모리의 세 가지 데이터가 포함된 iPhone의 플라이급 클래스를 정의했습니다. 또한 이러한 데이터를 유지하려면 플라이웨이트 팩토리가 필요합니다.

 var flyweightFactory = (function () {
  var iphones = {};
  return {
    get: function (model, screen, memory) {
      var key = model + screen + memory;
      if (!iphones[key]) {
        iphones[key] = new IphoneFlyweight(model, screen, memory);
      }
      return iphones[key];
    }
  };
})();

로그인 후 복사

이 팩토리에서는 플라이웨이트 개체를 저장하기 위한 사전을 정의하고 If가 있는 경우 플라이웨이트 개체를 가져오는 메서드를 제공합니다. 직접 반환되며, 아무것도 없으면 반환이 생성됩니다.
그런 다음 iphone 클래스에서 수정된 클라이언트 클래스를 만듭니다.

 function Iphone(model, screen, memory, SN) {
  this.flyweight = flyweightFactory.get(model, screen, memory);
  this.SN = SN;
}

로그인 후 복사

그런 다음 이전과 같이 여러 개의 iphone을 생성합니다.

var phones = [];
for (var i = 0; i < 1000000; i++) {
  var memory = i % 2 == 0 ? 16 : 32;
  phones.push(new Iphone("iphone6s", 5.0, memory, i));
}
console.log(phones);

로그인 후 복사

여기서 핵심은 Iphone입니다. This.flyweight = flyweightFactory.get (모델, 스크린, 메모리)를 생성자에 넣습니다. 이 코드는 플라이웨이트 팩토리를 통해 플라이웨이트 데이터를 얻습니다. 동일한 데이터를 가진 개체가 이미 존재하는 경우 여러 아이폰 개체가 동일한 데이터의 이 부분을 공유하므로 원래 유사한 데이터가 반환됩니다. 메모리 사용량이 크게 감소했습니다.

DOM에 플라이웨이트 패턴 적용

플라이웨이트 패턴의 일반적인 적용은 DOM 이벤트 작업입니다. DOM 이벤트 메커니즘은 이벤트 버블링과 이벤트 캡처로 구분됩니다. 두 가지를 간략히 소개하겠습니다.
이벤트 버블링: 바인딩된 이벤트가 가장 안쪽 요소에서 트리거되기 시작한 다음 가장 바깥쪽 레이어로 버블링됩니다.
이벤트 캡처: 바인딩된 이벤트가 가장 바깥쪽 요소에서 트리거되기 시작하고 가장 안쪽으로 전달됩니다. layer
HTML에 메뉴 목록이 있다고 가정해보세요

<ul class="menu">
  <li class="item">选项1</li>
  <li class="item">选项2</li>
  <li class="item">选项3</li>
  <li class="item">选项4</li>
  <li class="item">选项5</li>
  <li class="item">选项6</li>
</ul>

로그인 후 복사

메뉴 항목을 클릭하고 해당 작업을 수행합니다. 일반적으로 다음과 같이 합니다.

$(".item").on("click", function () {
  console.log($(this).text());
})

로그인 후 복사

이벤트 바인딩 각 목록 항목에 클릭하여 해당 텍스트를 출력합니다. 이런 식으로 당분간은 문제가 없지만 매우 긴 목록인 경우, 특히 모바일 단말에서 매우 긴 목록인 경우 각 항목이 이벤트에 묶여서 가져오기 때문에 성능 문제가 발생합니다. 메모리 업. 하지만 이러한 이벤트 핸들러는 실제로 매우 유사하므로 최적화해야 합니다.

$(".menu").on("click", ".item", function () {
  console.log($(this).text());
})

로그인 후 복사

이렇게 이벤트를 바인딩하면 이벤트 핸들러의 수를 줄일 수 있습니다. 이 방법을 이벤트 위임이라고 하며 플라이웨이트 패턴의 원리도 사용합니다. 이벤트 핸들러는 공통 내부 부분이고 각 메뉴 항목의 해당 텍스트는 외부 부분입니다. 이벤트 위임의 원리에 대해 간략하게 설명하겠습니다. 메뉴 항목을 클릭하면 이벤트가 li 요소에서 ul 요소로 버블링됩니다. 이벤트를 ul에 바인딩하면 실제로 이벤트를 바인딩한 다음 대상을 사용합니다. 이벤트 매개변수 이벤트에서 어떤 요소를 클릭했는지 확인합니다. 예를 들어 첫 번째 하위 수준 li 요소인 event.target은 li이므로 클릭한 특정 요소를 가져오고 요소에 따라 다른 처리를 수행할 수 있습니다.

요약

플라이웨이트 모드는 프로그램 성능을 최적화하기 위한 공통 데이터를 공유하여 개체 수를 줄이는 수단입니다. 플라이웨이트 모드는 유사한 개체가 많고 고성능 요구 사항이 있는 시나리오에 적합합니다. 플라이웨이트 모드는 내부 데이터와 외부 데이터를 분리해야 하므로 프로그램의 논리적 복잡성이 증가하므로 성능이 필요한 경우에만 플라이웨이트 모드를 사용하는 것이 좋습니다.

플라잉 달러 모델의 이점:
웹 페이지의 리소스 요구 사항을 몇 배나 줄일 수 있습니다. 플라이웨이트 모드를 적용해도 인스턴스 수를 하나로 줄일 수는 없지만 이를 통해 많은 이점을 얻을 수 있습니다.

이런 종류의 저장에는 원본 코드를 대대적으로 수정할 필요가 없습니다. 관리자, 팩토리 및 플라이웨이트를 만든 후 코드를 수정해야 하는 유일한 방법은 대상 클래스를 직접 인스턴스화하는 것에서 관리자 개체의 메서드를 호출하는 것으로 변경하는 것입니다.

플라이웨이트 모드의 단점:
불필요한 장소에서 사용하면 코드의 효율성이 떨어지게 됩니다. 이 모드는 코드를 최적화하는 동시에 복잡성을 증가시켜 디버깅 및 유지 관리를 어렵게 만듭니다.

디버깅을 방해하는 이유는 이제 잘못될 수 있는 세 가지 위치가 있기 때문입니다. 관리자, 공장, 플라이급입니다.

이러한 최적화는 유지 관리를 더욱 어렵게 만듭니다. 데이터를 캡슐화하는 개체들로 구성된 명확한 구조 대신에 지금 직면한 것은 파편화되고 지저분한 것들입니다. 데이터는 적어도 두 곳에 저장됩니다. 내부 및 외부 데이터에 주석을 다는 것이 가장 좋습니다.

이 최적화는 필요할 때만 수행해야 합니다. 운영 효율성과 유지 관리성 사이에서 절충이 이루어져야 합니다. 플라이웨이트 모드를 사용해야 하는지 확실하지 않다면 아마도 필요하지 않을 것입니다. 플라이웨이트 모드는 시스템 리소스가 거의 완전히 사용되고 일종의 최적화가 필요한 상황에 적합합니다.

이 모드는 웹 페이지에서 사용되는 DOM 요소의 수를 줄이는 데 사용할 수 있으므로 Javascript 프로그래머에게 특히 유용합니다. 이러한 요소는 많은 메모리를 소비합니다. 이 패턴을 복합 패턴과 같은 조직적 패턴과 결합하면 모든 최신 Javascript 환경에서 원활하게 실행할 수 있는 기능이 풍부하고 복잡한 웹 애플리케이션을 개발할 수 있습니다.

플라이웨이트 모드에 적용 가능한 경우:
웹 페이지에서는 리소스 집약적인 개체를 많이 사용해야 합니다. 이러한 개체를 몇 개만 사용하는 경우 이 최적화는 비용 효율적이지 않습니다.

객체에 저장된 데이터 중 적어도 일부는 외부 데이터로 변환될 수 있습니다. 게다가 이 데이터를 객체 외부에 저장하는 것은 상대적으로 저렴해야 합니다. 그렇지 않으면 이 접근 방식의 성능 영향은 사실상 의미가 없습니다. 기본 코드와 HTML 콘텐츠가 많이 포함된 개체가 이 최적화에 더 적합할 수 있습니다.

외부 데이터를 분리한 후 고유 개체의 수가 상대적으로 적습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.