✨JS Design Patterns: A Comprehensive Guid [ Part 1 ]

✨ این مطلب یک راهنمای جذاب در زمینه الگوهای طراحی در جاوا اسکریپت است که اهمیت بالایی در دنیای برنامه‌نویسی دارد. این الگوها، که راه‌حل‌های امتحان‌پس‌داده برای مشکلات متداول در برنامه‌نویسی هستند، به شما کمک می‌کنند تا کدهای خود را به شکلی منظم، قابل نگهداری و گسترش‌پذیر بنویسید. در اینجا به بررسی چند نمونه از این الگوها در جاوا اسکریپت پرداخته می‌شود

1️⃣ الگو Singleton Pattern:

این الگو اطمینان می‌دهد که یک کلاس تنها یک نمونه (instance) داشته باشد. مثلاً برای مدیریت پایگاه‌داده یا تنظیمات سیستمی در جاوا اسکریپت کاربرد دارد. کد نمونه زیر نشان‌دهنده این است که چگونه دو شیء از یک کلاس به یک نمونه اشاره می‌کنند:

   let instance;
   class Database {
       constructor(data) {
           if (instance) {
               return instance;
           }
           this.data = data;
           instance = this;
       }
       getData() {
           return this.data;
       }
   }
   const db1 = new Database('db1');
   const db2 = new Database('db2');
   console.log(db1 === db2); // true
   

2️⃣ الگو Observer Pattern:

این الگو به شما اجازه می‌دهد تغییرات در یک شیء را رصد کنید و در صورت وقوع تغییرات، اطلاع‌رسانی کنید. این کد نشان می‌دهد چگونه می‌توانید اشیاء را به یک موضوع مشترک متصل کنید و در هنگام تغییر داده‌ها، اطلاع‌رسانی کنید:

   class Subject {
       constructor() {
           this.observers = [];
       }
       subscribe(observer) {
           this.observers.push(observer);
       }
       unsubscribe(observer) {
           this.observers = this.observers.filter(obs => obs !== observer);
       }
       notify(data) {
           this.observers.forEach(observer => observer.update(data));
       }
   }
   class Observer {
       update(data) {
           console.log(`Observer received data: ${data}`);
       }
   }
   const subject = new Subject();
   const observer1 = new Observer();
   const observer2 = new Observer();
   subject.subscribe(observer1);
   subject.subscribe(observer2);
   subject.notify('Hello World');
   

3️⃣ الگو Module Pattern:

این الگو به شما کمک می‌کند تا کد خود را به صورت ماژول‌های مستقل سازمان‌دهی کنید تا از تداخل متغیرها و توابع در فضای نام جلوگیری شود:

   const MyModule = (() => {
       let privateVar = 'I am private';
       return {
           publicMethod: () => `The value of privateVar is: ${privateVar}`
       };
   })();
   console.log(MyModule.publicMethod());
   

📁 #javascript #DesignPatterns

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding

🔥 درسگفتار کامل درباره Spread Syntax و Rest Operator در جاوااسکریپت

جاوااسکریپت دو قابلیت بسیار مهم و کاربردی داره که شاید در نگاه اول شبیه به هم به نظر بیان، ولی در واقع کاربردهای کاملاً متفاوتی دارن:

🔸 Spread Syntax

🔹 Rest Operator



هر دو از سه نقطه (...) استفاده می‌کنن، اما تفاوت اصلی اینه که:

- Spread Syntax برای باز کردن (پخش کردن) داده‌ها استفاده می‌شه.
- Rest Operator برای جمع کردن (گروه‌بندی کردن) داده‌ها استفاده می‌شه.

حالا بریم سراغ توضیح دقیق و ساده برای هرکدوم.

🟢 Spread Syntax → باز کردن محتوا

کاربرد اصلی:

استفاده برای کپی کردن، ترکیب کردن، یا ارسال مقدارهای جدا از هم به یک تابع.

در واقع، Spread Syntax محتوا رو از داخل آرایه یا آبجکت "پخش" می‌کنه و اون رو جدا از هم استفاده می‌کنه.

✅ مثال ۱: کپی کردن آرایه

const numbers = [1, 2, 3];
const newNumbers = [...numbers]; // کپی آرایه اصلی

console.log(newNumbers); // [1, 2, 3]

✅ این روش به جای تغییر آرایه اصلی، یک نسخه جدید می‌سازه که باعث جلوگیری از تغییرات ناخواسته می‌شه.


مثال ۲: ترکیب دو آرایه

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combined = [...numbers1, ...numbers2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

✅ این روش یک روش تمیز و سریع برای ترکیب آرایه‌هاست، بدون نیاز به ()concat.


مثال ۳: ارسال آرایه به عنوان آرگومان‌های یک تابع

const numbers = [1, 2, 3];

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...numbers)); // 6

✅ این روش به جای فرستادن آرایه، مقدارهای درونش رو جدا جدا به تابع ارسال می‌کنه.



مثال ۴: کپی کردن و ترکیب آبجکت‌ها

const person = { name: "Ali", age: 30 };
const newPerson = { ...person, city: "Tehran" };

console.log(newPerson); 
// { name: "Ali", age: 30, city: "Tehran" }

✅ این روش برای کپی کردن یا اضافه کردن مقدار به آبجکت‌ها خیلی کاربردی‌ست.



🔴 Rest Operator → جمع کردن مقادیر

کاربرد اصلی:
برای جمع‌آوری مقادیر باقی‌مانده در آرایه‌ها یا توابع استفاده می‌شه.

برخلاف Spread Syntax که "باز" می‌کنه، Rest Operator مقدارها رو "جمع" می‌کنه و داخل یک آرایه می‌ذاره.

✅ مثال ۱: گرفتن چند آرگومان در تابع

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

✅ این روش همه‌ی ورودی‌ها رو جمع می‌کنه و داخل یک آرایه numbers ذخیره می‌کنه.


مثال ۲: جداسازی اولین مقدار و جمع‌آوری بقیه

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

✅ و `first` مقدار اول رو دریافت کرده، و `rest` بقیه‌ی مقدارها رو درون آرایه ذخیره کرده.

مثال ۳: دریافت مقادیر باقی‌مانده در آبجکت

const person = { name: "Ali", age: 30, city: "Tehran" };

const { name, ...rest } = person;

console.log(name); // "Ali"
console.log(rest); // { age: 30, city: "Tehran" }

✅ و name مقدار Ali رو دریافت کرده، و rest بقیه‌ی ویژگی‌ها رو جمع‌آوری کرده.


✨ جمع‌بندی نهایی

🔹 اگر می‌خواهی داده‌ها را از داخل یک آرایه یا آبجکت بیرون بکشی و در جاهای مختلف استفاده کنی → `Spread Syntax`

🔹 اگر می‌خواهی چندین مقدار را به عنوان یک مجموعه بگیری و در قالب یک آرایه نگه داری → `Rest Operator`


📁 #javascript

✅ کانال تخصصی لاراول
📌 @PapiDon_state

☕️ اتاق برنامه‌نویسی
📌 @PapiDon_coding