導入
フライ級モード(フライ級)は、共有テクノロジーを実行して、多数の微調整されたオブジェクトを効果的にサポートし、同じコンテンツ(メモリ消費など)を持つ多数の小さなクラスのオーバーヘッドを回避し、全員がクラスを共有できるようにします(メタクラス)。
百科事典パターンは、非常に類似したクラスの大量のオーバーヘッドを回避できます。プログラミングでは、データを表現するために多数の細粒クラスインスタンスを作成する必要がある場合があります。これらのインスタンスがいくつかのパラメーターを除いて基本的に同じオーバーヘッドを持っていることがわかった場合、インスタンス化する必要があるクラスの数を大幅に減らすことができます。これらのパラメーターをクラスインスタンスの外側に移動し、メソッドが呼び出されたときにそれらを渡すことができる場合、共有することで個々のインスタンスの数を大幅に削減できます。
では、JavaScriptに百科事典モードを適用した場合はどうなりますか? 2つの方法があります。 1つ目は、主にメモリ内の多数の類似オブジェクトにデータレイヤーに適用することです。 2つ目は、それをDOMレイヤーに適用することです。これは、中央イベントマネージャーに使用して、親コンテナの各子要素にイベントハンドルを追加しないようにします。
データレイヤーをお楽しみください
フライウェイトには2つの重要な概念があります。内部状態内因性および外部状態外因性です。内部状態はオブジェクト内の内部メソッドを介して管理され、外部情報は削除または外部から保存できます。
率直に言って、最初に元のモデルをつまんでから、さまざまな機会や環境に応じて異なる特性を持つ特定のモデルを作成することです。明らかに、ここでは異なる新しいオブジェクトを生成する必要があるため、工場モードはフライ級モードでしばしば表示されます。フライ級の内部状態は共有に使用されます。 Flyweight Factoryは、フライ級プール(モードプール)を維持して、内部状態のオブジェクトを保存する責任があります。
楽しみモードを使用します
システムがクラスライブラリを使用してすべての本を管理する場合、各本のメタデータが暫定的に次のコンテンツに設定されていることを示しましょう。
コードコピーは次のとおりです。
id
タイトル
著者
ジャンル
ページカウント
出版社ID
ISBN
また、各本の時間と借り手、そして返品の日付とそれが利用可能かどうかを定義する必要があります。
コードコピーは次のとおりです。
checkoutdate
チェックアウトメンバー
Duereturndate
可用性
本のオブジェクトは次のコードに設定されているため、コードはまだ最適化されていないことに注意してください。
コードコピーは次のとおりです。
var book = function(id、title、著者、ジャンル、pagecount、publisherid、isbn、checkoutdate、checkoutmember、duereturndate、availability){
this.id = id;
this.title = title;
this.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(){
this.titleを返します。
}、
getauthor:function(){
this.authorを返します。
}、
getisbn:function(){
this.isbnを返します。
}、
/*他のGETメソッドはここに表示されません*/
//貸出ステータスを更新します
updatecheckoutstatus:function(bookid、newstatus、checkoutdate、checkoutmenme、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();
currentDate.getTime()> date.Parse(this.duereturndate);
}
};
プログラムは最初は問題ないかもしれませんが、時間が経つにつれて、本は大量に増加する可能性があり、各タイプの本には異なるバージョンと量があり、システムが遅くなり、遅くなっていることがわかります。何千もの本のオブジェクトがメモリ内で想像でき、百科事典モードを使用して最適化する必要があります。
データを2種類の内部データと外部データに分割できます。本のオブジェクト(タイトル、著者など)に関連するデータは、内部プロパティに起因する可能性がありますが、(CheckOutMember、DuereturnDateなど)は外部プロパティに起因します。このようにして、次のコードは同じ本で同じオブジェクトを共有できます。なぜなら、本が同じ本である限り、本を借りている人に関係なく、基本情報は同じです。
コードコピーは次のとおりです。
/*xienyuanモード最適化コード*/
var book = function(title、著者、ジャンル、pagecount、publisherid、isbn){
this.title = title;
this.author =著者;
this.genre = genre;
this.pagecount = pagecount;
this.publisherid = publisherid;
this.isbn = isbn;
};
基本工場の定義
本のオブジェクトが以前に作成されたかどうかを確認するための基本的な工場を定義し、後でアクセスし続けることができるように、本がある場合は返品し、再作成して保存します。
コードコピーは次のとおりです。
/*工場のシングルトンを予約*/
var bookfactory =(function(){
var既存のbooks = {};
戻る{
createbook:function(title、著者、ジャンル、pagecount、publisherid、isbn){
/*前に作成するかどうかを検索*/
var既存のbook =既存のbooks [isbn];
if(既存の本){
既存の本を返します。
}それ以外{
/ *そうでない場合は、1つを作成して保存します */
var book = new Book(タイトル、著者、ジャンル、Pagecount、Publisherid、ISBN);
既存のbooks [isbn] = book;
戻る本;
}
}
}
});
外部ステータスを管理します
外部状態は比較的単純です。私たちがカプセル化した本を除いて、他のすべてはここで管理する必要があります:
コードコピーは次のとおりです。
/*借用管理のためのBookRecordManager Singleton*/
var bookrecordmanager =(function(){
var bookrecorddatabase = {};
戻る{
/*本の借入記録を追加*/
addbookRecord:function(id、title、著者、ジャンル、pagecount、publisherid、isbn、checkoutdate、checkoutmember、duereturndate、availability){
var book = bookfactory.createbook(タイトル、著者、ジャンル、Pagecount、Publisherid、ISBN);
bookrecorddatabase [id] = {
チェックアウトメンバー:チェックアウトメンバー、
checkoutdate:checkoutdate、
Duereturndate:Duereturndate、
可用性:可用性、
本:本;
};
}、
updatecheckoutstatus:function(bookid、newstatus、checkoutdate、checkoutmenme、newreturndate){
var record = bookrecorddatabase [bookid];
Record.availability = newStatus;
Record.CheckoutDate = checkoutdate;
Record.CheckoutMember = checkoutmember;
Record.DuereturnDate = newReturnDate;
}、
ExtendCheckoutPeriod:function(bookid、newreturndate){
bookrecorddatabase [bookid] .duereturndate = newReturnDate;
}、
Ispastdue:function(bookid){
var currentDate = new Date();
return currentDate.getTime()> date.Parse(bookRecordDataBase [bookId] .duereturndate);
}
};
});
このようにして、同じ本の同じ情報をBookManagerオブジェクトに保存し、1つのコピーのみを保存しました。以前のコードと比較して、多くのメモリを保存することがわかります。
元モードとDOMをお楽しみください
ここでDOM事件についてはあまり言いません。誰もがすでにそれを知っていると思います。 2つの例を示しましょう。
例1:集中イベント管理
たとえば、多くの同様の要素や構造(ULの複数のLIなど)に対してクリックイベントを監視する必要がある場合は、各要素のイベントをバインドする必要があります。非常に多くの要素がある場合、パフォーマンスを想像できます。泡の知識と組み合わせることで、子供の要素がトリガーされた場合、トリガーがトリガーされた後、イベントは前のレベル要素に泡立ちます。したがって、この機能を使用して、Encyclopediaモードを使用して、これらの同様の要素の親要素に関するイベントイベントを監視し、どの子要素がトリガーされたイベントがあるかを判断し、さらに操作を実行できます。
ここでは、jQueryのバインド/バインドのバインド法を組み合わせて例を挙げます。
HTML:
コードコピーは次のとおりです。
<div id = "container">
<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>
JavaScript:
コードコピーは次のとおりです。
statemanager = {
fly:function(){
var self = this;
$( '#container')。unbind()。bind( "click"、function(e){
varターゲット= $(e.originalTarget || e.srcelement);
//それがどの子要素であるかを決定します
if(target.is( "div.toggle")){
self.handleclick(ターゲット);
}
});
}、
handleclick:function(elem){
elem.find( 'span')。トグル( 'slow');
}
});
例2:パフォーマンスを改善するために百科事典モードを適用します
別の例はまだjQueryに関連しています。通常、イベントコールバック関数で要素オブジェクトを使用します。 $(this)の形式をよく使用します。実際、コールバック関数のこれはすでにDOM要素自体であるため、新しいオブジェクトを繰り返し作成します。次のコードを使用する必要があります。
コードコピーは次のとおりです。
$( 'div')。bind( 'click'、function(){
console.log( 'クリック:' + $(this).attr( 'id'));
});
//上記のコードを避け、DOM要素でjQueryオブジェクトの生成を避ける必要があります。これは、DOM要素自体を直接使用できるためです。
$( 'div')。bind( 'click'、function(){
console.log( 'クリック:' + this.id);
});
実際、$(this)の形式を使用する必要がある場合、単一のインスタンスパターンの独自のバージョンを実装することもできます。たとえば、jquery.signle(this)のような関数を実装して、DOM要素自体を返すこともできます。
コードコピーは次のとおりです。
jquery.single =(function(o){
var collection = jquery([1]);
return function(element){
//コレクションに要素を入れます
collection [0] = element;
//コレクションに戻ります
リターンコレクション;
};
});
使い方:
コードコピーは次のとおりです。
$( 'div')。bind( 'click'、function(){
var html = jquery.single(this).next()。html();
console.log(html);
});
このようにして、DOM要素自体がそのまま返され、jQueryオブジェクトは作成されません。
要約します
フライ級モードは、プログラムの効率とパフォーマンスを向上させるモードであり、プログラムのランニング速度を大幅に高速化します。多くのアプリケーションシナリオがあります。たとえば、データベースから一連の文字列を読みたい場合、これらの文字列の多くが繰り返され、これらの文字列がフライ級プール(プール)に保存できます。
アプリケーションが多数のオブジェクトを使用し、これらの多数のオブジェクトが優れたストレージを引き起こす場合は、百科事典モードの使用を検討する必要があります。そして、オブジェクトのほとんどの状態は外部にすることができます。オブジェクトの外部状態が削除されている場合、オブジェクトの多くのグループを比較的少数の共有オブジェクトに置き換えることができます。現時点では、百科事典モードの使用を検討できます。