Xiangyuan 모드는 일반 설계 모드와 다릅니다. 주로 프로그램의 성능을 최적화하는 데 사용됩니다. 많은 수의 유사한 객체로 인한 성능 문제를 해결하는 것이 가장 좋습니다. 백과 사전 패턴은 객체의 수를 줄이고 응용 프로그램의 객체를 분석하고 내재적 및 외부 데이터로 구문 분석하여 응용 프로그램의 성능을 향상시킵니다.
기본 지식
Encyclopedia 모드는 많은 수의 세밀한 물체를 공유하여 객체 수를 줄여서 물체의 메모리를 줄이고 응용 프로그램의 성능을 향상시킵니다. 기본 아이디어는 기존 유사한 객체의 구성을 분해하여 공유 내부 데이터 및 비 공유 외부 데이터로 확장하는 것입니다. 우리는 내부 데이터의 객체를 메타 객체라고 부릅니다. 일반적으로 본질적인 데이터를 유지하려면 공장 클래스가 필요합니다.
JS에서 백과 사전 모드는 주로 다음 문자로 구성됩니다.
(1) 클라이언트 : Xiangyuan Factory를 호출하여 본질적인 데이터, 일반적으로 응용 프로그램에 필요한 개체를 얻는 데 사용되는 클래스.
(2) Xiangyuan Factory : Xiangyuan 데이터를 유지하는 데 사용되는 클래스
(3) Yuan 클래스 : 내부 데이터를 유지하는 클래스를 즐기십시오.
Xiangyuan 모드의 구현 및 응용
일반 구현
Apple Mass Produces iPhone을 설명해 드리겠습니다. 모델 및 화면과 같은 대부분의 데이터는 동일하며 메모리와 같은 데이터의 일부 부분은 16G, 32G 등으로 나뉩니다. EncyClopedia 모드를 사용하기 전에 다음과 같이 코드를 작성합니다.
기능 iPhone (모델, 화면, 메모리, SN) {this. 모델 = 모델; this.screen = 화면; this.memory = 메모리; this.sn = sn;} var phones = []; for (var i = 0; i <10000000; i ++) {var memory = i % 2 == 0? 16 : 32; phones.push (새로운 iPhone ( "iPhone6s", 5.0, memory, i));}이 코드에서는 백만 개의 iPhone이 생성되며 각 iPhone은 하나의 메모리에 독립적으로 적용됩니다. 그러나 자세히 살펴보면 메모리와 일련 번호가 다르다는 점을 제외하고는 대부분의 iPhone이 비슷하다는 것을 알 수 있습니다. 고성능 요구 사항이있는 프로그램 인 경우 최적화를 고려해야합니다.
비슷한 개체가있는 많은 프로그램의 경우 Xiangyuan 모드를 사용하여 최적화 할 수 있습니다. 우리는 대부분의 iPhone 모델, 화면 및 메모리가 동일하다는 것을 분석하므로 데이터 의이 부분은 Xiangyuan 모드의 내부 데이터 인 공개 목적으로 사용할 수 있습니다. Xiangyuan 클래스의 정의는 다음과 같습니다.
기능 iPhoneFlyweight (모델, 화면, 메모리) {this.Model = Model; this.screen = 화면; this.memory = memory;}모델, 화면 및 메모리의 세 가지 데이터가 포함 된 iPhone 클래스의 iPhone 클래스를 정의합니다. 또한이 데이터를 유지하려면 Xiangyuan 공장이 필요합니다.
var flyweightFactory = (function () {var iphones = {}; return {get : function (model, screen, memory) {var key = model + screen + memory; if (! iPhones [key]) {iphones [key] = new iPhoneFlyweight (모델, 스크린, 메모리) [key];}};} ();이 공장에서는 희생적인 대상을 저장하기위한 사전을 정의하고 매개 변수에 따라 희생적인 대상을 얻는 방법을 제공하며 희생이 있으면 직접 반환되며 희생이 없으면 생성됩니다.
다음으로 iPhone 클래스에서 수정 된 클라이언트 클래스를 만듭니다.
기능 iPhone (모델, 화면, 메모리, SN) {this.Flyweight = flyweightFactory.get (모델, 화면, 메모리); this.sn = sn;}그런 다음 여전히 그 사이와 같이 여러 iPhone을 생성합니다
var phones = []; for (var i = 0; i <10000000; i ++) {var memory = i % 2 == 0? 16 : 32; phones.push (새로운 iPhone ( "iPhone6s", 5.0, memory, i));} console.log (전화);여기의 핵심은 iPhone 생성자의 flyweight = flyweightfactory.get (모델, 화면, 메모리)입니다. 이 코드는 Xiangyuan 공장을 통해 Xiangyuan 데이터를 얻습니다. Xiangyuan 공장에서는 동일한 데이터가있는 객체가 이미 존재하면 객체를 직접 반환합니다. 여러 iPhone 객체는 동일한 데이터 의이 부분을 공유하므로 원래 유사한 데이터가 크게 줄어들어 메모리 사용이 줄어 듭니다.
Dom에서 Yuan 모드를 즐기십시오
Xiangyuan 모드의 일반적인 적용은 DOM 이벤트 작동이며 DOM 이벤트 메커니즘은 이벤트 기포 및 이벤트 캡처로 나뉩니다. 이 두 가지를 간단히 소개하겠습니다.
이벤트 버블 : 바운드 이벤트는 가장 안쪽 요소에서 시작하여 기포가 가장 바깥 층으로 시작됩니다.
이벤트 캡처 : 바운드 이벤트는 가장 바깥 요소에서 시작한 다음 가장 안쪽 레이어로 전달됩니다.
HTML에 메뉴 목록이 있다고 가정합니다
<ul> <li> 옵션 1 </li> <li> 옵션 2 </li> <li> 옵션 3 </li> <li> 옵션 4 </li> <li> 옵션 5 </li> <li> 옵션 6 </li> </ul>
해당 작업을 수행하려면 메뉴 항목을 클릭하십시오. 우리는 일반적으로 jQuery를 통해 이벤트를 묶습니다.
$ ( ". item"). on ( "click", function () {console.log ($ (this) .text ());})각 목록 항목에 대한 이벤트를 바인딩하고 클릭하여 해당 텍스트를 출력합니다. 현재에는 문제가 없지만 매우 긴 목록이라면 특히 목록이 특히 긴 휴대폰 인 경우 각 항목이 이벤트에 바인딩되고 메모리를 차지하기 때문에 성능 문제가 발생합니다. 그러나 이러한 이벤트 처리기는 실제로 매우 유사하므로 최적화해야합니다.
$ ( ". menu"). on ( "click", ".item", function () {console.log ($ (this) .text ());})이러한 방식으로 이벤트 처리기의 수를 줄일 수 있습니다. 이 방법을 Xiangyuan 모델의 원리를 사용하는 이벤트 대표단이라고합니다. 이벤트 핸들러는 일반적인 내부 부분이며 각 메뉴 항목의 텍스트는 외부 부분입니다. 이벤트 대표단의 원리에 대해 간단히 이야기 해 봅시다. 메뉴 항목을 클릭하면 이벤트가 Li 요소에서 UL 요소로 거품이됩니다. 이벤트를 UL에 바인딩 할 때 실제로 이벤트를 바인딩 한 다음 이벤트 매개 변수 이벤트에서 대상을 사용하여 클릭이 어떤 요소인지 결정합니다. 예를 들어, 낮은 수준의 첫 번째 Li 요소는 이벤트입니다. Target은 Li입니다. 이러한 방식으로 특정 클릭 요소를 얻을 수 있으며 다른 요소에 따라 다르게 처리 할 수 있습니다.
요약
백과 사전 모드는 프로그램 성능을 최적화하고 공개 데이터를 공유하여 최적화 프로그램을 달성하여 객체 수를 줄이는 수단입니다. 백과 사전 모드는 유사한 객체 및 성능 요구 사항이 많은 시나리오에 적합합니다. Xiangyuan 모드는 내부 및 외부 데이터를 분리해야하므로 프로그램의 논리적 복잡성을 증가시키기 때문에 성능 요구 사항이있을 때만 Xiangyuan 모드를 사용하는 것이 좋습니다.
Yuan 모델을 즐기는 이점 :
웹 페이지의 리소스 준수는 몇 배에 의해 줄일 수 있습니다. Xiangyuan 모드의 적용이 인스턴스 수를 하나로 줄일 수 없더라도 여전히 많은 혜택을 누릴 수 있습니다.
이 절약은 원래 코드를 많이 수정할 필요가 없습니다. 관리자, 공장 및 Xiangyuan을 작성한 후 코드 수정은 대상 클래스의 직접 인스턴스화에서 관리자 객체의 메소드를 호출하는 것까지 변경하는 것 이상입니다.
유안 모드를 즐기는 단점 :
불필요한 장소에서 사용되는 경우 결과는 실제로 코드의 실행 효율성을 손상시킵니다. 이 패턴은 코드를 최적화하면서 복잡성을 증가시켜 디버깅 및 유지 보수에 어려움을 겪을 수 있습니다.
이제 매니저, 공장 및 Xiangyuan의 세 가지 오류가 있기 때문에 디버깅을 방해합니다.
이 최적화로 인해 유지 보수가 더 어려워 질 수 있습니다. 이제 당신은 데이터를 캡슐화하는 객체로 구성된 명확한 아키텍처에 직면하지 않고 많은 지저분한 것들이 있습니다. 그것의 데이터는 적어도 두 곳에서 저장됩니다. 내부 데이터와 외부 데이터에 대해 의견을 제시하는 것이 가장 좋습니다.
이 최적화는 필요할 때만 수행해야합니다. 운영 효율성과 유지 관리 사이에 트레이드 오프가 이루어져야합니다. 백과 사전 모드를 사용해야하는지 확실하지 않은 경우 필요하지 않을 것입니다. Xiangyuan 모드는 시스템 자원이 거의 사용되었으며 분명히 어떤 종류의 최적화가 필요합니다.
이 패턴은 JavaScript 프로그래머에게 특히 유용합니다. 웹 페이지에서 사용할 DOM 요소의 수를 줄이는 데 사용될 수 있기 때문에 이러한 요소가 많은 메모리를 소비한다는 것을 알고 있습니다. 이 패턴과 조합 패턴과 같은 조직 유형을 사용하면 최신 JavaScript 환경에서 원활하게 실행될 수있는 기능이 풍부한 복잡한 웹 응용 프로그램 시스템을 개발할 수 있습니다.
Xiangyuan 모드의 해당 행사 :
웹 페이지에서 많은 리소스 집약적 인 객체를 사용해야합니다. 이러한 객체 중 일부 만 사용되면 이러한 종류의 최적화는 비용 효율적이지 않습니다.
객체에 저장된 데이터의 적어도 일부는 외부 데이터로 변환 될 수 있습니다. 또한이 데이터를 객체 외부에 저장하는 것은 상대적으로 적은 리소스를 취해야합니다. 그렇지 않으면이 접근법은 실제로 성능 힌트에 의미가 없습니다. 많은 양의 기본 코드 및 HTML 컨텐츠를 포함하는 객체의 유형이 이러한 종류의 최적화에 더 적합 할 수 있습니다.
외부 데이터를 분리 한 후 고유 한 객체의 수는 비교적 작습니다.