| کانال توسعه‌دهندگان جاوااسکریپت

| کانال توسعه‌دهندگان جاوااسکریپت |

در مثال بالا در نسخه‌ی اول برای هر بار اسکرول کل آرایه‌ی items دوباره sort می‌شود؛ این کار هم هزینه‌ی زمانی O(n log n) را روی هر رویداد اسکرول تحمیل می‌کند و هم باعث ایجاد GC pressure غیرضروری می‌شود. در نسخه‌ی دوم با مرتب‌سازی یک‌بارِ داده‌ها و استفاده از requestAnimationFrame برای کاهش فراخوانی‌های متوالی، هم Performance رندر بهتر می‌شود و هم مصرف CPU و Memory کمتر می‌گردد. برای چنین سناریوهایی که داده‌ها به‌ندرت عوض می‌شوند ولی Event ها زیاد تریگر می‌شوند، این الگو چه مزیت‌هایی نسبت به نسخه‌ی اول دارد؟

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

🔥5

1.93K views17:01

| کانال توسعه‌دهندگان جاوااسکریپت |

🚀 ساخت یک TODO List ساده با Vanilla JavaScript (بدون فریم‌ورک)

گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓

این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage

در این مینی‌پروژه:

✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی

ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.

نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Todo Vanilla JS</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { margin-right: 8px; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input id="todo-input" placeholder="New task..." />
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script>
    const input = document.querySelector("#todo-input");
    const addBtn = document.querySelector("#add-btn");
    const list = document.querySelector("#todo-list");

    let todos = JSON.parse(localStorage.getItem("todos") || "[]");

    function save() {
      localStorage.setItem("todos", JSON.stringify(todos));
    }

    function render() {
      list.innerHTML = "";
      todos.forEach((text, index) => {
        const li = document.createElement("li");
        li.textContent = text;

        const removeBtn = document.createElement("button");
        removeBtn.textContent = "x";
        removeBtn.addEventListener("click", () => {
          todos.splice(index, 1);
          save();
          render();
        });

        li.prepend(removeBtn);
        list.appendChild(li);
      });
    }

    addBtn.addEventListener("click", () => {
      const value = input.value.trim();
      if (!value) return;
      todos.push(value);
      input.value = "";
      save();
      render();
    });

    render();
  </script>
</body>
</html>

چند نکته‌ی کاربردی 💡

• JSON.parse و JSON.stringify این‌جا برای تبدیل آرایه به string و برعکس استفاده شده؛ دقیقا مطابق چیزی که MDN برای localStorage پیشنهاد می‌دهد.
• همیشه قبل از push، مقدار input را .trim() کن تا task خالی ذخیره نشود.
• با جداکردن تابع‌های save و render، بعدا راحت می‌شود featureهایی مثل edit یا checkbox برای completed اضافه کرد.

این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨

امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

🔥7❤3

1.8K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

‌‎پاک‌سازی توابع با تکنیک «Early Return» در JavaScript 🚿

یکی از ساده‌ترین و مؤثرترین تکنیک‌های Clean Code در جاوااسکریپت، استفاده از Early Return است؛ یعنی به‌جای پیچوندن منطق داخل ifهای تودرتو، در همان اول تابع، شرایط نامعتبر را سریع برگردانیم.

این تکنیک توابع را:

• کوتاه‌تر و خواناتر می‌کند ✨
• از Nested if‌های عمیق جلوگیری می‌کند
• باعث می‌شود مسیرهای خطا و edge caseها واضح‌تر دیده شوند

نمونه کد قبل از refactor (کد سخت‌خوان)

function createUser(data) {
  if (data) {
    if (data.email) {
      if (data.password && data.password.length >= 8) {
        // save to DB
        return { ok: true, user: data };
      } else {
        return { ok: false, error: 'Weak password' };
      }
    } else {
      return { ok: false, error: 'Email is required' };
    }
  } else {
    return { ok: false, error: 'No data' };
  }
}

این تابع کارش را انجام می‌دهد، اما هر شرط جدیدی که اضافه شود، عمق ifها بیشتر می‌شود و دیباگ سخت‌تر.

Refactor با Early Return ✅

function createUser(data) {
  if (!data) {
    return { ok: false, error: 'No data' };
  }

  if (!data.email) {
    return { ok: false, error: 'Email is required' };
  }

  if (!data.password || data.password.length < 8) {
    return { ok: false, error: 'Weak password' };
  }

  // happy path
  return { ok: true, user: data };
}

الان:

• هر شرط invalid در بالا «قطع» می‌شود 🔪
• مسیر اصلی (happy path) در انتها واضح و تمیز است
• اضافه‌کردن شرط جدید فقط یعنی اضافه کردن چند خط دیگر بالای happy path

نمونه در Express / Node.js 🌐

app.post('/login', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ message: 'Missing credentials' });
  }

  const user = await findUserByEmail(email);
  if (!user) {
    return res.status(404).json({ message: 'User not found' });
  }

  const valid = await comparePassword(password, user.passwordHash);
  if (!valid) {
    return res.status(401).json({ message: 'Invalid password' });
  }

  // happy path
  res.json({ token: createToken(user) });
});

