همانطور که می‌دانیم جاوااسکریپت یکی از منعطف‌ترین ابزارها برای طراحی وب است. اما با این وجود سوالات و شُبَهات بسیاری در مورد این ابزار وجود دارد.
در این مطلب قصد داریم که شما را با ۱۲ سوال مرسوم و متداول که حول جاوااسکریپت است آشنا کنیم. این‌ها سوالاتی هستند که نه فقط افراد عادی بلکه افراد متخصص نیز ممکن است به روشنی جواب‌شان را ندانند. همراه با سوالات جواب‌های‌شان نیز ارائه می‌گردد، برخی از این سوالات را در مصاحبه‌های شغلی نیز می‌پرسند.
۱- منظور از Prototype Inheritance چیست و چه کاربردی دارد؟
در جاوااسکریپت تقریبا همه چیز یک شئ است. هر کدام از شئ‌ها نیز دارای یک Prototype هستند که از آن مقادیر و رفتارهایی را به ارث می‌برند. اگر یک شئ شامل یک خاصیت که درخواست شده باشد نشود، جاوااسکریپت به Prototype یا نمونه اولیه آن نگاه می‌اندازد. این کار را براساس زنجیره‌ای از نمونه‌های اولیه انجام می‌دهد و تا زمانی که یک الگوی همخوان نداشته باشد روند را ادامه می‌دهد در نهایت اگر چنین المانی پیدا نشد یک خطا برگشت داده می‌شود.
استفاده از این حالت برای شئ‌هایی که مقادیر و رفتار‌های مشابهی را ارائه می‌دهند بسیار مفید است. با داشتن این موارد در یک نمونه اولیه، تنها یک مورد از آن برای انجام کار چندین شئ نیاز است. این موضوع باعث می‌شود که بهینه‌سازی حافظه صورت بگیرد.
var parent = {inherit: true}
var childA = Object.create(parent);
var childB = {};
Object.setPrototypeOf(childB, parent);
class childC extends parent {}
نمونه‌های اولیه را می‌توان با استفاده از Object.create() در ابتدای ایجاد یک شئ اضافه کرد. البته می‌توان بعدها نیز این کار را با استفاده از Object.setPrototypeOf() انجام داد. در اکمااسکریپت ۲۰۱۵ ما با کلمه کلیدی class همراه هستیم که اگر با extends به کار گرفته شود، مقدار نمونه اولیه را تنظیم می‌کند.
۲- چگونه از جاوااسکریپت برای بهبود وضعیت دسترسی‌پذیری در وب استفاده کنیم؟
ابزارهای مدرن دسترسی‌پذیری وب قادر به استفاده و مدیریت جاوااسکریپت و دیگر محتوای پویا هستند. از این تکنولوژی تا زمانی که به عنوان یک تقویت کننده استفاده شود مشکلی وجود ندارد و بسیار مفید نیز است، اما به عنوان یک رویکرد الزامی ممکن است گاهی اوقات با مشکل مواجه شوید.
یک راه مرسوم برای کمک کردن به کاربران این است که مدیریت متمرکزی را بوجود بیاورید. برای مثال یک تقویم باید بتواند با استفاده از کلیدهای جهت در بین روزها جابجا شود.
۳- Event bubbling چیست و با Event capturing چه تفاوتی دارد؟
هر دو Event Capturing و Event Bubbling قسمتی از فرایندی به نام «event propagation» هستند. این فرایند زمانی اتفاق می‌افتد که مرورگرها به رویدادهایی که در یک صفحه اتفاق می‌افتد جواب می‌دهند. مرورگرهای قدیمی یکی از تکنیک‌های بالا را استفاده می‌کنند اما مرورگرهای امروزی هر دو مورد را در نظر می‌گیرند.
اولین مرحله –مرحله Capturing- بلافاصله بعد از ایجاد یک رویداد اجرا می‌شوند. این مورد در اولی‌ترین لایه و ابتدایی‌ترین مرحله که مرحله window یا document است اتفاق می‌افتد. بعد از آن به المان‌های زیرین نفوذ می‌کند و تا المان اصلی که رویداد از آن نشئت گرفته است می‌رود.
دومین مرحله –مرحله Bubbling- است. این مرحله نیز مانند قبل عمل می‌کند با این تفاوت که همه فرایند بلعکس اتفاق می‌افتد. این بار با المان اصلی رویداد رو در رو هستیم و بعد از آن به صورت لایه‌ای تا المان‌های ریشه می‌رویم. وقتی که یک event listener به صفحه اضافه می‌کنید این فرایند به صورت پیشفرض اتفاق می‌افتد.
۴- چگونه فرایند event delegation به بهبود کدها در وبسایتی همراه با المان‌های تعاملی بسیار زیاد کمک می‌کند؟
وبسایت‌ها معمولا شامل محتوای پویایی می‌شوند که به صورت متداول و منظم در یک صفحه تغییر می‌کنند. اگر این المان‌ها نیاز به تعاملی بودن داشته باشند، به یکسری event listenerها نیاز خواهند داشت. اگر هر کدام از المان‌ها listener مربوط به خودش را داشته باشد باعث می‌شود که کدها بسیار بزرگ شوند و کار مرورگر را مشکل کنند.
event delegation یک تکنیک است که از فرایند Event Bubbling استفاده می‌کند. با اضافه کردن event listener به یک المان والد، توسعه‌دهندگان می‌توانند از آن برای هر کدام از المان‌های فرزند استفاده کنند.
parentEl.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == 'BUTTON') {
// Button clicked
} });
در داخل event callback، هدف اصلی برای یک رویداد همواره target می‌شود. از این قسمت برای برنامه‌ریزی کردن اتفاقات بعدی استفاده می‌شود. برای مثال یک data attribute می‌تواند شامل آی‌دی مربوط به یک خاصیت از یک شئ باشد.
۵. closureها چه هستند و چگونه می‌توانند در روند سازماندهی کدها مفید باشند؟
توابع در جاوااسکریپت از چیزی به نام Lexical Environment استفاده می‌کنند. حالتی که اجازه دسترسی به متغیرهایی را می‌دهد که بیرون از تابع تعریف شده‌اند. این در حالی است که متغیرهای داخلی فقط در داخل تابع قابلیت استفاده را دارند.
function outer() {
let x = 'Web Designer';
function shout() {
alert(`I love ${x}!`);
}
shout(); }
حال اگر تابع outer() را فراخوانی کنید به شما جمله I love Web Designer! را برمی‌گرداند، اما اگر x و یا shout را خارج از outer() فراخوانی کنید به شما مقدار تعریف نشده یا undefined را برمی‌گرداند. منظور از closure در حقیقت ترکیبی از یک تابع همراه با Lexical Environment است.
این موارد برای زمانی که کامپوننت‌های چندگانه را ایجاد می‌کنید و نیاز دارید که هیچ چیزی در داخل روی بقیه موارد تاثیر نداشته باشد مفید است. از این موارد می‌شود برای ساخت توابع و متغیرهای خصوصی –مانند حالت شئ‌گرا- استفاده کرد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید