‏AbortController در جاوااسکریپت ✌️

یکی از بزرگترین فاکتورهایی که کمک می‌کنه یک برنامهٔ بهینه و سریع داشته باشیم، اینه که بدونیم چطوری یک عملیات Async رو توی برنامه شروع، و اون‌ رو به پایان برسونیم. در حالت عادی ما عملیات مد نظرمون رو شروع می‌کنیم و بعد از چند لحظه پاسخ عملیات بهمون برمی‌گرده. پس عملیات به طور خودکار به پایان میرسه و به طور کلی، شروع این عملیات به دست خودمونه، اما پایانش خیر!

‏AbortController چیه؟ 🤔

‏AbortController یک قابلیته که اجازه میده خیلی راحت بتونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم.

فرض کنید می‌خوایم اطلاعاتی روی سرور آپلود کنیم:

(async function () { 
  const res  = await fetch('/upload', ... ); 
  const data = await res.json(); 
 
  return data; 
})(); 

گاهی اوقات می‌بینیم که آپلود بیش از حد معمول طول می‌کشه و می‌خوایم اون رو کنسل کنیم تا برای مثال، دکمه‌ای تحت عنوان «تلاش مجدد» نشون بدیم تا کاربر بیش از اندازه منتظر نمونه. fetch به تنهایی چنین قابلیتی رو نداره. اما برای حل این مسئله AbortController به کارمون میاد.

برای اینکه بتونیم عملیات مد نظرمون رو کنترل کنیم، ابتدا باید با استفاده از AbortController یک کنترلر بسازیم:

const controller = new AbortController(); 

همه کنترلرها یک پراپرتی به اسم signal دارن، که به عنوان یک رابط بین کنترلر و عملیاتی که می‌خوایم اون رو کنسل کنیم هست.

مرحلهٔ بعد اینه که این کنترلر رو به شکل زیر به fetch بشناسونیم. آرگومان دوم fetch که یک آبجکت برای کانفیگ کردن این درخواست هست، یک پراپرتی به اسم signal داره. مقدار اون رو برابر با پراپرتی signal از کنترلر قرار میدیم:

const controller = new AbortController(); 
 
(async function () { 
  const res  = await fetch('/upload', { 
    // ... 
    signal: controller.signal, 
  }); 
 
  const data = await res.json(); 
 
  return data; 
})(); 

حالا هر زمانی که لازم داشتیم می‌تونیم این عملیات رو کنسل کنیم. برای این کار کافیه متد abort از کنترلر رو صدا بزنیم:

const controller = new AbortController(); 
 
document.getElementById("cancel").onclick = () => { 
  controller.abort(); 
}

به طور کلی، AbortController یک قابلیت کاربردی توی جاوااسکریپت هست که با استفاده اون خیلی راحت می‌تونیم یک یا چند عملیات Async رو در زمان لزوم متوقف کنیم. برای کسب اطلاعات و مشاهده نمونه مثال های بیشتر، این مقاله رو مطالعه کنید.

#javascript
@CodeModule

با Reflect در جاوااسکریپت بیشتر آشنا بشید ✌️

آبجکت یا شئ Reflect، شامل متدهای استاتیک برای فراخوانی متدهای داخلی interceptable اشیاء جاوااسکریپته. برخلاف اکثر گلوبال آبجکت ها، Reflect یک constructor نیست، یعنی شما نمی‌تونید از اون با اوپراتور new استفاده کنید یا شیء Reflect رو به عنوان یک تابع کال کنید. تمام ویژگی‌ها و متدهای Reflect استاتیک هستن (مثل آبجکت Math).

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

مهم ترین استفاده ای که از Reflect میتونیم کنیم، اینه که default behavior رو در traps های (تابعی که رفتار متد داخلی مربوط به شیء یا آبجکتو تعریف می‌کنه) هندلر پروکسی مشخص کنیم.

یک trap برای متوقف کردن یک عملیات بر روی یک آبجکت استفاده میشه. برای مثال کدی که در خط های پایین تر میبینید، یک پروکسی با trap یک deleteProperty ایجاد می‌کنه که متد داخلی [[Delete]] رو متوقف می‌کنه. ()Reflect.deleteProperty برای فراخوانی رفتار پیش‌فرض [[Delete]] بر روی targetObject به‌طور مستقیم استفاده میشه، که میتونید اونو با delete هم جایگزین کنید.

const p = new Proxy({}, {
    deleteProperty(targetObject, property) {
      // Custom functionality: log the deletion
      console.log("Deleting property:", property);

      // Execute the default introspection behavior
      return Reflect.deleteProperty(targetObject, property);
    },
  },
);

🚀متدهای Reflect کنترل بیشتری بر نحوه فراخوانی متدهای داخلی فراهم میکنن. برای مثال، ()Reflect.construct تنها راهیه که میتونید یک تابع تارگت رو با یک مقدار خاص برای new.target بسازید.