هر مرحله نامعتبر به‌سرعت return می‌شود و منطق login مثل یک «چک‌لیست» خطی خوانده می‌شود.

نکته مهم 🔍

Early Return با Single Responsibility خیلی خوب جفت می‌شود؛ اگر تابع خیلی طولانی شد، علاوه بر early return، آن را به چند تابع کوچک‌تر با نام‌های خوب بشکنید.

منابع برای مطالعهٔ بیشتر:
• MDN – Control Flow
• Refactoring.Guru

این سبک نوشتن را کم‌کم در هندلرهای Express، سرویس‌های Node.js یا حتی توابع React خودتان وارد کنید؛ بعد از مدتی، خواندن و نگه‌داری کد برای خودتان و تیم‌تان به‌وضوح راحت‌تر می‌شود 🙌

🔖 #Javascript #JS #جاوااسکریپت #clean_code #early_return #javascript #nodejs #express #refactoring

👤 Developix

💎 Channel: @DevelopixJavascript

👍4❤3

1.66K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

گاهی کد async/await خیلی شلوغ می‌شه چون پر از try/catch تکراریه. یه الگوی جمع‌وجور می‌تونه هم کد رو تمیز کنه، هم مدیریت خطاها رو واضح‌تر کنه.

ایده اینه: به‌جای try/catch دور هر await، یه helper کوچک می‌نویسیم که همیشه نتیجه رو به شکل یک آرایه برگردونه: [err, data]. شبیه سبک Node.js، ولی مدرن و تمیز 😎

const to = (promise) => promise
  .then((data) => [null, data])
  .catch((err) => [err, null]);

async function fetchUser(userId) {
  const [err, res] = await to(
    fetch(`https://api.example.com/users/${userId}`)
  );

  if (err) {
    console.error('خطا در درخواست:', err);
    return null;
  }

  const [parseErr, data] = await to(res.json());

  if (parseErr) {
    console.error('خطا در parse کردن JSON:', parseErr);
    return null;
  }

  return data;
}

نکات مهم ✅

• ساختار کنترل خطا توی تابع مشخص و خطی می‌مونه، بدون چندین try/catch تو در تو.
• می‌شه این الگو رو برای هر Promise (مثل عملیات دیتابیس، fetch، کار با فایل در Node.js و ...) دوباره استفاده کرد.
• حواست باشه همیشه یا هر دو مقدار [err, data] رو destructure کنی، یا حداقل err رو چک کنی تا Memory Leak یا رفتار غیرمنتظره نگیری.

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

امتحان این pattern روی فانکشن‌های async کوچیک شروع می‌شه، بعد کم‌کم می‌تونه تبدیل بشه به style اصلیت برای هندل کردن Promiseها 🙌

مرجع بیشتر درباره Promise و خطاها تو MDN:
MDN - Promise

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #async_await #Promise #error_handling #ES6

