أنماط تصميم JS: أنماط إنشاء كائن

لذلك ، مواطنين خابروفسك ، بالفعل هذا الخميس في OTUS ستبدأ الدورة التدريبية "Fullstack JavaScript Developer" . واليوم نحن نشارك معك منشورات مؤلف آخر تحسبا لبدء الدورة.



مؤلف المقال: بافل ياكوبوف

---

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

ببساطة ، أنماط التصميم هي حلول ناجحة يتم استخدامها بشكلٍ كافٍ في كثير من الأحيان. تشكلت أنماط التصميم كمفهوم في وقت لم يتم فيه ذكر لغة برمجة جافا سكريبت ، في مجال أنماط تصميم هندسة البرمجيات تم وصفها بالتفصيل في عام 1994 من قبل Big Four. ومع ذلك ، في مقالتنا ، سوف ننتقل إلى تنفيذ بعض الأنماط البسيطة في لغة برمجة JavaScript.

دعنا ننتقل بسرعة إلى الأنواع الرئيسية لأنماط التصميم:

أنماط تصميم الإبداع

كما يوحي الاسم ، يتم استخدام هذه الأنماط بشكل أساسي لإنشاء كائنات جديدة. وتشمل هذه الأنماط مثل Constructor و Factory و Prototype و Singleton.

أنماط التصميم الهيكلي

ترتبط هذه الأنماط بالفئات وتكوين الكائنات. فهي تساعد في هيكلة أو إعادة هيكلة الكائنات أو أجزائها دون تعطيل تشغيل النظام بأكمله.

أنماط تصميم السلوك

يهدف هذا النوع من أنماط التصميم إلى تحسين التواصل بين الكائنات المختلفة. تشمل أنماط التصميم السلوكي Commander ، و Iterator ، و Mediator ، و Observer ، ونمط State ، و Strategy ، وقالب.

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

نمط "الوحدة"

ظهر نمط التصميم هذا بلغة JavaScript ، إذا جاز التعبير ، لا إراديًا. في البداية ، لم تفكر اللغة في مواجهة مثل هذه الظواهر مثل تلوث النطاق العالمي (وفي لغات أخرى ، مثل C # أو C ++ ، توجد مساحة اسم تعمل على حل هذه المشكلة من الصندوق). بالإضافة إلى ذلك ، تعد الوحدات ضرورية جزئيًا لإعادة استخدام الشفرة ، لأنه بعد أن يتم إنشاؤها واستخدامها لأول مرة ، يمكن توصيلها بمشروعات فرق أخرى تستخدم ساعات عمل أكثر كفاءة.
وحدة نمطية طوال وجودها (بالفعل في ES5 كان يستخدم على نطاق واسع) تستخدم IIFE (تسمى على الفور التعبيرات الوظيفية).

فيما يلي مثال بسيط لنموذج "الوحدة النمطية":

const first_Module = (function() { let Surname = "Ivanov"; let Nickname = "isakura313"; function declare_Surname() { console.log(Surname); } return { declare_Nickname: function() { alert(Nickname); } } })(); first_Module.declare_Nickname(); console.log(Surname); //       

يحتوي نموذج "الوحدة النمطية" على غلاف كامل للبيانات الموجودة فيه. لا يمكننا الوصول إليها إلا باستخدام الطرق العامة ، وإلى أن يتم تنفيذ تطبيقات جافا سكريبت الخاصة بالطرق العامة والخاصة "خارج الصندوق" بهذه الطريقة.

منشئ نمط

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

 //     to-do  //,    ,           class ItemDeal { constructor(name, color) { this.name = name; this.color = color; } } //     ,       localStorage  ? let item = new ItemDeal(`${text}`, `${select.value - 1}`); // text -   , a select.value -    let myJson = JSON.stringify(item); //        //localStorage,        //localStorage.setItem(item.name, myJson); 

نمط المصنع

نمط المصنع هو نمط آخر يركز على إنشاء كائن من الفصل الدراسي. في ذلك ، نحن نقدم واجهات شائعة تفوض إنشاء كائن الفئات الفرعية.

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

حسنًا ، ما عليك سوى عرض جزء من الشفرة لـ RPG النصية في وحدة التحكم:

 class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack()); //  

نموذج النموذج

نستخدم هنا نوعًا من "الهيكل العظمي" لكائن حقيقي لإنشاء كائن جديد. والنماذج الأولية هي أكثر أنواع بناء OOP في JavaScript.

 //,     to-do  const itemDeal = { colorOfHeader: blue; //     .    ? create() { console.log("our item create"); //  item }, delete() { console.log("our item delete now"); //   item }, }; //     ,  to-do  //  ,   Trello. const newDeal = Object.create(itemDeal, { owner: { value: 'Paul' } }); console.log(newDeal.__proto__ === itemDeal); //true 

نموذج النموذج الأولي مفيد إذا كان التطبيق الخاص بك يمكن أن يوسع أو يقلل من وظائفه بطريقة أو بأخرى.

نمط وحيد

أو ، كما هو معروف ، "سينجلتون". "الشخص الوحيد" هو نمط خاص يمكن أن يوجد فيه مثيل واحد فقط من الفصل. يعمل النموذج كما يلي - ستعمل تهيئة الكائن إذا لم يتم إنشاء مثيل واحد أو إرجاعه. إذا كان موجودًا ، فسيتم إرجاع الكائن الذي تم تشغيله.
لنفترض أننا نخلق فئة من الشخصية الرئيسية ، ونريدها أن تكون 1 ، وليس 4 ، كما في Jumanji.

 class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } } //    const smolder = new Hero('Smolder!'); console.log(smolder.getName()); // Smolder! const ruby = new Hero('Ruby'); console.log(ruby.getName()); // Smolder! // ,       .         . //            

شكرا لكم جميعا على اهتمامكم! آمل أن تكون هذه المقالة بمثابة بداية جيدة لـ OOP في JavaScript (على الرغم من أن أكون صريحًا ، فإن زميلي الذي يتمتع بخبرة سنوات عديدة في كل من Java و JavaScript ، OOP ليس مطورًا جدًا هناك ، بعبارة ملطفة). ومع ذلك ، في المعايير الجديدة ، تحسنت اللغة بشكل كبير ، وأنا متأكد من أن هذه المنهجية لن تستخدم إلا في كثير من الأحيان (أو سوف يأتي دارت ويحل محل كل شيء).

روابط مفيدة:

developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/create
learn.javascript.ru/class
developer.mozilla.org/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript