چجوری میتونیم به پارامتر های ورودی مقدار دیفالت بدیم ؟
چون موضوع خیلی پیچیده ای نیست سعی میکنیم با یک مثال موضوع رو جمع کنیم
- ما یک تابع داریم که دوتا ورودی میگیره و ورودی اول به توان ورودی دوم رو به ما حروجی میده
- ما میخوایم به ورودی دوم (power) یک مقدار دیفالت بدیم اگر مقداری وارد نشده بود مقدار 2 لحاظ بشه این کار بسیار ساده هست کافیه فقط کد رو به این صورت تغییر بدیم :
- در این حالت مقدار power در صورت عدم مقدار دهی برابر با 2 خواهد بود
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
چون موضوع خیلی پیچیده ای نیست سعی میکنیم با یک مثال موضوع رو جمع کنیم
- ما یک تابع داریم که دوتا ورودی میگیره و ورودی اول به توان ورودی دوم رو به ما حروجی میده
function power(number , power)
{
return number ** power;
}
- ما میخوایم به ورودی دوم (power) یک مقدار دیفالت بدیم اگر مقداری وارد نشده بود مقدار 2 لحاظ بشه این کار بسیار ساده هست کافیه فقط کد رو به این صورت تغییر بدیم :
function power(number , power = 2)
{
return number ** power;
}
- در این حالت مقدار power در صورت عدم مقدار دهی برابر با 2 خواهد بود
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
👍22❤1
💢 یک منبع پر از تمهای VS Code
اگر به دنبال تنوع و زیبایی در محیط کدنویسی Visual Studio Code هستید، این وبسایت بهترین گزینه است. این سایت با ارائه مجموعهای عظیم از تمهای جذاب و متنوع، امکان شخصیسازی کامل محیط کاری شما را فراهم میکند. از رنگهای روشن و شاداب گرفته تا تمهای تاریک و حرفهای، هر سلیقهای که داشته باشید، میتوانید تم مورد نظر خود را در این سایت پیدا کنید.
vscodethemes.com
#vscode
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Maryam
💎 Channel: @DevelopixJavascript
اگر به دنبال تنوع و زیبایی در محیط کدنویسی Visual Studio Code هستید، این وبسایت بهترین گزینه است. این سایت با ارائه مجموعهای عظیم از تمهای جذاب و متنوع، امکان شخصیسازی کامل محیط کاری شما را فراهم میکند. از رنگهای روشن و شاداب گرفته تا تمهای تاریک و حرفهای، هر سلیقهای که داشته باشید، میتوانید تم مورد نظر خود را در این سایت پیدا کنید.
vscodethemes.com
#vscode
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Maryam
💎 Channel: @DevelopixJavascript
👍9👎1🔥1
🧩 بهترین منابع برای تمرین JavaScript
سایت W3Schools:
-منبع معتبر برای یادگیری زبانها و فریمورکها و تکنولوژیهای مختلف مثل JavaScript و Node.js و Vue.js
-شامل ۶۷ تمرین کوتاه برای آموزش Syntax و کارکرد متدهای Vanilla JS
-یک آزمون جامع ساده + کوییزهایی در سطوح مختلف برای مرور مبانی
-فصل JS Examples شامل مثالهای واقعی(Real life)
سایت Exercism:
-۱۴۸ تمرین مفید JS با قابلیت آنالیز دقیق کدها
-کمک به نوشتن برنامههای اصولی و بهینهتر
-کامیونیتی غنی + پشتیبانی قوی برای دیدن راهحل دیگران و دریافت بازخورد
-نقشه راه استاندارد
سایت JS Hero:
-داکیومنت مختصر برای یادگیری مبانی جاواسکریپت به زبان ساده
-مسئلههای ساده در انتهای هر مبحث برای تمرین و درک بهتر
سایت Edabit:
-از گستردهترین منابع برای تقویت مهارت حل مسئله
-بیش از ۲۵۰۰ تمرین در ۶ سطح
-امکان مشاهده بهترین راهحلها
سایت W3resources:
-۱۰۰۰ مسئله برای سطح Beginner تا Intermediate
-تحلیل دقیق، ارائه چندین راهحل بر اساس پارادایمهای مختلف و انتشارهای JS به همراه فلوچارت
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Soheil
💎 Channel: @DevelopixJavascript
سایت W3Schools:
-منبع معتبر برای یادگیری زبانها و فریمورکها و تکنولوژیهای مختلف مثل JavaScript و Node.js و Vue.js
-شامل ۶۷ تمرین کوتاه برای آموزش Syntax و کارکرد متدهای Vanilla JS
-یک آزمون جامع ساده + کوییزهایی در سطوح مختلف برای مرور مبانی
-فصل JS Examples شامل مثالهای واقعی(Real life)
سایت Exercism:
-۱۴۸ تمرین مفید JS با قابلیت آنالیز دقیق کدها
-کمک به نوشتن برنامههای اصولی و بهینهتر
-کامیونیتی غنی + پشتیبانی قوی برای دیدن راهحل دیگران و دریافت بازخورد
-نقشه راه استاندارد
سایت JS Hero:
-داکیومنت مختصر برای یادگیری مبانی جاواسکریپت به زبان ساده
-مسئلههای ساده در انتهای هر مبحث برای تمرین و درک بهتر
سایت Edabit:
-از گستردهترین منابع برای تقویت مهارت حل مسئله
-بیش از ۲۵۰۰ تمرین در ۶ سطح
-امکان مشاهده بهترین راهحلها
سایت W3resources:
-۱۰۰۰ مسئله برای سطح Beginner تا Intermediate
-تحلیل دقیق، ارائه چندین راهحل بر اساس پارادایمهای مختلف و انتشارهای JS به همراه فلوچارت
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Soheil
💎 Channel: @DevelopixJavascript
👍25❤9🔥3
Void(0) Company 😍
Next Generation Tooling
آقای Evan You خالق فریمورک vue.js و vite اومده یه کمپانی جدید زده به اسم Void-Zero و میخواد یه Tollchain برای JS بسازه و با کنار هم قراردادن بهترین ابزار ها یه چیز قوی بسازه.
برای بحث build از Vite برای بحث testing از Vitest و برای bundeler از Rolldown و برای langunage toolchain هم از Oxc بهره میبرند.
دارن یه ابزار خفن به جامعه جاوا اسکریپت اضافه میکنند و هدفشون اینه این ابزار یکپارچه و سریع باشه
و چون شخص Evan You شروع کننده هست یعنی جامعه ویو با این ابزار جلو میان و قراره یه ابزار خفن داشته باشیم که بتونیم همه جا استفاده کنیم هم سریع باشه هم خوب.
و چون جامعه ویو و ویت باهاش هست نیاز نیست از صفر بسازن.
برای اطلاعات بیشتر میتونید سایتشون رو بررسی کنید که اطلاعات دقیق تر و کامل تری داشته باشید:
🌐 سایت رسمی
⚜️ گیت هاب
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
Next Generation Tooling
آقای Evan You خالق فریمورک vue.js و vite اومده یه کمپانی جدید زده به اسم Void-Zero و میخواد یه Tollchain برای JS بسازه و با کنار هم قراردادن بهترین ابزار ها یه چیز قوی بسازه.
برای بحث build از Vite برای بحث testing از Vitest و برای bundeler از Rolldown و برای langunage toolchain هم از Oxc بهره میبرند.
دارن یه ابزار خفن به جامعه جاوا اسکریپت اضافه میکنند و هدفشون اینه این ابزار یکپارچه و سریع باشه
و چون شخص Evan You شروع کننده هست یعنی جامعه ویو با این ابزار جلو میان و قراره یه ابزار خفن داشته باشیم که بتونیم همه جا استفاده کنیم هم سریع باشه هم خوب.
و چون جامعه ویو و ویت باهاش هست نیاز نیست از صفر بسازن.
برای اطلاعات بیشتر میتونید سایتشون رو بررسی کنید که اطلاعات دقیق تر و کامل تری داشته باشید:
🌐 سایت رسمی
⚜️ گیت هاب
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
👍14❤3
🔒🔑 انواع روشهای احراز هویت در بکاند
توی پست امروزمون میخواهیم بپردازیم به مبحث احراز هویت (authentication) که یکی از مهمترین مباحث در بکاند هست. ✅
چند نکته قبل از شروع:
به هیچ وجه رمز کاربر نباید به صورت خام داخل دیتابیس یا هر جای دیگر ذخیره شود. ❌
از متدهای هشینگ (hashing) قوی استفاده کنید، مثل SHA-256 یا SHA-512.
اگر از جاوااسکریپت برای پروژهتان استفاده میکنید، میتوانید از کتابخانه bcrypt استفاده کنید.
تعداد دفعاتی که یک کاربر میتواند پشت سرهم درخواست ارسال کند را محدود کنید تا از حملات brute force جلوگیری شود.
1️⃣ Password-based authentication
در این روش، کاربر فقط باید یک رمز وارد کند تا لاگین کرده و به اندپوینتهای محافظتشده دسترسی پیدا کند.
اینجا نه توکنی وجود دارد و نه چیزی که منقضی شود و از ادامه دسترسی کاربر جلوگیری کند.
این روش اصلاً مناسب نیست و فقط برای یادگیری یا پروژههای ساده مناسب است.
2️⃣ Token-based authentication
یکی از مفیدترین و مهمترین روشهای احراز هویت که همه با آن آشنایی داریم.
و البته، اسم JWT به گوش همه خورده است.
در این روش، وقتی کاربر وارد میشود، برای او دو توکن رمزنگاریشده ساخته میشود:
Access Token
Refresh Token
تفاوتها:
مدت زمان انقضای Access Token کوتاه است (بین ۱۵ دقیقه تا ۱ ساعت).
مدت زمان انقضای Refresh Token طولانیتر است (بیش از ۷ روز).
هر وقت که Access Token منقضی میشود، با استفاده از Refresh Token، یک Access Token جدید دریافت میکنیم.
سوال مهم: توکنها کجا ذخیره و ارسال میشوند؟
توکنها میتوانند:
در هدرها (Headers) ارسال شوند.
یا در کوکیها ذخیره شوند.
نکته: اگر توکن در کوکی ذخیره میشود، باید حتماً نکات امنیتی خاصی رعایت شود.
نکته: اگر Refresh Token منقضی شود، کاربر باید مجدداً لاگین کند.
محتوای JWT:
توکن JWT معمولاً حاوی اطلاعات رمزنگاریشده مثل id، email و... است. (رمز عبور نباید ذخیره شود.)
این توکن از بخشهای زیر تشکیل شده است:
Header
Payload
Signature
کاربرد:
این روش معمولاً همراه با احراز هویت دو مرحلهای (2FA) استفاده میشود.
علاوه بر رمز عبور، یک کد به ایمیل یا شماره تلفن ارسال میشود که باید وارد شود.
3️⃣ Biometric authentication
در این روش، احراز هویت با استفاده از صدا، اثر انگشت، چشم، یا ویدئو انجام میشود.
این روش بیشتر در سامانههای حساس مثل دولتی یا بانکی استفاده میشود و عمومیت چندانی ندارد.
4️⃣ Social media authentication
در این روش، کاربر از طریق اکانت شبکههای اجتماعی یا سرویسهای معتبر، احراز هویت میکند.
ویژگیها:
بسیار محبوب و کاربرپسند است.
معمولاً با اکانتهای گوگل (جیمیل)، فیسبوک، گیتهاب و... انجام میشود.
سرعت بالایی دارد، چون اکثر کاربران اکانت جیمیلشان روی مرورگر فعال است و با یک کلیک، احراز هویت کامل میشود.
امیدوارم از این پست خوشتون اومده باشه 😊
هر سوالی هم داشتید میتونید در بخش نظرات بپرسید 🙏
🔖 #Javascript, #JS, #جاوااسکریپت
👤 soroushGH
💎 Channel: @DevelopixJavascript
توی پست امروزمون میخواهیم بپردازیم به مبحث احراز هویت (authentication) که یکی از مهمترین مباحث در بکاند هست. ✅
چند نکته قبل از شروع:
به هیچ وجه رمز کاربر نباید به صورت خام داخل دیتابیس یا هر جای دیگر ذخیره شود. ❌
از متدهای هشینگ (hashing) قوی استفاده کنید، مثل SHA-256 یا SHA-512.
اگر از جاوااسکریپت برای پروژهتان استفاده میکنید، میتوانید از کتابخانه bcrypt استفاده کنید.
تعداد دفعاتی که یک کاربر میتواند پشت سرهم درخواست ارسال کند را محدود کنید تا از حملات brute force جلوگیری شود.
1️⃣ Password-based authentication
در این روش، کاربر فقط باید یک رمز وارد کند تا لاگین کرده و به اندپوینتهای محافظتشده دسترسی پیدا کند.
اینجا نه توکنی وجود دارد و نه چیزی که منقضی شود و از ادامه دسترسی کاربر جلوگیری کند.
این روش اصلاً مناسب نیست و فقط برای یادگیری یا پروژههای ساده مناسب است.
2️⃣ Token-based authentication
یکی از مفیدترین و مهمترین روشهای احراز هویت که همه با آن آشنایی داریم.
و البته، اسم JWT به گوش همه خورده است.
در این روش، وقتی کاربر وارد میشود، برای او دو توکن رمزنگاریشده ساخته میشود:
Access Token
Refresh Token
تفاوتها:
مدت زمان انقضای Access Token کوتاه است (بین ۱۵ دقیقه تا ۱ ساعت).
مدت زمان انقضای Refresh Token طولانیتر است (بیش از ۷ روز).
هر وقت که Access Token منقضی میشود، با استفاده از Refresh Token، یک Access Token جدید دریافت میکنیم.
سوال مهم: توکنها کجا ذخیره و ارسال میشوند؟
توکنها میتوانند:
در هدرها (Headers) ارسال شوند.
یا در کوکیها ذخیره شوند.
نکته: اگر توکن در کوکی ذخیره میشود، باید حتماً نکات امنیتی خاصی رعایت شود.
نکته: اگر Refresh Token منقضی شود، کاربر باید مجدداً لاگین کند.
محتوای JWT:
توکن JWT معمولاً حاوی اطلاعات رمزنگاریشده مثل id، email و... است. (رمز عبور نباید ذخیره شود.)
این توکن از بخشهای زیر تشکیل شده است:
Header
Payload
Signature
کاربرد:
این روش معمولاً همراه با احراز هویت دو مرحلهای (2FA) استفاده میشود.
علاوه بر رمز عبور، یک کد به ایمیل یا شماره تلفن ارسال میشود که باید وارد شود.
3️⃣ Biometric authentication
در این روش، احراز هویت با استفاده از صدا، اثر انگشت، چشم، یا ویدئو انجام میشود.
این روش بیشتر در سامانههای حساس مثل دولتی یا بانکی استفاده میشود و عمومیت چندانی ندارد.
4️⃣ Social media authentication
در این روش، کاربر از طریق اکانت شبکههای اجتماعی یا سرویسهای معتبر، احراز هویت میکند.
ویژگیها:
بسیار محبوب و کاربرپسند است.
معمولاً با اکانتهای گوگل (جیمیل)، فیسبوک، گیتهاب و... انجام میشود.
سرعت بالایی دارد، چون اکثر کاربران اکانت جیمیلشان روی مرورگر فعال است و با یک کلیک، احراز هویت کامل میشود.
امیدوارم از این پست خوشتون اومده باشه 😊
هر سوالی هم داشتید میتونید در بخش نظرات بپرسید 🙏
🔖 #Javascript, #JS, #جاوااسکریپت
👤 soroushGH
💎 Channel: @DevelopixJavascript
👍19❤4🔥1
Bun v 1.2
بان نسخه جدیدش رو منتشر کرده.
✅ اپدیت های جدید بان در این نسخه :
1. سازگاری بیشتری با nodejs داره.
2. به صورت built-in از s3 پشتیبانی میکنه.
3. به صورت built-in از Postgres پشتیبانی میکنه و به زودی قراره mysql هم اضافه بشه.
4. فایل bun.lock قبلا به صورت باینری بوده ولی با فیدبکهایی که از کامیونیتی دریافت کردند به فایل متنی تغییر دادند.
5. میتونید html به صورت خیلی ساده از طریق بان ایمپورت کنید ( خودش مینیفای میکنه باندل میکنه هم js رو هم css رو )
و به صورت کلی پرفرمنس بهتر شده ، سرعت بهتر شده و...
فیچر های دیگری هم در این نسخه عرضه شده که میتونید با مشاهده وبلاگ بان مطالعه کنید.
لینک وبلاگ :
https://bun.sh/blog/bun-v1.2
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
بان نسخه جدیدش رو منتشر کرده.
✅ اپدیت های جدید بان در این نسخه :
1. سازگاری بیشتری با nodejs داره.
2. به صورت built-in از s3 پشتیبانی میکنه.
3. به صورت built-in از Postgres پشتیبانی میکنه و به زودی قراره mysql هم اضافه بشه.
4. فایل bun.lock قبلا به صورت باینری بوده ولی با فیدبکهایی که از کامیونیتی دریافت کردند به فایل متنی تغییر دادند.
5. میتونید html به صورت خیلی ساده از طریق بان ایمپورت کنید ( خودش مینیفای میکنه باندل میکنه هم js رو هم css رو )
و به صورت کلی پرفرمنس بهتر شده ، سرعت بهتر شده و...
فیچر های دیگری هم در این نسخه عرضه شده که میتونید با مشاهده وبلاگ بان مطالعه کنید.
لینک وبلاگ :
https://bun.sh/blog/bun-v1.2
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
🔥10👍5❤4
یه ابزار خوب برای فرانت دولوپرها
این ابزار میتونه از طریق swagger v2 یا openAPI v3 بیاد درخواست های fetch رو بنویسه و میتونه بیاد validation با zod و به صورت type-safe براتون انجام بده. ( از فرمت های yaml و json پشتیبانی میکنه )
❇️ نحوه کار :
این ابزار رو به صورت dev dependencies نصب میکنید و یک فایل config داره که مشخص میکنید و به سادگی با یه دستور fetchها یا validationهای شما آماده است.
⚙️ کانفیگ :
اگر در داکیومنت Orval توجه کنید از انواع موارد مختلف پشتیبانی میکنه ، برای مثال شما میتوانید از axios یا fetch api یا react query یا vue query یا انگیولار یا zod ( برای valition ) و تا ترکیبی از fetch و validation بهرمند شوید.
📖 برای مطالعه بیشتر حتما به داکیومنت Orval مراجعه کنید.
https://orval.dev
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
این ابزار میتونه از طریق swagger v2 یا openAPI v3 بیاد درخواست های fetch رو بنویسه و میتونه بیاد validation با zod و به صورت type-safe براتون انجام بده. ( از فرمت های yaml و json پشتیبانی میکنه )
❇️ نحوه کار :
این ابزار رو به صورت dev dependencies نصب میکنید و یک فایل config داره که مشخص میکنید و به سادگی با یه دستور fetchها یا validationهای شما آماده است.
⚙️ کانفیگ :
اگر در داکیومنت Orval توجه کنید از انواع موارد مختلف پشتیبانی میکنه ، برای مثال شما میتوانید از axios یا fetch api یا react query یا vue query یا انگیولار یا zod ( برای valition ) و تا ترکیبی از fetch و validation بهرمند شوید.
📖 برای مطالعه بیشتر حتما به داکیومنت Orval مراجعه کنید.
https://orval.dev
🔖 #Javascript, #JS, #جاوااسکریپت
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
👍16❤4
🎉 معرفی Vue 3.6 (نسخه آلفا) — آغاز دوران Vapor
بهتازگی Vue 3.6 بهصورت آلفا منتشر شده و یکی از بزرگترین تحولات تاریخ این فریمورک رو میبینیم: حالت Vapor.
در این نسخه، حالت جدیدی به نام Vapor Mode معرفی شده که بهطور کامل بدون استفاده از Virtual DOM کار میکند! این یعنی عملکرد بسیار سریعتر، مصرف حافظه کمتر و...
برای استفاده از این قابلیت جدید، فقط کافیه در تگ <script setup> به صورت زیر از دستور vapor استفاده کنید
برای اینکه خودتون تفاوت رو حس کنید، برید به Vue Playground، نسخه 3.6-alpha2 رو انتخاب کنید و هم با حالت عادی و هم با vapor رو تست کنید.
🔖 #Javascript, #JS, #جاوااسکریپت #vue
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
بهتازگی Vue 3.6 بهصورت آلفا منتشر شده و یکی از بزرگترین تحولات تاریخ این فریمورک رو میبینیم: حالت Vapor.
در این نسخه، حالت جدیدی به نام Vapor Mode معرفی شده که بهطور کامل بدون استفاده از Virtual DOM کار میکند! این یعنی عملکرد بسیار سریعتر، مصرف حافظه کمتر و...
برای استفاده از این قابلیت جدید، فقط کافیه در تگ <script setup> به صورت زیر از دستور vapor استفاده کنید
<script setup vapor>
// کدهای شما اینجاست...
</script>
برای اینکه خودتون تفاوت رو حس کنید، برید به Vue Playground، نسخه 3.6-alpha2 رو انتخاب کنید و هم با حالت عادی و هم با vapor رو تست کنید.
🔖 #Javascript, #JS, #جاوااسکریپت #vue
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
🔥5👍3❤1
🎉 Nuxt V4
به تازگی نسخه جدید (V4) فریمورک ناکست منتشر شد...
🔥 تغییرات مهم در Nuxt 4:
🔹 ساختار جدید پروژه (پوشه app/)
ساختار پروژه حالا به صورت زیره و کدهای اپلیکیشن در app/ قرار میگیرن:
🔄 دیتا فچینگ بهینه تر شده
🔧 تجربه TypeScript بهبودیافته
⚡️ سرعت CLI بهتر شده
🎨 قالبهای UI جدید اضافه شده
و Nuxt 3 تا پایان ژانویه 2026 آپدیتهای نگهداری رو دریافت میکنه.
برای مطالعه بیشتر میتونید به وبلاگ ناکست سر بزنید.
🔖 #Javascript, #JS, #جاوااسکریپت, #nuxt, #vue
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
به تازگی نسخه جدید (V4) فریمورک ناکست منتشر شد...
🔥 تغییرات مهم در Nuxt 4:
🔹 ساختار جدید پروژه (پوشه app/)
ساختار پروژه حالا به صورت زیره و کدهای اپلیکیشن در app/ قرار میگیرن:
my-nuxt-app/
├─ app/
│ ├─ pages/
│ ├─ components/
│ ├─ layouts/
│ └─ app.vue
├─ server/
├─ shared/
├─ public/
└─ nuxt.config.ts
🔄 دیتا فچینگ بهینه تر شده
🔧 تجربه TypeScript بهبودیافته
⚡️ سرعت CLI بهتر شده
🎨 قالبهای UI جدید اضافه شده
و Nuxt 3 تا پایان ژانویه 2026 آپدیتهای نگهداری رو دریافت میکنه.
برای مطالعه بیشتر میتونید به وبلاگ ناکست سر بزنید.
🔖 #Javascript, #JS, #جاوااسکریپت, #nuxt, #vue
👤 Matin Soleymani
💎 Channel: @DevelopixJavascript
🔥18❤5
🤝 اگر تو پروژههای React هنوز برای data fetching از useEffect + fetch استفاده میکنی، زمان آشنایی با TanStack Query (react-query) رسیده.
این لایبرری مشکل مدیریت state سرور (data از API) رو حل میکنه؛ مثل:
• کشکردن requestها
• refetch خودکار دادهها
• مدیریت loading / error
• همگامسازی دیتا بین تبها و کامپوننتها
نتیجه؟ کد کمتر، باگ کمتر، UX روانتر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.
نصب:
نمونه استفاده ساده:
مستندات رسمی و مثالهای بیشتر:
Docs
GitHub
امتحانش کن تو پروژه بعدیات؛ مخصوصاً جاهایی که چند بار از یک API استفاده میکنی یا نیاز به refetch هوشمند داری. 🚀
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management
👤 Developix
💎 Channel: @DevelopixJavascript
این لایبرری مشکل مدیریت state سرور (data از API) رو حل میکنه؛ مثل:
• کشکردن requestها
• refetch خودکار دادهها
• مدیریت loading / error
• همگامسازی دیتا بین تبها و کامپوننتها
نتیجه؟ کد کمتر، باگ کمتر، UX روانتر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.
نصب:
npm install @tanstack/react-query
نمونه استفاده ساده:
import { QueryClient, QueryClientProvider,
useQuery } from '@tanstack/react-query';
const queryClient = new QueryClient();
function Todos() {
const { data, isLoading, error } = useQuery(['todos'], () =>
fetch('/api/todos').then(r => r.json())
);
if (isLoading) return <span>Loading...</span>;
if (error) return <span>Error!</span>;
return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}
function App() {
return (
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
);
}
مستندات رسمی و مثالهای بیشتر:
Docs
GitHub
امتحانش کن تو پروژه بعدیات؛ مخصوصاً جاهایی که چند بار از یک API استفاده میکنی یا نیاز به refetch هوشمند داری. 🚀
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management
👤 Developix
💎 Channel: @DevelopixJavascript
🔥11
👇 خروجی نهایی این کد JavaScript چیست؟
در این مثال از closure و رفتار hoisting برای توابع و متغیرها استفاده شده است. با دقت ترتیب اجرا و نوع متغیرها را بررسی کنید:
خروجی دقیق این کد در کنسول چیست؟ (هر خط را به ترتیب بنویسید)
🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
در این مثال از closure و رفتار hoisting برای توابع و متغیرها استفاده شده است. با دقت ترتیب اجرا و نوع متغیرها را بررسی کنید:
function makeCounter() {
console.log(typeof count);
var count = 0;
return function(step) {
count += step;
return count;
};
}
const c1 = makeCounter();
const c2 = makeCounter();
console.log(c1(1));
console.log(c1(2));
console.log(c2(5));خروجی دقیق این کد در کنسول چیست؟ (هر خط را به ترتیب بنویسید)
🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
👍7❤1
در کد زیر هدف این است که هر ثانیه مقدار متغیر count یک واحد زیاد شود و در نهایت بعد از ۳ ثانیه در console لاگ شود. اما مقدار نهایی لاگشده درست نیست. مشکل کجاست و این کد را چطور اصلاح میکنید تا مقدار صحیح لاگ شود؟
نکته: به رفتار
🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
نکته: به رفتار
var داخل حلقه و زمان اجرای setTimeout دقت کنید.🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
❤5👍2
در مثال بالا در نسخهی اول برای هر بار اسکرول کل آرایهی items دوباره sort میشود؛ این کار هم هزینهی زمانی
🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
O(n log n) را روی هر رویداد اسکرول تحمیل میکند و هم باعث ایجاد GC pressure غیرضروری میشود. در نسخهی دوم با مرتبسازی یکبارِ دادهها و استفاده از requestAnimationFrame برای کاهش فراخوانیهای متوالی، هم Performance رندر بهتر میشود و هم مصرف CPU و Memory کمتر میگردد. برای چنین سناریوهایی که دادهها بهندرت عوض میشوند ولی Event ها زیاد تریگر میشوند، این الگو چه مزیتهایی نسبت به نسخهی اول دارد؟🔖 #Javascript #JS #جاوااسکریپت
👤 Developix
💎 Channel: @DevelopixJavascript
🔥5
🚀 ساخت یک 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 در یک فولدر بگذار):
چند نکتهی کاربردی 💡
•
• همیشه قبل از push، مقدار input را
• با جداکردن تابعهای
این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگهداشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریمورکی را راحتتر میفهمی ✨
امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار میکند» میدهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend
👤 Developix
💎 Channel: @DevelopixJavascript
گاهی برای تمرین مفاهیم 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
پاکسازی توابع با تکنیک «Early Return» در JavaScript 🚿
یکی از سادهترین و مؤثرترین تکنیکهای Clean Code در جاوااسکریپت، استفاده از Early Return است؛ یعنی بهجای پیچوندن منطق داخل ifهای تودرتو، در همان اول تابع، شرایط نامعتبر را سریع برگردانیم.
این تکنیک توابع را:
• کوتاهتر و خواناتر میکند ✨
• از Nested ifهای عمیق جلوگیری میکند
• باعث میشود مسیرهای خطا و edge caseها واضحتر دیده شوند
نمونه کد قبل از refactor (کد سختخوان)
این تابع کارش را انجام میدهد، اما هر شرط جدیدی که اضافه شود، عمق ifها بیشتر میشود و دیباگ سختتر.
Refactor با Early Return ✅
الان:
• هر شرط invalid در بالا «قطع» میشود 🔪
• مسیر اصلی (happy path) در انتها واضح و تمیز است
• اضافهکردن شرط جدید فقط یعنی اضافه کردن چند خط دیگر بالای happy path
نمونه در Express / Node.js 🌐
هر مرحله نامعتبر بهسرعت 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
یکی از سادهترین و مؤثرترین تکنیکهای 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
گاهی کد async/await خیلی شلوغ میشه چون پر از try/catch تکراریه. یه الگوی جمعوجور میتونه هم کد رو تمیز کنه، هم مدیریت خطاها رو واضحتر کنه.
ایده اینه: بهجای try/catch دور هر await، یه helper کوچک مینویسیم که همیشه نتیجه رو به شکل یک آرایه برگردونه: [err, data]. شبیه سبک Node.js، ولی مدرن و تمیز 😎
نکات مهم ✅
• ساختار کنترل خطا توی تابع مشخص و خطی میمونه، بدون چندین 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
ایده اینه: بهجای 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
❤5👎2🔥1