👤 Developix

💎 Channel: @DevelopixJavascript

❤7👎2🔥1

1.72K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

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

سوال: در این کد چه چیزی باید اصلاح شود تا Promise chain به‌درستی کار کند و همه‌ی درخواست‌های async به‌ترتیب انجام شده و در نهایت آرایه results بعد از تکمیل همه‌ی عملیات برگردانده شود؟

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData(id) {
  await delay(100);
  console.log("fetched", id);
  return { id, time: Date.now() };
}

function runSequential(ids) {
  const results = [];

  ids.forEach(async (id) => {
    const data = await fetchData(id);
    results.push(data);
  });

  return Promise.resolve(results);
}

runSequential([1, 2, 3]).then(console.log);

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤2

1.54K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر یک خطای ظریف در استفاده از async/await و Array.prototype.map وجود دارد که باعث می‌شود رفتار برنامه مطابق انتظار نباشد.

چه چیزی باید در این کد تغییر کند تا همه درخواست‌ها به صورت async درست اجرا شوند و مقدار نهایی results به درستی شامل پاسخ‌های resolve شده باشد؟

const urls = [
  "https://api.example.com/user/1",
  "https://api.example.com/user/2",
  "https://api.example.com/user/3",
];

async function fetchUsers() {
  let results = [];

  urls.map(async (url) => {
    const res = await fetch(url);
    const data = await res.json();
    results.push(data);
  });

  return results;
}

fetchUsers().then((users) => {
  console.log("Users:", users);
});

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤6

1.89K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

قانون «یک سطح انتزاع در هر تابع» در JavaScript 🧠✨

یکی از نکات طلایی در Clean Code این است که هر تابع فقط با یک سطح انتزاع کار کند. یعنی یا درگیر جزئیات low-level باشد، یا فقط کارهای high-level را صدا بزند؛ نه هر دو را قاطی.

این قانون کمک می‌کند:

• خوانایی کد بالا برود 👀
• Refactor کردن ساده‌تر شود 🔧
• تست‌نویسی راحت‌تر شود ✅

🍂 یک مثال از کد شلوغ در Node.js / Express

app.post('/api/users', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ message: 'Invalid data' });
  }

  if (!email.includes('@')) {
    return res.status(400).json({ message: 'Invalid email' });
  }

  const exists = await db.collection('users').findOne({ email });
  if (exists) {
    return res.status(409).json({ message: 'Already exists' });
  }

  const hash = await bcrypt.hash(password, 10);

  const user = {
    email,
    password: hash,
    createdAt: new Date()
  };

  await db.collection('users').insertOne(user);

  res.status(201).json({ id: user._id, email: user.email });
});

این تابع هم validation انجام می‌دهد، هم کار دیتابیس، هم جزئیات hash، هم پاسخ HTTP. سطح‌های انتزاع قاطی شده‌اند.

🌱 Refactor با یک سطح انتزاع در هر تابع

const validateUserPayload = (body) => {
  const { email, password } = body;
  if (!email || !password) return 'Invalid data';
  if (!email.includes('@')) return 'Invalid email';
  return null;
};

const createUser = async ({ email, password }, db, hasher) => {
  const exists = await db.collection('users').findOne({ email });
  if (exists) return { error: 'Already exists' };

  const passwordHash = await hasher(password);

  const user = {
    email,
    password: passwordHash,
    createdAt: new Date()
  };

  const result = await db.collection('users').insertOne(user);

  return { id: result.insertedId, email: user.email };
};

app.post('/api/users', async (req, res) => {
  const validationError = validateUserPayload(req.body);
  if (validationError) {
    return res.status(400).json({ message: validationError });
  }

  const result = await createUser(
    req.body,
    db,
    (password) => bcrypt.hash(password, 10)
  );

  if (result.error) {
    return res.status(409).json({ message: result.error });
  }

  res.status(201).json(result);
});

حالا:

• تابع validateUserPayload فقط validation است ✅
• تابع createUser فقط منطق ساخت کاربر را دارد ✅
• route handler فقط orchestration انجام می‌دهد ✅

