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

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

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

الفكرة وراء نمط النموذج الأولي هي:

1. إنشاء كائن يعمل كنموذج أولي (مخطط).
2. استخدم هذا الكائن لإنشاء مثيلات جديدة، إما عن طريق نسخه أو ربط مثيلات جديدة بالنموذج الأولي.

المفاهيم الأساسية لنمط النموذج الأولي

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

الجزء 1: فئة الشكل الأساسي

class Shape {
  constructor(type = 'Generic Shape', color = 'White') {
    this.type = type;
    this.color = color;
  }

  getDetails() {
    return `Type: ${this.type}, Color: ${this.color}`;
  }

  // Clone method to create a new object with the same prototype
  clone() {
    return Object.create(this);  // Creates a new object that inherits from this prototype
  }
}

توضيح:

الغرض: تعمل فئة الشكل كفئة أساسية أو "نموذج أولي" يمكن أن ترث منه أشكال معينة مثل الدوائر أو المستطيلات.

clone(): هذا جزء أساسي من نموذج النموذج الأولي. بدلاً من إنشاء مثيل جديد لفئة من البداية، نقوم بإنشاء نسخة من المثيل الموجود (أو "النموذج الأولي"). في هذه الحالة، يقوم Object.create(this) بإنشاء كائن جديد يشترك في نفس النموذج الأولي مع الشكل الأصلي.

الجزء الثاني: فئة الدائرة

class Circle extends Shape {
  constructor(radius = 0, color = 'White') {
    super('Circle', color); // Calls the parent (Shape) constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

توضيح:
الغرض: تعمل فئة الدائرة على توسيع فئة الشكل وتمثل نوعًا معينًا من الشكل.

صفات:

• نصف القطر: نصف قطر الدائرة.
• في المنشئ، تستدعي الدالة super() مُنشئ ملف فئة الشكل، مع تمرير "دائرة" كنوع الشكل واللون.

getArea() الطريقة: يتم حساب مساحة الدائرة باستخدام الصيغة π * نصف القطر^2.

الجزء 3: فئة المستطيل

class Rectangle extends Shape {
  constructor(width = 0, height = 0, color = 'White') {
    super('Rectangle', color);  // Calls the parent (Shape) constructor
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

توضيح:

الغرض: تعمل فئة المستطيل على توسيع فئة الشكل وتمثل نوعًا محددًا آخر من الأشكال (مستطيل).

• مثل فئة الدائرة، تستخدم فئة المستطيل super() لاستدعاء مُنشئ الشكل للفئة الأصلية، مع تحديد أن هذا "مستطيل".
• طريقة getArea(): هذا يحسب مساحة المستطيل باستخدام صيغة العرض * الارتفاع

الجزء الرابع: الاستنساخ واستخدام النموذج الأولي

const circlePrototype = new Circle();  // Create prototype
const myCircle = circlePrototype.clone();  // Clone the prototype
myCircle.radius = 5;
myCircle.color = 'Red';

const rectanglePrototype = new Rectangle();  // Create prototype
const myRectangle = rectanglePrototype.clone();  // Clone the prototype
myRectangle.width = 10;
myRectangle.height = 5;
myRectangle.color = 'Blue';

توضيح:

هنا، بدلاً من إنشاء كائنات myCircle وmyRectangle من البداية باستخدام الكلمة الأساسية الجديدة، نقوم باستنساخ النماذج الأولية.

عملية الاستنساخ:

• أولاً، نقوم بإنشاء نماذج أولية (circlePrototype وrectanglePrototype).
• ثم نقوم باستنساخ هذه النماذج الأولية باستخدام طريقة clone()، والتي تقوم بإنشاء كائنات جديدة ترث من كائن النموذج الأولي.

تعديل المثيلات المستنسخة:

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

الجزء 5: الإخراج

console.log(myCircle.getDetails()); // Output: Type: Circle, Color: Red
console.log(`Circle Area: ${myCircle.getArea()}`);  // Output: Circle Area: 78.54

console.log(myRectangle.getDetails()); // Output: Type: Rectangle, Color: Blue
console.log(`Rectangle Area: ${myRectangle.getArea()}`);  // Output: Rectangle Area: 50

توضيح:

• نستخدم طريقة getDetails() الموروثة من فئة الشكل لطباعة التفاصيل (النوع واللون) الخاصة بـ myCircle وmyRectangle.
• نستخدم أيضًا أساليب getArea() (خاصة بفئتي الدائرة والمستطيل) لحساب مساحة كل شكل وعرضها.

منظور نمط تصميم النموذج الأولي:

• إنشاء نموذج أولي: بدلاً من إنشاء كائنات جديدة للدائرة والمستطيل من البداية، نقوم أولاً بإنشاء نموذج أولي (circlePrototype وrectanglePrototype).
• الاستنساخ: بمجرد وجود النموذج الأولي، يتم استخدام طريقة clone() لإنشاء كائنات جديدة بناءً على النموذج الأولي. هذا هو جوهر نموذج النموذج الأولي: إنشاء الكائنات عن طريق نسخ كائن موجود (النموذج الأولي).

حالة الاستخدام:

يكون نمط النموذج الأولي مفيدًا عندما:

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

إذا كنت قد وصلت إلى هذا الحد؟✨، قم بإسقاط تعليق أدناه مع أي أسئلة أو أفكار. أود أن أسمع منك وأن أشارك في بعض المناقشات الرائعة!✨