البرنامج التعليمي حول استخدام أنماط الجمع في تطوير نمط تصميم جافا سكريبت

خلال عملية التطوير العادية لدينا ، سنواجه بالتأكيد هذا الموقف: نقوم بمعالجة كائنات بسيطة وكائنات معقدة تتكون من كائنات بسيطة في نفس الوقت. سيتم دمج هذه الكائنات البسيطة والكائنات المعقدة في بنية شجرة ، ويجب على العميل الحفاظ على الاتساق عند معالجتها. على سبيل المثال ، بالنسبة لطلبات المنتج في مواقع التجارة الإلكترونية ، قد يكون لكل طلب منتج مجموعات متعددة من الدرجة الفرعية ، مثل المجلدات الموجودة في نظام التشغيل ، يحتوي كل مجلد على أجهزة أو ملفات فرعية متعددة. عندما ننسخ ، حذفها ، وما إلى ذلك ، سواء كان مجلد أو ملفًا ، فهذا هو نفسه بالنسبة للمشغلين. في هذا السيناريو ، من المناسب جدًا استخدام وضع المركب لتحقيقه.

المعرفة الأساسية

وضع المركب: الجمع بين الكائنات في بنية شجرة لتمثيل التسلسل الهرمي "الجزئي". يتيح وضع المركب للمستخدمين أن يكون لديهم اتساق في استخدامهم للكائنات الفردية والكائنات المدمجة.

هناك ثلاثة أحرف رئيسية في وضع الجمع:

(1) مكون مجردة (مكون): فئة مجردة تحدد بشكل أساسي الواجهة العامة للكائنات المشاركة في المجموعة

(2) الكائن الفرعي (ورقة): الكائن الأساسي الذي يشكل كائنًا مشتركًا

(3) المركب: كائنات معقدة مجتمعة بواسطة كائنات الطفل

مفتاح فهم نمط الجمع هو فهم اتساق نمط الجمع للكائنات الفردية والكائنات المدمجة. دعنا نتحدث عن تنفيذ أنماط الجمع لتعميق فهمنا.

تم تصميم وضع المركب لإنشاء واجهة مستخدم ديناميكيًا على الصفحة. يمكنك استخدام حياة واحدة فقط = أمر لتهيئة بعض العمليات المعقدة أو العودية للعديد من الكائنات. يوفر وضع المركب نقطتين:

(1) اسمح لك بمعالجة مجموعة من الكائنات ككائنات محددة. يقوم كائن مركب بتنفيذ نفس العملية التي تصنعها. إن إجراء عملية معينة على كائن مشترك سيؤدي إلى قيام جميع الكائنات الفرعية تحت هذا الكائن بتنفيذ نفس العملية. لذلك ، لا يمكنك فقط استبدال كائن واحد بسلاسة في مجموعة من الكائنات ، ولكن أيضًا نفس الشيء بدوره. هذه الكائنات المستقلة ما يسمى بالاقتران بشكل فضفاض.

(2) سوف يجمع نمط التركيبة بين مجموعة الكائنات الفرعية في بنية شجرة ويسمح بالتجاوز للشجرة بأكملها. سيؤدي ذلك إلى إخفاء التنفيذ الداخلي ويسمح لك بتنظيم الكائنات الفرعية بأي شكل من الأشكال. لن يعتمد أي رمز لهذا الكائن (الكائن المدمج) على تنفيذ الكائنات الفرعية الداخلية.

تنفيذ وضع المركب

(1) أبسط وضع مجموعة

هيكل DOM لمستندات HTML هو بنية شجرة طبيعية. تصبح العناصر الأساسية أشجار دوم وتشكيل مستندات DOM في النهاية. إنه مناسب جدًا لوضع المركب.

غالبًا ما نستخدم مكتبة فئة jQuery ، حيث يتم تطبيق نمط الجمع بشكل متكرر ، على سبيل المثال ، غالبًا ما يتم تنفيذ الكود التالي:

 $ (". test"). addClass ("notest"). إزالة ("اختبار") ؛

هذا الرمز البسيط هو الحصول على العنصر الذي يحتويه الفئة على الاختبار ، ثم معالجته باستخدام AddClass و RemoveClass. ما إذا كان $ (". اختبار") عنصر واحد أو عناصر متعددة ، فهو يطلق عليه في النهاية من خلال واجهات addclass الموحدة وإزالة الإزالة.

دعونا نحاكي بإيجاز تطبيق AddClass:

 var addClass = function (eLes ، className) {if (eles extreamof nodeList) {for (var i = 0 ، length = eles.length ؛ i <length ؛ i ++) {eles [i] }} آخر إذا (eLes eastyof node) {eles.nodeType === 1 && (eles.className + = ('' + className + ''))) ؛ } آخر {رمي "ELES ليس عقدة HTML" ؛ }} addClass (document.getElementById ("div3") ، "test") ؛ addClass (document.queryselectorall (". div") ، "test") ؛