این جداسازی باعث می‌شود بعداً راحت‌تر TypeScript اضافه کنید، Unit Test بنویسید، یا منطق ساخت کاربر را در سرویس دیگری (مثلاً در یک worker) استفاده کنید.

منابع برای مطالعه بیشتر:
• Refactoring.Guru
• MDN – Learn JS

قدم‌به‌قدم همین الگو را روی قسمت‌های شلوغ پروژه‌های Node.js / React / Next.js خود پیاده کنید؛ هر بار که یک تابع را به یک سطح انتزاع محدود می‌کنید، کدتان قابل‌اعتمادتر و نگه‌داری‌پذیرتر می‌شود 🚀

🔖 #Javascript #JS #جاوااسکریپت #Clean_Code #JavaScript #Node_js #Express #Refactoring #Best_Practices

👤 Developix

💎 Channel: @DevelopixJavascript

👍4❤3👎3

2.19K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

✨ ساخت یک Todo List ساده با JavaScript خالص (بدون Framework)

خیلی وقت‌ها برای تمرین JavaScript و DOM، یک پروژه کوچیک و واقعی مثل Todo List بهترین گزینه‌ست. هم رویدادها رو لمس می‌کنی، هم کار با DOM و هم مدیریت state ساده رو.

یکی از بهترین رفرنس‌ها برای کار با DOM و رویدادها، مستندات MDN هست:
MDN DOM Introduction

در این تمرین، با چند مفهوم مهم سر و کار داریم:

✅ گرفتن elementها با querySelector
✅ گوش دادن به eventها مثل submit و click
✅ جلوگیری از refresh فرم با event.preventDefault()
✅ دستکاری DOM با createElement و appendChild

مثال زیر یک Todo List خیلی ساده ولی عملی است. کافی‌ست یک فایل index.html بسازی و این کد را داخلش قرار بدهی و در مرورگر باز کنی:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Simple Todo</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    form { display: flex; gap: 8px; }
    ul { padding: 0; list-style: none; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { cursor: pointer; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <form id="todo-form">
    <input id="todo-input" placeholder="New task..." required />
    <button type="submit">Add</button>
  </form>
  <ul id="todo-list"></ul>

  <script>
    const form = document.querySelector('#todo-form');
    const input = document.querySelector('#todo-input');
    const list = document.querySelector('#todo-list');

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      const text = input.value.trim();
      if (!text) return;

      const li = document.createElement('li');
      const span = document.createElement('span');
      span.textContent = text;

      const removeBtn = document.createElement('button');
      removeBtn.textContent = 'x';

      removeBtn.addEventListener('click', function () {
        list.removeChild(li);
      });

      li.appendChild(span);
      li.appendChild(removeBtn);
      list.appendChild(li);

      input.value = '';
      input.focus();
    });
  </script>
</body>
</html>

نکته‌های ریز 👇

• استفاده از trim() جلوی اضافه شدن تسک خالی را می‌گیرد.
• با event.preventDefault() فرم صفحه را reload نمی‌کند و کنترل دست ما می‌ماند.
• با addEventListener روی خود دکمه حذف کار می‌کنیم تا ساختار کد تمیزتر بماند.

این تمرین پایه خوبی برای قدم‌های بعدی مثل ذخیره‌سازی در localStorage، اضافه کردن فیلتر (Completed / Active) یا بعداً پیاده‌سازی همین ایده در React یا Vue است.

امتحانش روی یک فایل ساده لوکال حس خوبی از «کار کردن کد» می‌دهد و درک DOM را خیلی محکم‌تر می‌کند. اگر به درد دوستی می‌خورد که تازه JavaScript را شروع کرده، برایش بفرست 💚

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #Todo #Frontend #ES6 #VanillaJS

👤 Developix

💎 Channel: @DevelopixJavascript

🔥6❤2

1.39K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

🎯 هندل‌کردن کلیک‌ها با Event Delegation