اگر از اپراتور new برای فراخوانی یک تابع استفاده کنید، مقدار new.target همیشه خود تابع خواهد بود. این موضوع تأثیرات مهمی بر روی subClass ها داره. برای مثال، ()Reflect.get به شما اجازه میده تا یک getter رو با یک مقدار this کاستوم اجرا کنید، در حالی که دسترسی به ویژگی‌ها، همیشه از شیء فعلی به عنوان مقدار this استفاده می‌کنه.

تقریباً رفتار هر متد Reflect رو میشه با بعضی دیگه از سینتکس‌ها یا متدها انجام داد. بعضی از این متدها، متدهای استاتیک هم اسم تو کلاس Object دارن، هرچند که تفاوت‌های ظریفی وجود داره.

برای کسب اطلاعات بیشتر و درک عمیق تر Reflect و static method هاش، میتونید به منبع زیر مراجعه کنید 🏖️

Document 🌕

#javascript #reflect
@CodeModule

الگوی Event Delegation چیه؟ ✌️

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

اگه چندین المنت مشابه داشتیم و نیاز بود با یک رویداد خاص (مثلاً keyup) همهٔ این المنت‌ها رو مدیریت کنیم، این الگو با استفاده از قابلیت Event Propagation، بهمون اجازه میده تا با اضافه کردن هندلر (یا Listener) به المنت والد، بتونیم رویدادهای المنت‌های داخلی رو مدیریت کنیم. یعنی ما به جای اینکه برای تک تک این المنت‌ها هندلر بنویسیم، هندلر رو به المنت والد اضافه می‌کنیم.

بریم که این الگو رو پیاده‌سازی کنیم. المنت‌های زیر رو در نظر بگیرید ⬇️

<form> 
  <input id="num-1" name="num-1"> 
  <input id="num-2" name="num-2"> 
  <input id="num-3" name="num-3"> 
  <input id="num-4" name="num-4"> 
  <input id="num-5" name="num-5"> 
  <input id="num-6" name="num-6"> 
</form> 

ما ابتدا برای المنت والد یعنی <form> یک ایونت keyUp تنظیم میکنیم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  console.log(event.target.value); 
}); 

باید بدونیم که با این کد، رویداد keyup همهٔ المنت‌های داخلی فرم قابل مدیریت هست و با رخ دادن این رویداد، کدی که توی هندلر نوشتیم برای همهٔ المنت‌ها اجرا میشه، حتی برای ورودی‌های دیگه‌ای مثل textarea و checkbox. حالا اگه ما بخوایم فقط برای input های نوع text این رویداد رو مدیریت کنیم، باید توی هندلر این قضیه رو مدیریت و محدود کنیم و مشخص کنیم که دقیقاً با کدوم ورودی‌ها سر و کار داریم:

document.querySelector('form').addEventListener('keyup', (event) => { 
  if (event.target.tagName === 'INPUT' && event.target.type === 'text') { 
    console.log(event.target); 
  } 
}); 

حالا به راحتی می‌تونیم رویداد keyup همهٔ <input> ها رو مدیریت کنیم و حتی اگه ورودی‌هایی اضافه یا کم بشه، کدی که نوشتیم دیگه تغییری نمی‌کنه. برای کسب اطلاعات بیشتر این مقاله رو مطالعه کنید.

#javascript #eventDelegation
@CodeModule

نگاهی به سایت State of JS 👍

سایت State of JS یک نظرسنجی سالانه در مورد تکنولوژی‌های مربوط به جاوااسکریپت هست. این سایت اطلاعاتی درباره محبوبیت، ترندها، ابزارهای مختلف جاوااسکریپت مثل فریم‌ورک‌ها، کتابخانه‌ها، و ابزارهای دیگه فراهم می‌کنه. کاربران و توسعه‌دهندگان جاوااسکریپت از سراسر جهان در این نظرسنجی شرکت می‌کنن و نتایج اون به صورت گزارش‌های تحلیلی ارائه میشه.

این گزارش‌ها می‌تونه به دولوپرا کمک کنه، تا تصمیمات بهتری در مورد انتخاب ابزارها و تکنولوژی‌ها برای پروژه‌هاشون بگیرن. پس پیشنهاد میکنم حتما یه سر به سایتش بزنید.

Website 🌐

#javascript
@CodeModule

با استفاده از navigator در جاوااسکریپت، چه کارهایی میتونیم انجام بدیم؟ 🪐

تشخیص نوع دستگاه و سیستم‌عامل کاربر:

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

const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('iphone')) {
    console.log('User is on an iPhone');
} else if (userAgent.includes('android')) {
    console.log('User is on an Android device');
}

دسترسی به اطلاعات شبکه (Network Information API):

از navigator.connection میتونین برای دریافت اطلاعات شبکه کاربر مثل نوع ارتباط (WiFi, 4G) و سرعت اون استفاده کنیم.

const connection = navigator.connection  navigator.mozConnection  navigator.webkitConnection;
if (connection) {
    console.log('Effective connection type:', connection.effectiveType);
    console.log('Downlink speed:', connection.downlink, 'Mbps');
}

تشخیص وضعیت آنلاین/آفلاین بودن کاربر:

