يختلف وضع Xiangyuan عن وضع التصميم العام. يتم استخدامه بشكل أساسي لتحسين أداء البرنامج. من الأفضل حل مشاكل الأداء الناجمة عن عدد كبير من الكائنات المماثلة. يقلل نمط الموسوعة من عدد الكائنات وبالتالي يحسن أداء التطبيق من خلال تحليل كائنات التطبيق وحلقتها في بيانات جوهرية وخارجية.
المعرفة الأساسية
يقلل وضع الموسوعة من عدد الكائنات من خلال مشاركة عدد كبير من الكائنات الدقيقة ، وبالتالي تقليل ذاكرة الكائنات وتحسين أداء التطبيقات. الفكرة الأساسية هي تحلل تكوين الكائنات المماثلة الموجودة وتوسيعها إلى بيانات داخلية مشتركة والبيانات الخارجية غير المشتركة. ندعو كائن البيانات الداخلية كائن meta. عادة ما تكون هناك حاجة أيضًا إلى فئة المصنع للحفاظ على البيانات الجوهرية.
في JS ، يتكون وضع الموسوعة بشكل أساسي من الأحرف التالية:
(1) العميل: فئة تستخدم للاتصال بمصنع Xiangyuan للحصول على بيانات جوهرية ، وعادة ما يكون الكائن المطلوب من قبل التطبيق.
(2) مصنع Xiangyuan: فئة تستخدم للحفاظ على بيانات Xiangyuan
(3) استمتع بفئة اليوان: فئة تحافظ على البيانات الداخلية
تنفيذ وتطبيق وضع Xiangyuan
التنفيذ العام
دعنا نقدم مثالاً لتوضيح: تقوم شركة Apple الكبيرة بإنتاج أجهزة iPhone. معظم البيانات مثل النماذج والشاشات هي نفسها ، ويتم تقسيم أجزاء قليلة من البيانات مثل الذاكرة إلى 16G و 32G ، وما إلى ذلك قبل استخدام وضع الموسوعة ، نكتب الرمز على النحو التالي:
وظيفة iPhone (النموذج ، الشاشة ، الذاكرة ، SN) {هذا. نموذج = نموذج ؛ this.screen = الشاشة ؛ this.memory = الذاكرة ؛ this.sn = sn ؛} var هواتف = [] ؛ لـ (var i = 0 ؛ i <1000000 ؛ i ++) {var memory = i ٪ 2 == 0؟ 16: 32 ؛ الهواتف.في هذا الرمز ، يتم إنشاء مليون iPhone ، ويتم تطبيق كل iPhone على ذاكرة واحدة بشكل مستقل. ولكن عندما ننظر عن كثب ، يمكننا أن نرى أن معظم أجهزة iPhone متشابهة ، باستثناء أن الذاكرة والأرقام التسلسلية مختلفة. إذا كان برنامجًا له متطلبات عالية الأداء ، فيجب علينا التفكير في تحسينه.
بالنسبة لعدد كبير من البرامج ذات الكائنات المماثلة ، يمكننا التفكير في استخدام وضع Xiangyuan لتحسينه. نحن نحلل أن معظم نماذج iPhone والشاشات والذاكرة هي نفسها ، لذلك يمكن استخدام هذا الجزء من البيانات للأغراض العامة ، وهي البيانات الداخلية في وضع Xiangyuan. تعريف فئة Xiangyuan كما يلي:
وظيفة iPhoneFlyweight (النموذج ، الشاشة ، الذاكرة) {this.model = model ؛ this.screen = الشاشة ؛ this.memory = الذاكرة ؛}نحدد فئة الاستمتاع بـ 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 (model ، screen ، memory) ؛} return iphones [key] ؛في هذا المصنع ، نحدد قاموسًا لإنقاذ الكائن الذبيح ، ونقدم طريقة للحصول على الكائن الذبيحة وفقًا للمعلمات ، وإذا كان هناك تضحيات ، فسيتم إرجاعه مباشرة ، وإذا لم يكن هناك قمع ، فسيتم إنشاؤه.
بعد ذلك ، نقوم بإنشاء فئة عميل ، يتم تعديلها من فئة iPhone:
وظيفة iPhone (النموذج ، الشاشة ، الذاكرة ، SN) {this.flyweight = flyweightfactory.get (نموذج ، شاشة ، ذاكرة) ؛ this.sn = sn ؛}ثم ما زلنا ننشئ العديد من أجهزة iPhone كما كان بينهما
var home = [] ؛ for (var i = 0 ؛ i <1000000 ؛ i ++) {var memory = i ٪ 2 == 0؟ 16: 32 ؛ الهواتف.المفتاح هنا هو this.flyweight = flyweightfactory.get (النموذج ، الشاشة ، الذاكرة) في مُنشئ iPhone. يحصل هذا الرمز على بيانات Xiangyuan من خلال مصنع Xiangyuan. في مصنع Xiangyuan ، إذا كان هناك كائن له نفس البيانات بالفعل ، فسيقوم بإرجاع الكائن مباشرة. تشترك كائنات iPhone المتعددة في هذا الجزء من نفس البيانات ، وبالتالي تم تقليل البيانات المماثلة الأصلية إلى حد كبير ، مما يقلل من استخدام الذاكرة.
تطبيق الاستمتاع بوضع يوان في دوم
التطبيق النموذجي لوضع 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 في المستوى المنخفض ، event.target هو li. وبهذه الطريقة ، يمكننا الحصول على عنصر نقرة محدد ويمكننا التعامل بشكل مختلف وفقًا للعناصر المختلفة.
لخص
يعد وضع الموسوعة وسيلة لتحسين أداء البرنامج ، وتقليل عدد الكائنات من خلال مشاركة البيانات العامة لتحقيق برامج التحسين. وضع الموسوعة مناسب للسيناريوهات حيث يوجد عدد كبير من الكائنات ومتطلبات الأداء المماثلة. نظرًا لأن وضع Xiangyuan يحتاج إلى فصل البيانات الداخلية والخارجية ، فإنه يزيد من التعقيد المنطقي للبرنامج ، يوصى باستخدام وضع Xiangyuan فقط عندما تكون هناك متطلبات أداء.
فوائد التمتع بنموذج يوان:
يمكن تقليل امتثال الموارد لصفحات الويب حسب أوامر الحجم. حتى إذا كان تطبيق وضع Xiangyuan لا يمكن أن يقلل من عدد الحالات إلى واحدة ، فلا يزال بإمكانك الاستفادة كثيرًا منه.
هذا الادخار لا يتطلب الكثير من تعديل الكود الأصلي. بعد إنشاء المدير والمصنع و Xiangyuan ، فإن التعديلات على الكود ليست أكثر من التغيير من إنشاء الفئة المستهدفة مباشرة إلى استدعاء طريقة كائن المدير.
عيوب الاستمتاع بوضع يوان:
إذا تم استخدامه في أماكن غير ضرورية ، فإن النتيجة ستضر فعليًا بكفاءة الجري للرمز. يعمل هذا النمط على تحسين الكود مع زيادة تعقيده ، مما قد يسبب صعوبات في تصحيح الأخطاء والصيانة.
إنه يعيق تصحيح الأخطاء لأنه يوجد الآن ثلاثة أخطاء محتملة: المدير والمصنع و Xiangyuan.
هذا التحسين يمكن أن يجعل الصيانة أكثر صعوبة. أنت الآن لا تواجه بنية واضحة تتكون من كائنات تغلف البيانات ، ولكن مجموعة من الأشياء الفوضوية. يتم حفظ البيانات الموجودة فيه في مكانين على الأقل. من الأفضل التعليق على البيانات الداخلية والبيانات الخارجية.
يجب أن يتم هذا التحسين فقط عند الضرورة. يجب أن تتم المفاضلة بين الكفاءة التشغيلية وقابلية الصيانة. إذا لم تكن متأكدًا مما إذا كنت بحاجة إلى استخدام وضع الموسوعة ، فمن المحتمل ألا تحتاج إليه. وضع Xiangyuan مناسب للمناسبات مثل موارد النظام قد تم استخدامه تقريبًا ومن الواضح أن هناك حاجة إلى نوع من التحسين.
يعد هذا النمط مفيدًا بشكل خاص لمبرمجي JavaScript لأنه يمكن استخدامه لتقليل عدد عناصر DOM التي سيتم استخدامها في صفحة ويب ، مع العلم أن هذه العناصر تستهلك الكثير من الذاكرة. يمكن أن يؤدي استخدام هذا النمط والنوع التنظيمي مثل أنماط الجمع إلى تطوير أنظمة تطبيقات الويب المعقدة الغنية بالميزات والتي يمكن أن تعمل بسلاسة في أي بيئة حديثة JavaScript.
المناسبات المعمول بها لوضع Xiangyuan:
يجب استخدام عدد كبير من الكائنات المكثفة للموارد في صفحة الويب. إذا تم استخدام عدد قليل فقط من هذه الكائنات ، فإن هذا النوع من التحسين ليس فعالًا من حيث التكلفة.
على الأقل يمكن تحويل جزء من البيانات المخزنة في الكائن إلى بيانات خارجية. علاوة على ذلك ، فإن تخزين هذه البيانات خارج الكائن يجب أن يأخذ موارد قليلة نسبيًا ، وإلا فإن هذا النهج لا معنى له في الواقع لتلميحات الأداء. قد يكون نوع الكائن الذي يحتوي على كمية كبيرة من الكود الأساسي ومحتوى HTML أكثر ملاءمة لهذا النوع من التحسين.
بعد فصل البيانات الخارجية ، يكون عدد الكائنات الفريدة صغيرة نسبيًا.