وقتی تعداد زیادی دکمه یا آیتم در DOM داریم، اضافه‌کردن یک event listener روی هر عنصر هم کند است، هم کد را شلوغ می‌کند. با Event Delegation فقط روی والد گوش می‌دهیم و رویداد را از مسیر event.target مدیریت می‌کنیم. 🔥

✅ این کار:
• تعداد listenerها را کم می‌کند ✂️
• مدیریت عناصر اضافه/حذف‌شونده را ساده می‌کند

مثال ساده روی یک لیست:

const list = document.querySelector('#user-list');

list.addEventListener('click', (event) => {
  const item = event.target.closest('li');
  if (!item || !list.contains(item)) return;

  const userId = item.dataset.userId;
  console.log('Clicked user:', userId);
});

حالا هر <li data-user-id="123"> که بعداً با JavaScript به #user-list اضافه شود، بدون نیاز به listener جدید، کلیک را هندل می‌کند. 🚀

برای جزئیات بیشتر: MDN - Event delegation

توی پروژه‌های سنگین DOM، این الگو هم خوانایی کد را بهتر می‌کند هم عملکرد را. 😉

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Event_Delegation #DOM #Performance #ES6

👤 Developix

💎 Channel: @DevelopixJavascript

👍5❤1

1.3K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در این نمونه‌کد، برای هر درخواست ورودی چندین بار JSON.parse روی req.body انجام می‌شود که می‌تواند در درخواست‌های سنگین باعث کاهش کارایی، افزایش مصرف CPU و حتی بروز خطا در صورت خراب شدن ساختار بدنه شود. در مقابل، در نسخه اصلاح‌شده با استفاده از یک middleware اختصاصی، فقط یک بار پارس انجام شده و نتیجه در یک فیلد امن روی req ذخیره می‌شود.

به‌نظر شما در پروژه‌های واقعی، استفاده از این الگو چه مزیت‌هایی از نظر performance، قابلیت تست و کاهش ریسک Side Effect نسبت به پارس مستقیم JSON در هر هندلر دارد؟

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

👍2

1.43K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

خروجی این کد JavaScript چیست؟

به ترتیب و با دقت به event loop و صف microtask و macrotask فکر کنید و رشته‌ای را که در کنسول چاپ می‌شود، دقیقا به همان ترتیب بنویسید.

const p = Promise.resolve(1);

p.then(v => {
  console.log("A", v);
  return v + 1;
}).then(v => {
  console.log("B", v);
  return Promise.resolve(v + 1);
}).then(v => {
  console.log("C", v);
});

setTimeout(() => {
  console.log("D");
  Promise.resolve().then(() => {
    console.log("E");
  });
}, 0);

console.log("F");

خروجی نهایی کنسول را دقیقا و به ترتیب، در یک خط یا چند خط، بنویسید.

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

1.43K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر سازنده‌ی کلاس تلاش می‌کند با استفاده از async/await و forEach داده‌ها را به‌صورت غیرهم‌زمان لود کند، اما رفتار نهایی با انتظار نویسنده‌ی کد فرق دارد و this.data در زمان استفاده هنوز کامل مقداردهی نشده است.

سؤال: در این کد چه چیزی باید تغییر کند تا اجرای غیرهم‌زمان به‌درستی منتظر اتمام تمام درخواست‌ها بماند و سپس this.data کامل آماده باشد؟

class DataLoader {
  constructor(apiUrls) {
    this.data = [];
    this.load(apiUrls);
  }

  async load(urls) {
    urls.forEach(async (url) => {
      const res = await fetch(url);
      const json = await res.json();
      this.data.push(json);
    });
  }
}

const loader = new DataLoader([
  "https://example.com/api/users",
  "https://example.com/api/posts"
]);

// بعداً در جایی دیگر:
console.log("Loaded:", loader.data.length); // مقدار اینجا غیرقابل اعتماد است

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

1.51K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

کتابخونه 🐻 Zustand یه state manager مینیمال برای React هست که بدون ceremony اضافی، state سراسری رو برات حل می‌کنه.

