Xiangyuanモードは、一般的な設計モードとは異なります。主にプログラムのパフォーマンスを最適化するために使用されます。多数の同様のオブジェクトによって引き起こされるパフォーマンスの問題を解決することが最善です。百科事典のパターンは、オブジェクトの数を減らし、アプリケーションのオブジェクトを分析し、それらを固有の外部データに解析することにより、アプリケーションのパフォーマンスを改善します。
基本的な知識
百科事典モードは、多数の細粒化オブジェクトを共有することにより、オブジェクトの数を減らし、それによりオブジェクトのメモリを削減し、アプリケーションのパフォーマンスを向上させます。基本的なアイデアは、既存の類似のオブジェクトの構成を分解し、それらを共有された内部データと非共有外部データに拡張することです。内部データのオブジェクトをメタオブジェクトと呼びます。通常、本質的なデータを維持するには、工場のクラスも必要です。
JSでは、百科事典モードは主に次の文字で構成されています。
（1）クライアント：Xiangyuan Factoryを呼び出して、通常はアプリケーションで必要なオブジェクトである本質的なデータを取得するために使用されるクラス。
（2）Xiangyuan Factory：Xiangyuanデータを維持するために使用されるクラス
（3）Yuanクラスをお楽しみください：内部データを維持するクラス
Xiangyuanモードの実装と適用
一般的な実装
説明する例を示しましょう：Apple Mass-Produces iPhone。モデルや画面などのデータのほとんどは同じであり、メモリなどのデータのいくつかの部分は16G、32Gなどに分割されます。百科事典モードを使用する前に、次のようにコードを書きます。
function iPhone（モデル、スクリーン、メモリ、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、メモリ、i））;}このコードでは、100万台のiPhoneが作成され、各iPhoneは1つのメモリに個別に適用されます。しかし、よく見ると、メモリとシリアル番号が異なることを除いて、ほとんどのiPhoneが類似していることがわかります。高性能要件を持つプログラムの場合、最適化することを検討する必要があります。
同様のオブジェクトを持つ多数のプログラムの場合、Xiangyuanモードを使用して最適化することを検討できます。ほとんどのiPhoneモデル、画面、およびメモリが同じであることを分析しているため、データのこの部分は、Xiangyuanモードの内部データである公共の目的で使用できます。 Xiangyuanクラスの定義は次のとおりです。
関数iPhoneFlyWight（モデル、スクリーン、メモリ）{this.model = model; this.screen = screen; this.memory = memory;}モデル、画面、メモリの3つのデータを含むiPhoneのFeanクラスを定義します。また、このデータを維持するためにXiangyuan工場も必要です。
var flyweightfactory =（funced（）{var iphones = {}; return {get：function（model、screen、memory）{var key = model + screen + memory; if（！iphones [key]）{iphoneflyweight（key] = new iPhoneFlyWeight（new iPhoneFlyWeight（新しいiPhoneFlyWeight」この工場では、犠牲オブジェクトを保存する辞書を定義し、パラメーターに従って犠牲オブジェクトを取得する方法を提供し、犠牲がある場合は直接返され、犠牲がない場合は作成されます。
次に、iPhoneクラスから変更されたクライアントクラスを作成します。
function iPhone（モデル、スクリーン、メモリ、SN）{this.flyweight = flyweightfactory.get（モデル、スクリーン、メモリ）; 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コンストラクターのflyweight = flyweightfactory.get（モデル、画面、メモリ）です。このコードは、Xiangyuan工場を介してXiangyuanデータを取得します。 Xiangyuan Factoryでは、同じデータを持つオブジェクトが既に存在する場合、オブジェクトを直接返します。複数のiPhoneオブジェクトは同じデータのこの部分を共有するため、元の類似のデータが大幅に削減され、メモリの使用量が削減されました。
domでユーアンモードをお楽しみください
Xiangyuanモードの典型的なアプリケーションはDOMイベント操作であり、DOMイベントメカニズムはイベントバブルとイベントキャプチャに分割されます。これら2つを簡単に紹介しましょう。
イベントバブル：バインドされたイベントは最も内側の要素から始まり、次に最外層に泡立ちます
イベントキャプチャ：バインドされたイベントは、最も外側の要素から始まり、その後、最も内側のレイヤーに渡されます。
HTMLにメニューリストがあるとします
<ul> <li>オプション1 </li> <li>オプション2 </li> <li>オプション3 </li> <li>オプション4 </li> <li>オプション5 </li> <li>オプション6 </li> </ul>
メニュー項目をクリックして、対応する操作を実行します。私たちはjQueryを通してイベントをバインドします。これは通常：
$（ "。アイテム"）。on（ "click"、function（）{console.log（$（this）.text（））;}）各リスト項目のイベントをバインドし、クリックして対応するテキストを出力します。現時点では問題はありませんが、特に長いリストを持つ携帯電話の場合、非常に長いリストの場合、各アイテムはイベントにバインドされ、メモリを取り上げるため、パフォーマンスの問題が発生します。しかし、これらのイベントハンドラーは実際には非常に似ているため、最適化する必要があります。
$（ "。メニュー"）。
このようにして、イベントハンドラーの数を減らすことができます。この方法は、Xiangyuanモデルの原理も使用しているEvent Deligationと呼ばれます。イベントハンドラーは共通の内部部分であり、各メニュー項目のテキストは外部部品です。イベント代表団の原則について簡単に説明しましょう。メニュー項目をクリックすると、イベントはLI要素からUL要素に泡立ちます。イベントをULにバインドすると、実際にイベントをバインドし、イベントパラメーターイベントでターゲットを使用して、クリックの要素を決定します。たとえば、低レベルのevent.targetでの最初のLi要素はLiです。このようにして、特定のクリック要素を取得でき、異なる要素に応じて異なる方法で処理できます。
要約します
百科事典モードは、プログラムのパフォーマンスを最適化し、パブリックデータを共有して最適化プログラムを実現することによりオブジェクトの数を減らす手段です。百科事典モードは、多数の同様のオブジェクトとパフォーマンス要件があるシナリオに適しています。 Xiangyuanモードは内部データと外部データを分離する必要があるため、プログラムの論理的な複雑さを増加させるため、パフォーマンス要件がある場合にのみXiangyuanモードを使用することをお勧めします。
元モデルを楽しむことの利点：
Webページのリソースコンプライアンスは、桁違いに削減できます。 Xiangyuanモードの適用がインスタンスの数を1つに減らすことができない場合でも、それでも多くの利益を得ることができます。
この保存は、元のコードの多くの変更を必要としません。 Manager、Factory、Xiangyuanを作成した後、コードの変更は、ターゲットクラスの直接インスタンス化からマネージャーオブジェクトのメソッドの呼び出しに変更するだけです。
人民元モードをお楽しみください：
不要な場所で使用されている場合、結果は実際にコードの実行効率を損ないます。このパターンは、コードを最適化しながら、複雑さを高め、デバッグやメンテナンスが困難になる可能性があります。
マネージャー、工場、Xiangyuanの3つのエラーが3つある可能性があるため、デバッグを妨げます。
この最適化は、メンテナンスをより困難にすることもできます。これで、データをカプセル化するオブジェクトで構成される明確なアーキテクチャに直面しているのではなく、乱雑なものの束に直面しています。そのデータは、少なくとも2つの場所で保存されます。内部データと外部データについてコメントするのが最善です。
この最適化は、必要な場合にのみ行う必要があります。運用効率と保守性の間にトレードオフを行う必要があります。百科事典モードを使用する必要があるかどうかわからない場合は、おそらく必要ありません。 Xiangyuanモードは、システムリソースがほぼ使用されているなどの場合に適しています。明らかに、ある種の最適化が必要です。
このパターンは、JavaScriptプログラマーにとって特に役立ちます。これは、これらの要素が多くのメモリを消費することを知って、Webページで使用するDOM要素の数を減らすために使用できるためです。このパターンを使用して、コンビネーションパターンなどの組織タイプを使用すると、最新のJavaScript環境でスムーズに実行できる機能が豊富な複雑なWebアプリケーションシステムを開発できます。
Xiangyuanモードに適用可能な機会：
多数のリソース集約型オブジェクトをWebページで使用する必要があります。これらのオブジェクトのほんの一部しか使用されていない場合、この種の最適化は費用対効果が高くありません。
オブジェクトに保存されているデータの少なくとも一部は、外部データに変換できます。さらに、このデータをオブジェクトの外側に保存すると、比較的少ないリソースが必要なはずです。そうしないと、このアプローチはパフォーマンスのヒントについては実際には無意味です。大量の基本コードとHTMLコンテンツを含むオブジェクトのタイプは、この種の最適化により適している場合があります。
外部データを分離した後、一意のオブジェクトの数は比較的少ない。