소개하다
Flyweight Mode (Flyweight)는 공유 기술을 실행하여 많은 수의 세밀한 물체를 효과적으로 지원하여 동일한 콘텐츠 (예 : 메모리 소비)를 가진 많은 수의 작은 클래스의 오버 헤드를 피하고 모든 사람이 클래스 (메타 클래스)를 공유 할 수 있도록합니다.
백과 사전 패턴은 매우 유사한 클래스의 많은 양의 오버 헤드를 피할 수 있습니다. 프로그래밍에서는 때때로 데이터를 표현하기 위해 많은 수의 세밀한 클래스 인스턴스를 생성해야합니다. 이러한 인스턴스가 기본적으로 몇 가지 매개 변수를 제외하고 기본적으로 동일한 오버 헤드를 발견하면 인스턴스화 해야하는 클래스 수를 크게 줄일 수 있습니다. 해당 매개 변수를 클래스 인스턴스 외부에서 이동하여 메소드를 호출 할 때 전달할 수있는 경우 공유에 의해 개별 인스턴스의 수를 크게 줄일 수 있습니다.
JavaScript에서 백과 사전 모드를 적용하면 어떻게됩니까? 두 가지 방법이 있습니다. 첫 번째는 데이터 계층, 주로 메모리의 많은 유사한 객체에 적용하는 것입니다. 두 번째는 DOM 레이어에 적용하는 것입니다. DOM 레이어는 중앙 이벤트 관리자에 사용하여 모 컨테이너의 각 하위 요소에 이벤트 핸들을 추가하지 않도록 할 수 있습니다.
데이터 계층을 즐기십시오
Flyweight에는 내부 상태 내재 및 외부 상태 외부의 두 가지 중요한 개념이 있습니다. 내부 상태는 객체의 내부 메소드를 통해 관리되며 외부 정보를 외부에서 삭제하거나 저장할 수 있습니다.
무뚝뚝하게 말하면 먼저 원래 모델을 꼬집어 다른 경우와 환경에 따라 다른 특성을 가진 특정 모델을 생성하는 것입니다. 분명히 여기에서 다른 새로운 객체를 생성해야하므로 공장 모드는 종종 플라이급 모드에 나타납니다. 플라이급 내부 상태는 공유하는 데 사용됩니다. Flyweight Factory는 Flyweight Pool (Mode Pool)을 유지하여 객체를 내부 상태에 보관할 책임이 있습니다.
즐거움 모드를 사용하십시오
시스템이 클래스 라이브러리를 사용하여 모든 책을 관리하는 경우 각 책의 메타 데이터가 잠정적으로 다음 내용으로 설정되어 있음을 보여 드리겠습니다.
코드 사본은 다음과 같습니다.
ID
제목
작가
장르
페이지 수
게시자 ID
ISBN
또한 각 책의 시간과 차용자, 반품 날짜 및 이용 가능한지 여부를 정의해야합니다.
코드 사본은 다음과 같습니다.
체크 아웃 데이트
체크 아웃 멤버
duereturndate
유효성
책 객체는 다음 코드로 설정되어 있으므로 코드는 아직 최적화되지 않았습니다.
코드 사본은 다음과 같습니다.
var book = function (ID, 제목, 저자, 장르, PageCount, PublishErid, ISBN, CheckoutDate, CheckoutMember, DuereturnDate, 가용성) {
this.id = id;
this.title = 제목;
this.author = 저자;
this.genre = 장르;
this.pagecount = pagecount;
this.publisherid = publisherid;
this.isbn = isbn;
this.checkoutdate = CheckoutDate;
this.checkoutmember = CheckoutMember;
this.duereturndate = duereturndate;
이 .avavailability = 가용성;
};
Book.prototype = {
getTitle : function () {
이를 반환하십시오.
},
getauthor : function () {
이것을 반환하십시오.
},
getisbn : function () {
isbn;
},
/*다른 GET 메소드는 여기에 표시되지 않습니다*/
// 대출 상태를 업데이트합니다
UpdateCheckoutStatus : function (Bookid, Newstatus, CheckoutDate, CheckoutMember, NewReturnDate) {
this.id = bookid;
this.aveability = newstatus;
this.checkoutdate = CheckoutDate;
this.checkoutmember = CheckoutMember;
this.duereturndate = NewreturnDate;
},
//고쳐 쓰다
ExtendCheckOutPeriod : function (Bookid, NewreturnDate) {
this.id = bookid;
this.duereturndate = NewreturnDate;
},
// 만료되었습니다
ISPASTDUE : 기능 (BookId) {
var currentDate = 새로운 날짜 ();
return currentDate.getTime ()> date.parse (this.duereturnDate);
}
};
프로그램은 처음에는 괜찮을 수 있지만 시간이 지남에 따라 책은 대량으로 증가 할 수 있으며 각 유형의 책마다 버전과 수량이 다르므로 시스템이 느려지고 느리게 진행되고 있음을 알게됩니다. 수천 개의 책 객체를 메모리에서 상상할 수 있으며 백과 사전 모드를 사용하여 최적화해야합니다.
데이터를 두 가지 유형의 내부 및 외부 데이터로 나눌 수 있습니다. 책 객체 (제목, 저자 등)와 관련된 데이터는 내부 속성에 기인 할 수 있으며 (CheckoutMember, DuereturnDate 등)는 외부 속성에 기인 할 수 있습니다. 이런 식으로, 다음 코드는 같은 책에서 동일한 객체를 공유 할 수 있습니다. 책을 빌려주는 사람이라면 책이 같은 책인 경우 기본 정보는 동일하기 때문입니다.
코드 사본은 다음과 같습니다.
/*Xienyuan 모드 최적화 코드*/
var book = function (제목, 저자, 장르, pagecount, publisherid, isbn) {
this.title = 제목;
this.author = 저자;
this.genre = 장르;
this.pagecount = pagecount;
this.publisherid = publisherid;
this.isbn = isbn;
};
기본 공장 정의
기본 공장을 정의하여 책의 객체가 이전에 만들어 졌는지,있는 경우 반환하고, 다시 액세스 할 수 있도록 재현하고 저장하여 각 책에 대해 하나의 객체 만 생성 할 수 있도록하겠습니다.
코드 사본은 다음과 같습니다.
/* 공장 싱글 톤 예약*/
var bookfactory = (function () {
var 기존 책 = {};
반품{
CreateBook : 함수 (제목, 저자, 장르, PageCount, PublishErid, ISBN) {
/*이전에 만들 것인지 검색*/
var 기존 책 = 기존 책 [isbn];
if (기존 책) {
기존 책을 반환;
}또 다른{
/ * 그렇지 않으면 하나를 만들고 저장 */
var book = new Book (제목, 저자, 장르, PageCount, PublisherId, ISBN);
기존 책 [isbn] = 책;
반환 책;
}
}
}
});
외부 상태를 관리합니다
외부 상태는 비교적 간단합니다. 우리가 캡슐화 한 책을 제외하고는 다른 모든 것을 여기에서 관리해야합니다.
코드 사본은 다음과 같습니다.
/*차용 관리를위한 BookRecordManager Singleton*/
var bookrecordmanager = (function () {
var bookrecorddatabase = {};
반품{
/*책을 빌린 레코드 추가*/
AddBookRecord : 함수 (ID, 제목, 저자, 장르, PageCount, PublishErid, ISBN, CheckoutDate, CheckoutMember, DuereturnDate, 가용성) {
var book = bookfactory.createbook (제목, 저자, 장르, pagecount, publisherid, isbn);
BookRecordDatabase [id] = {
CheckoutMember : CheckoutMember,
CheckoutDate : CheckoutDate,
DuereturnDate : DuereturnDate,
가용성 : 가용성,
책 : 책;
};
},
UpdateCheckoutStatus : function (Bookid, Newstatus, CheckoutDate, CheckoutMember, NewReturnDate) {
var 레코드 = BookRecordDatabase [BookId];
record.availability = Newstatus;
record.checkoutdate = CheckoutDate;
record.checkoutmember = CheckoutMember;
record.duereturndate = NewreturnDate;
},
ExtendCheckOutPeriod : function (Bookid, NewreturnDate) {
BookRecordDatabase [Bookid] .duereturndate = NewreturnDate;
},
ISPASTDUE : 기능 (BookId) {
var currentDate = 새로운 날짜 ();
return currentDate.getTime ()> date.parse (BookRecordDatabase [BookId] .duereturnDate);
}
};
});
이런 식으로, 우리는 동일한 책의 동일한 정보를 BookManager 개체에 저장하고 하나의 사본 만 저장했습니다. 이전 코드와 비교하여 많은 메모리를 저장한다는 것을 알 수 있습니다.
위안 모드와 돔을 즐기십시오
나는 여기서 DOM 사건에 대해별로 말하지 않을 것입니다. 나는 모두가 이미 그것을 알고 있다고 믿는다. 두 가지 예를 들어 봅시다.
예 1 : 중앙 집중식 이벤트 관리
예를 들어, 많은 유사한 요소 또는 구조 (예 : 메뉴 또는 UL의 다중 LI)에 대한 클릭 이벤트를 모니터링 해야하는 경우 각 요소에 대한 이벤트를 바인딩해야합니다. 매우 많은 요소가 있다면 성능을 상상할 수 있습니다. 거품에 대한 지식과 결합하여 어린이 요소가 트리거되면 트리거가 트리거 된 후 이벤트가 이전 요소로 기포됩니다. 따라서이 기능을 사용하여 백과 사전 모드를 사용할 수 있으며 이러한 유사한 요소의 상위 요소에 대한 이벤트 이벤트를 모니터링 한 다음 어떤 하위 요소가 트리거 된 이벤트가 있는지 판단 할 수 있습니다.
여기서 우리는 jQuery의 바인드/undind 메소드를 결합하여 예제를 제시합니다.
HTML :
코드 사본은 다음과 같습니다.
<div id = "컨테이너">
<div href = "#"> 추가 정보 (주소)
<span>
다음은 더 많은 정보입니다
</span> </div>
<div href = "#"> 추가 정보 (지도)
<span>
<iframe src = "http://www.map-generator.net/extmap.php?name=london&address=london%2C%20England&width=500...gt;"</iframe>
</span>
</div>
</div>
자바 스크립트 :
코드 사본은 다음과 같습니다.
statemanager = {
플라이 : function () {
var self = 이것;
$ ( '#container'). unbind (). bind ( "click", function (e) {
var target = $ (e.originalTarget || e.srcelement);
// 어떤 자식 요소를 결정하십시오
if (target.is ( "div.toggle")) {
self.handleClick (대상);
}
});
},
HandleClick : 기능 (Elem) {
elem.find ( 'span'). 토글 ( 'slow');
}
});
예 2 : 성능 향상을 위해 백과 사전 모드 적용
또 다른 예는 여전히 jQuery와 관련이 있습니다. 일반적으로 콜백 함수 이벤트에서 요소 객체를 사용합니다. 우리는 종종 $ (this)의 형태를 사용합니다. 실제로 콜백 함수 의이 콜백 기능이 이미 DOM 요소 자체이기 때문에 반복적으로 새로운 객체를 만듭니다. 다음 코드를 사용해야합니다.
코드 사본은 다음과 같습니다.
$ ( 'div'). bind ( 'click', function () {
console.log ( '당신은 클릭했습니다 :' + $ (this) .attr ( 'id'));
});
// 위의 코드를 피하고 DOM 요소 자체를 직접 사용할 수 있으므로 DOM 요소에서 jQuery 객체를 다시 생성하지 않아야합니다.
$ ( 'div'). bind ( 'click', function () {
Console.log ( '클릭 한 :' + this.id);
});
실제로 $ (this) 형식을 사용해야하는 경우 단일 인스턴스 패턴의 자체 버전을 구현할 수도 있습니다. 예를 들어, jQuery.Signle (this)과 같은 함수를 구현하여 DOM 요소 자체를 반환 할 수 있습니다.
코드 사본은 다음과 같습니다.
jQuery.single = (function (o) {
var collection = jQuery ([1]);
반환 함수 (요소) {
// 컬렉션에 요소를 넣습니다
수집 [0] = 요소;
// 컬렉션으로 돌아갑니다
리턴 컬렉션;
};
});
사용 방법 :
코드 사본은 다음과 같습니다.
$ ( 'div'). bind ( 'click', function () {
var html = jquery.single (this) .next (). html ();
Console.log (HTML);
});
이러한 방식으로 DOM 요소 자체가 그대로 반환되고 jQuery 객체는 생성되지 않습니다.
요약
플라이급 모드는 프로그램 효율성과 성능을 향상시키는 모드로 프로그램의 실행 속도를 크게 높일 수 있습니다. 예를 들어, 데이터베이스에서 일련의 문자열을 읽으려면 이러한 문자열 중 많은 부분이 반복되면 Flyweight Pool (Pool)에 이러한 문자열을 저장할 수 있습니다.
응용 프로그램이 다수의 객체를 사용하고 이러한 많은 객체가 스토리지가 큰 경우 백과 사전 모드를 사용하는 것을 고려해야합니다. 그리고 대부분의 물체 상태는 외부 일 수 있습니다. 객체의 외부 상태가 삭제되면 많은 객체 그룹을 비교적 적은 공유 객체로 대체 할 수 있습니다. 현재 Encyclopedia 모드 사용을 고려할 수 있습니다.