💡مفهوم Design Pattern چیه؟ (توضیح ساده با مثال‌های جاوااسکریپتی)

راه‌حل آزمایش‌شده برای مشکلاتی هست که توی طراحی نرم‌افزار تکرار می‌شن.

🎯 دسته‌بندی کلی:
1. Creational (ایجادکننده) → ساختن آبجکت‌ها به شکل درست
2. Structural (ساختاری) → ساختار و ارتباط بین کلاس‌ها و آبجکت‌ها
3. Behavioral (رفتاری) → نحوه تعامل و رفتار آبجکت‌ها با هم

-------------------------------------

1. Singleton Pattern

فقط یک نمونه (instance) از یک کلاس داشته باشیم

✅ مثال:

const Singleton = (function () {
  let instance;

  function createInstance() {
    return { id: Date.now() };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

-------------------------------------

2. Factory Pattern

ساختن آبجکت بدون مشخص کردن کلاس دقیق

✅ مثال:

function UserFactory(role) {
  if (role === "admin") {
    return { role: "admin", permissions: ["read", "write", "delete"] };
  }
  if (role === "user") {
    return { role: "user", permissions: ["read"] };
  }
}

const admin = UserFactory("admin");
const user = UserFactory("user");

-------------------------------------

3. Module Pattern

پنهان‌سازی دیتا با استفاده از Scope

const Counter = (function () {
  let count = 0;

  return {
    increment() {
      count++;
      return count;
    },
    reset() {
      count = 0;
    }
  };
})();

Counter.increment(); // 1
Counter.increment()

-------------------------------------

4. Observer Pattern

آبجکت‌ها می‌تونن به تغییرات یه آبجکت دیگه واکنش نشون بدن (مثل Event system)

✅ مثال:

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

const news = new Subject();

news.subscribe((msg) => console.log("Listener 1:", msg));
news.subscribe((msg) => console.log("Listener 2:", msg));

news.notify("New Article Published!");

-------------------------------------

5. Strategy Pattern

تغییر رفتار با جایگزینی الگوریتم در زمان اجرا

✅ مثال:

class PaymentProcessor {
  constructor(strategy) {
    this.strategy = strategy;
  }

  pay(amount) {
    this.strategy.pay(amount);
  }
}

class PayPal {
  pay(amount) {
    console.log("Paying with PayPal:", amount);
  }
}

class Stripe {
  pay(amount) {
    console.log("Paying with Stripe:", amount);
  }
}

const processor = new PaymentProcessor(new PayPal());
processor.pay(100); // Paying with PayPal: 100

processor.strategy = new Stripe();
processor.pay(200); // Paying with Stripe: 200

-------------------------------------

6. Decorator Pattern

اضافه‌کردن ویژگی به آبجکت، بدون تغییر ساختارش

function user(name) {
  return { name };
}

function withEmail(user, email) {
  return { ...user, email };
}

const ali = user("Ali");
const aliWithEmail = withEmail(ali, "ali@example.com");

-------------------------------------

7. Proxy Pattern

کنترل دسترسی یا تغییر رفتار دسترسی به آبجکت

✅ مثال:

const user = {
  name: "Ali",
  password: "1234"
};

const securedUser = new Proxy(user, {
  get(target, prop) {
    if (prop === "password") {
      return "****"; // مخفی کردن پسورد
    }
    return target[prop];
  }
});

console.log(securedUser.name);     // Ali
console.log(securedUser.password); // ****

-------------------------------------

8. Command Pattern

اجرای دستورات با قابلیت undo/redo

✅ مثال:

class Light {
  on() {
    console.log("Light ON");
  }

  off() {
    console.log("Light OFF");
  }
}

class Command {
  constructor(action) {
    this.action = action;
  }

  execute() {
    this.action();
  }
}

const light = new Light();
const turnOn = new Command(() => light.on());
const turnOff = new Command(() => light.off());

turnOn.execute();
turnOff.execute();

مطالب بیشتر در کانال رقصنده با کد:
https://news.1rj.ru/str/danceswithcode

#interview #designpattern @alithecodeguy

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

برنامه‌نویسا در مجموع آدمای آروم‌ترین ولی بی‌ادب و غیر اجتماعی نیستن.

جلسه ۱ دوره جامع جاوااسکریپت کلندر شد.
(هم نفرات ثبت نامی و هم برای نفرات رایگان)

اگر تازه قصد دارید شرکت کنید و یا اعلام کردید ولی ایمیل کلندر براتون نیومده ، لطفا بگید که اضافتون کنم.

@alithecodeguy

مفهوم WeakRef (ریفرنس ضعیف) در جاوااسکریپت چیه؟


اول از همه: چه مشکلی داریم که WeakRef قراره حل کنه؟

در جاوااسکریپت، وقتی شما یک شی (object) بسازید و بهش ارجاع بدید، اون شی تا زمانی که ارجاع بهش وجود داشته باشه، از حافظه پاک نمی‌شه (GC – Garbage Collection نمی‌تونه پاکش کنه).

اما گاهی وقتا شما می‌خواین یک شی رو ضعیف ارجاع بدید؛ یعنی:
• اگر کسی دیگه به اون شی کاری نداره، اجازه بدید GC پاکش کنه.
• اگر هم هنوز هست، شما بتونید بهش دسترسی داشته باشید.

اینجاست که WeakRef به کار میاد.

تعریف ساده: “من یه اشاره‌گر (reference) به این شی دارم، ولی اگه سیستم نیاز داشت حافظه رو آزاد کنه، اجازه داره این شی رو پاک کنه؛ من اصراری ندارم نگهش داره.”

سینتکس استفاده از WeakRef:

const ref = new WeakRef(obj);
const original = ref.deref(); // تلاش برای دسترسی به شی

مثال ساده:

let user = {
  name: "Ali"
};

const weakRef = new WeakRef(user);

user = null;

const maybeUser = weakRef.deref();

if (maybeUser) {
  console.log("User is still alive:", maybeUser.name);
} else {
  console.log("User has been garbage collected.");
}

نکات مهم:

در نظر داشته باشید WeakRef نباید برای نگه‌داری دائمی داده استفاده بشه.
داده‌ای که در WeakRef هست، ممکنه در هر لحظه‌ای پاک بشه!
چون GC زمان مشخصی نداره، ممکنه بعضی وقتا شی بمونه، بعضی وقتا زود پاک شه.

چه وقت به درد می‌خوره؟

1. کش‌ها (Cache): مثلا بخوای یه سری داده رو کش کنی، ولی اگر حافظه پر شد، اجازه بدی که پاک بشن.
2. مراجع موقتی که نباید جلوی GC رو بگیرن.
3. سرویس‌های پس‌زمینه که بعضی دیتاها رو نگه می‌دارن اما نمی‌خوان فشار بیارن به رم.

کجای فرانت ممکنه به WeakRef نیاز داشته باشیم؟

در فرانت‌اند ما با منابع زیادی سر و کار داریم:
یک. DOM nodes (المان‌های صفحه)
دو. تصاویر، ویدیوها، و منابع سنگین
سه. داده‌های کش‌شده (مانند نتایج API)
چهار. event listeners
پنج. objectهای سنگینی مثل canvas، WebGL، سه‌بعدی، etc.

حالا بعضی از اینا اگر درست مدیریت نشن باعث memory leak می‌شن.

مثال واقعی WeakRef در فرانت‌اند:

فرض کن یه سیستم auto-complete داری که نتایج جستجو رو کش می‌کنی:

const cache = new Map();

function getData(query) {
  const cached = cache.get(query)?.deref();
  if (cached) return Promise.resolve(cached);

  return fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(data => {
      cache.set(query, new WeakRef(data));
      return data;
    });
}

داده‌هایی که کسی بهشون ارجاع نداره، خودکار پاک می‌شن! پس حافظه سبک می‌مونه.

یکی از تومخی‌ترین اتفاق‌هایی که ممکنه هنگام ادیت چندتا کلمه یکسان به صورت همزمان ، اتفاق بیفته ، یکی نبودن کلمات از نظر بزرگ کوچیک بودن حروفه.
این افزونه ، این مشکل رو حل میکنه.

این چه کثافتیه.... لایک بگیری که چی بشه وقتی تو خالی هستی

آخرین مهلت برای ثبت نام دوره جامع جاوااسکریپت

جلسه اولش رایگانه و همه میتونن شرکت کنن.

فردا (جمعه) ساعت ۱۰ صبح با حضور ۱۰ نفر از دوستان برگزار میشه

دستور with یکی از بخش‌های قدیمی و گیج‌کننده‌ی جاوااسکریپته که خیلیا حتی نمی‌دونن وجود داره و استفاده ازش اکیداً توصیه نمی‌شه.

عبارت with بهت اجازه می‌ده تا بدون تکرار نام یک شیء، مستقیم به پراپرتی‌های اون دسترسی داشته باشی.

with (object) {
  // کدهایی که انگار درون object نوشته شدن
}

یعنی جاوااسکریپت داخل اون بلاک، به تمام پراپرتی‌های اون شیء به صورت مستقیم نگاه می‌کنه، بدون اینکه نیاز باشه بنویسی object. هر بار.

const person = {
  name: 'Ali',
  age: 30,
};

with (person) {
  console.log(name); // مثل اینه که نوشتی person.name
  console.log(age);  // مثل person.age
}

بزرگ‌ترین مشکل with اینه که باعث ابهام در متغیرها می‌شه. چون مشخص نیست آیا داری از یه متغیر محلی استفاده می‌کنی یا یه پراپرتی از اون شیء.

const obj = { x: 10 };

function test() {
  const x = 5;

  with (obj) {
    console.log(x); // 😵 آیا منظور x از obj هست یا متغیر محلی x ؟
  }
}
test();

در حالت strict mode استفاده از عبارت with ممنوعه و باعث خطای سینتکسی (Syntax Error) می‌شه.

مفهوم Boxed Object در جاوااسکریپت به زبان ساده:

" تبدیل خودکار یک مقدار ساده (primitive) مثل string، number، یا boolean به یک شیء متناظر با آن، تا بتوان از ویژگی‌ها و متدهای شیء روی آن استفاده کرد. "

const str = "hello";
console.log(str.toUpperCase()); // "HELLO"

شاید به نظر بیاد str یه رشته (string) ساده‌ست، ولی چطور می‌تونه متد toUpperCase() داشته باشه؟!

چون جاوااسکریپت موقع اجرا به‌طور خودکار اون string ساده رو برای مدت کوتاهی تبدیل می‌کنه به یه شیء از نوع String:

// پشت صحنه
const str = new String("hello");
str.toUpperCase();

این تبدیل موقتی به شیء رو می‌گن Boxing
و این شیء رو می‌گن Boxed Object.

جزوه جلسه اول دوره جامع جاوااسکریپت که ۱۵ دقیقه دیگه برگزار میشه (تنها جلسه رایگان این دوره)

آپدیت: برگزار شد.

اگر تعداد اعضای کانال به ۱۰۰۰ برسه ، آپدیت‌ترین نسخه pdf و epub سایت javanoscript info رو خریداری میکنم و در اختیارتون قرار میدم که تا ۱ سال هم میشه آپدیت‌ترین ورژنش رو همچنان مستقیم از خود سایت دانلود کرد.

یه هل بدید ، رسیدیم 💪

فعلا این گرونترین دوره‌ایه که دیدم. ۳۵ میلیون تومن.

دنبال اون ۶۸ تومنی میگردم پیداش نمیکنم 😑

دستور queueMicrotask در جاوااسکریپت چیه؟

تابع queueMicrotask بهت اجازه میده یه کار رو بذاری توی صف microtask تا بعد از اینکه کد فعلی (sync code) تموم شد اجرا بشه، ولی قبل از هر macrotask مثل setTimeout.

فکر کن داری الان کدی رو اجرا می‌کنی. می‌خوای یه بخش کوچیک از کار رو بندازی ته همین چرخه اجرا، ولی نمی‌خوای صبر کنه تا نوبت macrotask بعدی برسه.

مثال 1 — ترتیب اجرا

console.log("start");

queueMicrotask(() => console.log("microtask"));

setTimeout(() => console.log("macrotask"), 0);

console.log("end");

start
end
microtask
macrotask

مثال 2 — مقایسه با Promise

console.log("A");

Promise.resolve().then(() => console.log("promise"));

queueMicrotask(() => console.log("micro"));

console.log("B");

A
B
promise
micro

خب رکورد جدید داریم. دوره فرانت.

آنلاین : ۴۸ تومن
حضوری : ۵۸ تومن

توجه شما رو به سرفصل‌ها جلب میکنم. توی کامنت‌ها گذاشتم.

جلسه ۱ ساعته و آنلاین بررسی سوالات مصاحبه‌ای جاوااسکریپت

۲۲ مرداد ، ساعت ۲۰

هزینه : پرداخت ۱۰۰ هزار تومن به حساب موسسه خیریه محک
5029-3870-2000-0656

(رسیدش رو ارسال کنید تا روی کلندر اینوایت بشید)

این پست رو روی لینکدین هم گذاشتم. ممنون میشم لایک و کامنت کنید دیده بشه.
https://www.linkedin.com/posts/alithecodeguy_aeuaepaewaepaepaebagpaezahyafyaes-activity-7359859275281723392-UaBv?utm_source=share&utm_medium=member_desktop&rcm=ACoAACtcWEYBTrZMU9DqRUSmbHsrw5UuZpcD8m0

مغز بعضی‌ها رو پهن برداشته عملا.

فکر کن بری خرید بیهوش بشی ، اونوقت به خاطر یه تیکه مقوا و آب معدنی ، از یه زاویه نامناسب عکست رو وایرال کنن و شوآف کنن! چیکار میخواستن کنن اگر این کار رو نمیکردن؟ با لگد پرتش کنن بیرون؟ جزیی‌ترین وظیفه به عنوان انسان ، شوآف داره؟

واقعا زندگی توی شهرهای کوچک‌تر ارزونتره؟

چی ارزونتره؟ ماشین و مواد غذایی و سوخت و نون و بلیط هواپیما و لوازم الکترونیک و ... که همون قیمته.

به خاطر لایف استایل راحت‌تریه که دارن یا یه چیزایی واقعا ارزونه؟