يحاكي هذا الرمز ببساطة تنفيذ AddClass (لا يتم النظر في التوافق والعالمية في الوقت الحالي) ، ومن السهل الحكم على نوع العقدة أولاً ، ثم إضافة اسم classname وفقًا لأنواع مختلفة. بالنسبة إلى NodeList أو Node ، تستخدم مكالمات العميل واجهة AddClass بنفس الطريقة. هذه هي الفكرة الأساسية لوضع المركب ، مما يجعل استخدام الجزء والمتسق.

(2) أمثلة نموذجية

لقد ذكرنا مثالًا نموذجيًا: يحتوي ترتيب المنتج على عروض فرعية متعددة للمنتجات ، ويشكل الطلبات الفرعية المتعددة للمنتج ترتيب منتج معقد. نظرًا لخصائص لغة JavaScript ، نقوم بتبسيط الأدوار الثلاثة لنمط الجمع إلى أدوار 2:

(1) SubObject: في هذا المثال ، فإن subobject هو فرع فرعي للمنتج

(2) كائن مزيج: هذا هو الترتيب الكلي للمنتج

لنفترض أننا نطور موقعًا للمنتج السياحي يحتوي على منتجين فرعيين: تذاكر الهواء والفنادق. نحدد الكائنات الفرعية على النحو التالي:

 وظيفة FlightOrder () {} flightorder.prototyp.create = function () {console.log ("ترتيب الطيران الذي تم إنشاؤه") ؛} وظيفة HotelOrder () {}}

يحدد الرمز أعلاه فئتين: فئة طلب التذاكر الجوية وفئة طلب الفندق. كل فصل له طريقة إنشاء الطلب الخاصة بها.

التالي ننشئ فئة ترتيب إجمالية:

 الوظيفة totalorders () {this.orderlist = [] ؛} totalorders.prototype.addorder = function (order) {this.orderlist.push (order) ؛} totalorders.prototype.create = function (order) {for (var i = 0 ، length. }}

يحتوي هذا الكائن على ثلاثة أعضاء رئيسيين: قائمة أوامر وطريقة لإضافة طلب وطريقة لإنشاء طلب.

عند استخدام العميل ، فإن ما يلي كما يلي:

 var flight = new FlightOrder () ؛ flight.create () ؛ var orders = new totalorders () ؛ Orders.AdDorder (new FlightOrder ()) ؛ orders.addorder (new HotelOrder ()) ؛ Orders.Create () ؛

تُظهر مكالمات العميل طريقتين ، إحداها هي إنشاء طلبات تذكرة جوية ، والآخر هو إنشاء أوامر متعددة ، ولكن يتم إنشاؤها في النهاية من خلال طريقة إنشاء. هذا سيناريو تطبيق نموذجي للغاية لوضع المركب.

لخص

نمط الجمع ليس من الصعب فهمه. إنه يحل بشكل أساسي مشكلة الاتساق للكائنات المفردة والكائنات المدمجة بالطريقة التي يتم استخدامها. هذا أمر رائع لاستخدام أنماط التوافقي إذا كانت الكائنات لها تسلسل هرمي واضحة وتريد استخدامها بشكل موحد. في تطوير الويب ، يعد هذا التسلسل الهرمي شائعًا جدًا وهو مناسب جدًا لاستخدام أنماط الجمع. خاصة بالنسبة لـ JS ، لا يتعين عليك الالتزام بنموذج اللغة التقليدية الموجهة للكائنات ، واستخدام خصائص لغة JS بمرونة لتحقيق الاتساق جزئيًا والاستخدام العام.

(1) سيناريوهات باستخدام وضع المركب

استخدم وضع المركب عند مواجهة حالتين التاليتين

أ. مجموعة من الكائنات التي تحتوي على بنية هرمية معينة (لا يمكن تحديد الهيكل المحدد أثناء عملية التطوير)

B. تريد القيام ببعض العمليات على هذه الكائنات أو بعضها

(2) عيوب الوضع المركب

نظرًا لأن أي عملية كائن مشترك ستستدعي نفس العملية على جميع الكائنات الفرعية ، فستكون هناك مشاكل في الأداء عندما يكون الهيكل المشترك كبيرًا. أيضًا ، عند استخدام وضع المركب لتغليف HTML ، يجب عليك تحديد العلامة المناسبة. على سبيل المثال ، لا يمكن استخدام الجدول في وضع المركب ، وعقد الأوراق ليست واضحة.