الگوی طراحی اولیه – انجمن DEV

Summarize this content to 400 words in Persian Lang
الگوی طراحی نمونه اولیه در جاوا اسکریپت یک الگوی ایجادی است که به شما امکان می دهد به جای ایجاد اشیاء جدید با شبیه سازی یک شی موجود (“نمونه اولیه”) آنها را از ابتدا ایجاد کنید، که به عنوان نمونه اولیه عمل می کند. این الگو مخصوصاً برای جاوا اسکریپت مناسب است، زیرا جاوا اسکریپت خود یک زبان مبتنی بر نمونه اولیه است و زمانی مفید است که ایجاد شیء پرهزینه است یا زمانی که می خواهید شی ای ایجاد کنید که ویژگی های خاصی را با یک نمونه اولیه به اشتراک بگذارد.

کلاس های ES6 درک ساختار اشیا را آسان تر می کند. استفاده از Extend ها وراثت را ساده می کند اما قبل از ES6، prototype برای به ارث بردن و پیاده سازی این مورد استفاده شد. در اینجا وبلاگی برای درک این مفهوم است.

Ps: در Prototype Design Pattern در جاوا اسکریپت، هیچ متد clone() داخلی مانند برخی از زبان های دیگر (مانند جاوا) وجود ندارد. با این حال، می توانید به صورت دستی یک متد ()clone را در نمونه اولیه یا تابع سازنده خود پیاده سازی کنید تا عملکردی مشابه ارائه دهید.

ایده پشت الگوی نمونه اولیه این است که:

یک شی ایجاد کنید که به عنوان نمونه اولیه عمل می کند (طرح نقشه).
از آن شی برای ایجاد نمونه های جدید استفاده کنید، یا با کپی کردن آن یا پیوند دادن نمونه های جدید به نمونه اولیه.

مفاهیم کلیدی الگوی اولیه

نمونه اولیه: یک شی الگو که از آن اشیاء جدیدی ایجاد می شود.شبیه سازی: اشیاء جدید با کپی کردن نمونه اولیه ایجاد می شوند.زنجیره اولیه: اشیا می توانند رفتار را به نمونه اولیه خود واگذار کنند

قسمت 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
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

هدف: کلاس Shape به عنوان یک کلاس پایه یا “نمونه اولیه” عمل می کند که اشکال خاصی مانند دایره یا مستطیل می توانند از آن به ارث ببرند.

clone() روش: این بخش کلیدی از الگوی اولیه است. به جای ایجاد یک نمونه جدید از یک کلاس از ابتدا، یک کلون از نمونه موجود (یا “نمونه اولیه”) ایجاد می کنیم. در این مورد، Object.create(this) یک شی جدید ایجاد می کند که همان نمونه اولیه شکل اصلی را دارد.

قسمت 2: کلاس دایره

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;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:هدف: کلاس Circle کلاس Shape را گسترش می دهد و نوع خاصی از شکل را نشان می دهد.

صفات:

radius: شعاع دایره.
در سازنده، تابع super() سازنده کلاس Shape را فراخوانی می کند و «Circle» را به عنوان نوع شکل و رنگ می گذراند.

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;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

هدف: کلاس Rectangle کلاس Shape را گسترش می دهد و نوع خاصی از شکل (مستطیل) را نشان می دهد.

مانند کلاس Circle، کلاس Rectangle از super() برای فراخوانی کلاس والد Shape constructor استفاده می کند و مشخص می کند که این یک “مستطیل” است.
متد getArea(): این روش مساحت مستطیل را با استفاده از فرمول عرض * ارتفاع محاسبه می کند

قسمت 4: شبیه سازی و استفاده از نمونه اولیه

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

برای چاپ جزئیات (نوع و رنگ) myCircle و myRectangle از متد getDetails() به ارث رسیده از کلاس Shape استفاده می کنیم.
همچنین از متدهای getArea() (مخصوص کلاس های Circle و Rectangle) برای محاسبه و نمایش مساحت هر شکل استفاده می کنیم.

دیدگاه الگوی طراحی نمونه اولیه:

ایجاد نمونه اولیه: به جای ایجاد اشیاء جدید Circle و Rectangle از ابتدا، ابتدا یک نمونه اولیه (circlePrototype و rectanglePrototype) ایجاد می کنیم.

شبیه سازی: پس از وجود نمونه اولیه، از متد ()clone برای ایجاد اشیاء جدید بر اساس نمونه اولیه استفاده می شود. این جوهر الگوی نمونه اولیه است: ایجاد اشیا با کپی کردن یک شی موجود (نمونه اولیه).

مورد استفاده:

الگوی نمونه اولیه زمانی مفید است که:

شما باید با شبیه سازی اشیاء موجود، اشیاء جدیدی ایجاد کنید.
شما می خواهید از طبقه بندی فرعی اجتناب کنید و مستقیماً از اشیاء موجود به عنوان طرح اولیه استفاده مجدد کنید.
ایجاد پرهزینه یا پیچیده است و زمانی که بسیاری از اشیاء مشابه باید ایجاد شوند. با استفاده از نمونه های اولیه، می توانید فرآیند را ساده کنید و کارایی را بهبود بخشید.

اگر تا اینجا پیش رفته اید 💕✨ با هر سوال یا نظری در زیر نظر دهید. من دوست دارم از شما بشنوم و در چند بحث عالی شرکت کنم!✨

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
  }
}

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;
  }
}

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;
  }
}

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';

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