مزیتش نسبت به Redux و بقیه چیه؟
• API خیلی ساده و مستقیم
• بدون providerهای تو در تو؛ فقط یک store
• performance عالی با رندر کم‌تر کامپوننت‌ها
• پشتیبانی از TypeScript بدون دردسر

یه مثال ساده:

npm install zustand

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

function Counter() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)

  return <button onClick={increase}>Bears: {bears}</button>
}

برای پروژه‌هایی که Redux براشون زیادی سنگینه، Zustand گزینه‌ایه که هم کد رو تمیز نگه می‌داره هم مقیاس‌پذیره. مخصوصاً برای dashboardها، panelهای ادمین و appهای data-heavy خیلی جواب می‌ده.

مستندات و سورس:
GitHub
Docs

یک بار تو یه پروژه واقعی تستش کن، معمولاً بعدش برگردوندنش به عقب سخته 😄

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #Zustand #State_Management #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

👍4

1.72K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در نمونه‌کد بالا برای فیلتر کردن یک آرایه بزرگ، در هر بار تکرار حلقه دوباره sort و filter روی کل داده‌ها اجرا شده که هم باعث پیچیدگی زمانی بسیار بالا (حدود O(n² log n)) و هم مصرف اضافی مموری می‌شود. در نسخهٔ بهبود‌یافته، ابتدا داده‌ها یک‌بار نرمال‌سازی و مرتب می‌شوند و سپس فقط یک‌بار روی آن‌ها فیلتر و جست‌وجو انجام می‌گیرد.

به نظر شما چرا استفاده از متغیرهای میانی و جلوگیری از ایجاد آرایه‌های موقت متعدد می‌تواند در این سناریو باعث کاهش مصرف مموری و افزایش سرعت برنامه، مخصوصاً روی لیست‌های بزرگ (مثلاً > ۱۰۰هزار آیتم)، شود؟

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

🔥3

1.55K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

⏱ جلوگیری از اجرای اضافی event با debounce ساده

تو پروژه‌های فرانت، eventهایی مثل scroll و input می‌تونن تو هر ثانیه ده‌ها بار فایر بشن و باعث لگ، مصرف CPU و رندر اضافه بشن. یک تکنیک ساده برای کنترل این ماجرا، استفاده از debounce هست. 😉

ایده: تا وقتی کاربر داره پشت‌سرهم تایپ یا اسکرول می‌کنه، تابع اصلی اجرا نشه؛ فقط وقتی یک مدت کوتاه هیچ eventی نیومد، تابع رو صدا بزن.