با استفاده از navigator.onLine می‌تونیم وضعیت آنلاین یا آفلاین بودن کاربر رو بررسی کنیم و تجربه کاربری رو بهبود ببخشیم.

if (navigator.onLine) {
    console.log('User is online');
} else {
    console.log('User is offline');
}

استفاده از Web Share API برای به اشتراک گذاری محتوا:

با استفاده از navigator.share می‌تونیم امکان اشتراک‌گذاری محتوا رو در دستگاه‌های موبایل فراهم کنیم.

const shareData = {
    title: 'Example Page',
    text: 'Check out this cool page!',
    url: 'https://example.com'
};

navigator.share(shareData).then(() => {
    console.log('Content shared successfully');
}).catch(err => {
    console.error('Error sharing content:', err);
});

دسترسی به باتری دستگاه (Battery Status API):

با استفاده از navigator.getBattery می‌تونیم اطلاعاتی مثل سطح باتری و وضعیت شارژ رو دریافت کنید.

avigator.getBattery().then(battery => {
    console.log('Battery level:', battery.level * 100 + '%');
    console.log('Charging:', battery.charging ? 'Yes' : 'No');
});

#navigator #javascript
@CodeModule

همه چیز از متد hasOwn جاوااسکریپت ✌️

کارایی hasOwn تقریباً مشابه hasOwnProperty هست و این متد به صورت استاتیک، از آبجکت گلوبال Object در دسترس هست و بررسی می‌کنه که آیا یک پراپرتی داخل یک آبجکت خاص وجود داره یا خیر. خروجی این متد یک مقدار بولین (true یا false) هست.

const person = { name: 'Emily' }; 
 
Object.hasOwn(person, 'name'); // true 
person.hasOwnProperty('name'); // true

مستندات MDN میگه hasOwn قراره جایگزین hasOwnProperty بشه. اما چرا؟ چرا hasOwn رو به hasOwnProperty ترجیح بدیم؟

دلایل مختلفی برای معرفی این متد وجود داره. ابتدای باید محدودیت‌های hasOwnProperty رو بشناسیم. اول اینکه این متد خیلی راحت می‌تونه Override بشه:

const person = { 
  name: 'Mario', 
  hasOwnProperty() { 
    return true; 
  }, 
} 
alert(person.hasOwnProperty('age')); // true

همچنین وقتی که یک آبجکت رو به صورت زیر می‌سازیم:

const person = Object.create(null); 

اینجا معمولاً هدفمون اینه که یک آبجکت بدون پروتوتایپ می‌خوایم. یعنی بدون والد. پس توی چنین آبجکتی هیچ یک از پراپرتی‌های والد وجود نداره. از جمله hasOwnProperty. پس با صدا زدن این متد از این آبجکت خطا می‌گیریم:

const person = Object.create(null); 
 
person.hasOwnProperty('name'); // TypeError: person.hasOwnProperty is not a function

‏Override کردن یا حذف کردن چنین متدی ممکنه برای یک کتابخونه خارجی دردسر ساز بشه. برای حل چنین مشکلی نویسنده اون کتابخونه مجبور بود به چنین راه حل‌هایی رو بیاره:

const person = { 
  hasOwnProperty() { 
    return true; 
  }, 
}
 
const exists = Object.prototype.hasOwnProperty.call(person, 'age'); alert(exists); // false

پس دولوپرای جاوااسکریپت به این فکر افتادن که یک متد اختصاصی برای حل چنین مشکلاتی معرفی کنن. اسم این متد رو گذاشتن hasOwn. اگه از این متد برای آبجکت‌های بالا استفاده کنیم دیگه خطا نمی‌گیریم:

const person1 = Object.create(null); 
alert(Object.hasOwn(person1, 'name')); // false 
const person2 = { 
  hasOwnProperty: () => true, 
}

alert(Object.hasOwn(person2, 'name')); // false 

همونطور که گفتیم اگه یک پراپرتی توی یک آبجکت وجود داشته باشه، خروجی این متد true هست. حتی اگه مقدار پراپرتی null یا undefined باشه:

const person = {}; 
Object.hasOwn(person, 'name'); // false 
 
person.age = 4; 
Object.hasOwn(person, 'age');  // true 
 
person.prop = null; 
Object.hasOwn(person, 'prop');  // true 
 
person.prop = undefined; 
Object.hasOwn(person, 'prop');  // true

از این متد نمی‌تونیم برای مقادیر null و undefined استفاده کنیم:

// TypeError: can't convert undefined to object 
Object.hasOwn(undefined, 'prop'); 
 
// TypeError: can't convert null to object 
Object.hasOwn(null, 'prop');

همچنین با hasOwn می‌تونیم بررسی کنیم که آیا یک آرایه یک ایندکس خاص داره یا نه:

const numbers = ['one', 'two']; 
 
Object.hasOwn(numbers, 1); // true 
Object.hasOwn(numbers, 2); // false

همچنین باید بدونیم که متد hasOwn یک متد کاملاً جدید هست و فقط مرورگرهای جدید از اون پشتیبانی می‌کنن.

#hasown #javascript
@CodeModule