function debounce(fn, delay) {
  let timeoutId;
  return function (...args) {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const handleSearch = debounce((event) => {
  console.log("Search:", event.target.value);
}, 400);

const input = document.querySelector("#search");
input.addEventListener("input", handleSearch);

💡 این کار تعداد requestهای سرچ، رندر مجدد و لاگ‌ها رو به‌شدت کم می‌کنه و UX نرم‌تری می‌سازه.

مرجع بیشتر در مورد timing ها و eventها:
MDN - setTimeout

امتحانش روی inputهای سرچ یا resize و scroll نتیجه خیلی ملموسی می‌دهد. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #debounce #performance #events #frontend

👤 Developix

💎 Channel: @DevelopixJavascript

👍5❤1

1.25K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

خروجی این کد JavaScript چیست؟

در این مثال از prototype chain و shadowing روی یک property استفاده شده است. با دقت به ترتیب اجرا و این‌که هر بار چه مقداری log می‌شود توجه کنید و خروجی نهایی را به ترتیب سطرها بنویسید.

const base = {
  value: 1,
  inc() {
    this.value++;
    console.log("base:", this.value);
  }
};

const obj = Object.create(base);
obj.value = 10;

obj.inc();
base.inc();

delete obj.value;
obj.inc();

base.value = 100;
obj.inc();

خروجی دقیق این کد در console چه خواهد بود؟ (همه سطرهای خروجی را به ترتیب بنویسید)

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤3

1.52K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

ساخت TODO List یکی از بهترین تمرین‌های واقعی برای جا افتادن مفاهیم DOM، event ها و ذخیره داده‌ها در مرورگر است. این بار بدون React و فریم‌ورک، فقط با Vanilla JS و LocalStorage 💪

منبع اصلی ایده و توضیحات: آموزش MDN درباره Web Storage API و مستندات DOM Manipulation.

ایده کلی 👇
یک فرم ساده داریم برای اضافه‌کردن task ها، لیست را با JS توی DOM رندر می‌کنیم و هر تغییری که کاربر می‌دهد را در localStorage ذخیره می‌کنیم تا بعد از refresh هم از بین نرود.

نکته خوبش این است که با همین مثال ساده، چند تا چیز مهم جا می‌افتد:

• کار با querySelector و ساخت element های جدید
• مدیریت event ها مثل submit و click
• تبدیل array به string و برعکس با JSON.stringify و JSON.parse
• sync نگه‌داشتن UI با state ذخیره‌شده در localStorage

یک اسکلت ساده از کد 👇

<!-- index.html -->
<form id="todo-form">
  <input id="todo-input" placeholder="کار جدید..." />
  <button type="submit">اضافه کن</button>
</form>

<ul id="todo-list"></ul>

<script src="app.js"></script>

و فایل جاوااسکریپت:

// app.js
const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

const STORAGE_KEY = "jsdev_todos";
let todos = loadTodos();
render();

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  todos.push({ id: Date.now(), text });
  input.value = "";
  saveTodos();
  render();
});

list.addEventListener("click", (e) => {
  if (!e.target.matches("button[data-id]")) return;
  const id = Number(e.target.dataset.id);
  todos = todos.filter((t) => t.id !== id);
  saveTodos();
  render();
});

function loadTodos() {
  const raw = localStorage.getItem(STORAGE_KEY);
  try {
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}

function saveTodos() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}

function render() {
  list.innerHTML = "";
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.textContent = todo.text + " ";

    const btn = document.createElement("button");
    btn.textContent = "حذف";
    btn.dataset.id = todo.id;

    li.appendChild(btn);
    list.appendChild(li);
  });
}

چند نکته ریز ولی مهم 🧠
• همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند.
• از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند.
• برای id ها اینجا از Date.now() استفاده شده، که برای پروژه‌های کوچک کافی است.

با همین ساختار پایه می‌شود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپ‌های واقعی که state و UI sync می‌شوند خیلی قابل فهم‌تر به نظر می‌رسد ⚡️

اگر ساختی و کمی شخصی‌سازی‌اش کردی، نسخه‌ات را برای بقیه بچه‌های جاوااسکریپت هم بفرست؛ همین مثال‌های کوچک کم‌کم تبدیل به component و pattern های جدی‌تر می‌شوند.

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

❤6👍2

1.21K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر یک اشتباه رایج در استفاده از async/await داخل حلقه دیده می‌شود که باعث اجرای سریالی درخواست‌ها و کند شدن شدید برنامه در مواجهه با تعداد آیتم‌های زیاد می‌شود. در نسخه‌ی اصلاح‌شده با استفاده از Promise.all و تبدیل حلقه به مجموعه‌ای از Promiseها، همه‌ی درخواست‌ها به صورت موازی اجرا می‌شوند و در سناریوهایی مثل فراخوانی چندین API مستقل، زمان پاسخ برنامه به شکل چشم‌گیری کاهش پیدا می‌کند.

به نمونه‌کد بالا دقت کنید: در چه شرایطی استفاده از Promise.all به جای await داخل حلقه می‌تواند بهترین انتخاب برای بهبود Performance و کاهش زمان اجرای کل عملیات باشد؟

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

978 views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

🔥 پروژه: ‏DrawDB؛ طراحی بصری دیتابیس آنلاین

ویرایشگر تحت‌وب DrawDB یک ابزار رایگان برای طراحی نمودار دیتابیس و تولید خودکار SQL است 🧩

برای وقتی عالی است که قبل از نوشتن کد، اسکیمای دیتابیس پروژه جاوااسکریپتی‌تان (مثلاً با ORMهایی مثل Prisma یا TypeORM) را می‌خواهید شفاف و تمیز طراحی کنید.

رابط کاربری خیلی ساده است: جدول می‌سازی، ستون و رابطه می‌کشی و درنهایت اسکریپت SQL ساخت جداول را تحویل می‌گیری.

برای دیدن پروژه و دمو، سر بزن به: سورس DrawDB روی گیت‌هاب

⭐️ 665 stars this week

🔖 #Javascript #JS #جاوااسکریپت #جاوااسکریپت #طراحی_دیتابیس

💎 @DevelopixJavascript

❤5

403 views15:30

مشاهده

| کانال توسعه‌دهندگان جاوااسکریپت |

اصل مهمی در Clean Code این است که هر تابع فقط یک وظیفهٔ واضح داشته باشد ✨

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

به این ایده در Design Principleها می‌گویند: Single Responsibility Principle (SRP).

نمونهٔ یک تابع شلوغ در Node.js 👇

const registerUser = async (req, res) => {
  const { email, password } = req.body;

  // validate
  if (!email || !password || password.length < 8) {
    return res.status(400).json({ message: 'Invalid data' });
  }

  // check duplicate
  const existing = await User.findOne({ email });
  if (existing) {
    return res.status(409).json({ message: 'Email exists' });
  }

  // hash password
  const bcrypt = await import('bcrypt');
  const hashed = await bcrypt.hash(password, 10);

  // save user
  const user = await User.create({ email, password: hashed });

  // send welcome email
  await sendWelcomeEmail(email);

  return res.status(201).json({ id: user.id, email: user.email });
};

این تابع هم اعتبارسنجی می‌کند، هم دیتابیس می‌زند، هم ایمیل می‌فرستد؛ یعنی چند مسئولیت در یک جا.

حالا همان منطق را با توابع کوچک‌تر تمیزتر می‌کنیم 🧼

const validateRegisterInput = ({ email, password }) => {
  if (!email || !password) return 'Email and password are required';
  if (password.length < 8) return 'Password too short';
  return null;
};

const ensureEmailUnique = async (email) => {
  const existing = await User.findOne({ email });
  if (existing) throw new Error('EMAIL_TAKEN');
};

const createUser = async ({ email, password }) => {
  const bcrypt = await import('bcrypt');
  const hashed = await bcrypt.hash(password, 10);
  return User.create({ email, password: hashed });
};

const registerUser = async (req, res) => {
  const { email, password } = req.body;

  const error = validateRegisterInput({ email, password });
  if (error) return res.status(400).json({ message: error });

  try {
    await ensureEmailUnique(email);
    const user = await createUser({ email, password });
    await sendWelcomeEmail(email);

    return res.status(201).json({ id: user.id, email: user.email });
  } catch (err) {
    if (err.message === 'EMAIL_TAKEN') {
      return res.status(409).json({ message: 'Email exists' });
    }
    return res.status(500).json({ message: 'Server error' });
  }
};

حالا:
- تست کردن validateRegisterInput و createUser مستقل و ساده است ✅
- تغییر قانون پسورد، فقط در یک تابع انجام می‌شود ✅
- خطاها واضح‌تر و قابل مدیریت‌تر هستند ✅

برای کدهای React، Express، Next.js و هر محیط JavaScript/TypeScript دیگر همین ایده جواب می‌دهد: توابع کوچک، با نام خوب و یک کار مشخص.

برای مطالعهٔ بیشتر می‌توان از Refactoring.Guru و MDN کمک گرفت.

قدم‌های کوچک refactor کردن همین امروز روی یکی از فانکشن‌های شلوغ پروژه، بعد از چند هفته تاثیر زیادی در خوانایی و کیفیت کد می‌گذارد 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Clean_Code #Node_js #Refactoring #SRP

👤 Developix

💎 Channel: @DevelopixJavascript

👍6❤1

380 views17:00

About

Blog

Apps

Platform