۱۲ سوال متداول جاوااسکریپت و جواب‌های‌شان - بخش سوم

بخش های قبلی :

همانطور که می‌دانیم جاوااسکریپت یکی از منعطف‌ترین ابزارها برای طراحی وب است. اما با این وجود سوالات و شُبَهات بسیاری در مورد این ابزار وجود دارد.

در این مطلب قصد داریم که شما را با ۱۲ سوال مرسوم و متداول که مربوط به جاوااسکریپت است آشنا کنیم. این‌ها سوالاتی هستند که نه فقط افراد عادی بلکه افراد متخصص نیز ممکن است به روشنی جواب‌شان را ندانند. همراه با سوالات جواب‌های‌شان نیز ارائه می‌گردد، برخی از این سوالات را در مصاحبه‌های شغلی نیز می‌پرسند.

۱۱- چگونه از جاوااسکریپت برای بهبود کارایی وبسایت‌م استفاده کنم؟

در زمانی که تقریبا بیشتر روند کاوش و جستجو در وب با استفاده از موبایل‌ها و تبلت‌ها انجام می‌شود، کارایی بحث بسیار مهمی است. تمامی افراد در دنیا از آخرین نسخه‌های سخت افزاری استفاده نمی‌کنند، بنابراین باید دقت داشته باشید که کارایی مطلوبی را ارائه دهید تا با مشکلاتی مانند پردازش صفحه وب، تاخیر در اجرای یک کنش و... مواجه نشوید.

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

استفاده از passive

اسکرولینگ ناهموار و پر از تعویق به این معناست که چیزی وجود دارد که در حال بالا رفتن و برخورد به اشکال است. در برخی از حالات مرورگر مجبور شده است که تا زمان اعمال یک listener به برگه صبر کند و متوقف شود. رویدادهایی مانند wheel و touchmove قابلیت لغو کردن عملیات اسکرولینگ را دارند. بنابراین برگه باید تا زمانی که یک رویداد به تمامی کامل می‌شود، صبر کند و بعد از آن رفتار پیشفرض اسکرولینگ را دوباره آغاز نماید.

این موضوع باعث می‌شود که حس اسکرولینگ ناسازگاری بوجود بیاید که در نهایت باعث بوجود آمدن تجربه کاربری ضعیفی می‌شود.

document.addEventListener('touchmove', handler, {passive: true});

برای حل کردن این مسئله یک شئ را به عنوان پارامتر سوم در یک event listener قرار دهید. با قرار دادن رویداد به عنوان یک رویداد passive مرورگر می‌تواند به این نتیجه برسد که اسکرولینگ تاثیر نخواهد گرفت و همه چیز به سرعت شروع می‌شود.

مهار کردن رویدادها

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

const resizeDebounce = debounce(() => {

// Code for resize event }, 200);

window.addEventListener('resize', resizeDebounce);

Debouncing تکنیکی است که با استفاده از آن می‌توانید روند فراخوانی یک رویداد را مهار کنید. پیاده‌سازی چنین تکنیکی براساس هر پروژه می‌تواند متفاوت باشد و مقادیر متفاوتی را در بر بگیرد.

تمرکز روی Viewport

یکی از استفاده‌های مرسوم رویداد scroll برای زمانی است که وارد شدن یک المنت به صفحه را تشخیص دهیم. حتی با debouncing، فراخوانی getBoundingClientRect() مرورگر را مجبور می‌کند که لایه‌بندی کلی صفحه را بازنگری کند. یک API جدید با نام IntersectionObserver برای مرورگرها عرضه شده است که روی نمایان بودن یک المان در صفحه کار می‌کند. برای یک وبسایت که از حالت اسکرولینگ نامحدود استفاده می‌کند این API می‌تواند مانند یک پرچم برای نمایش وضعیت باشد.

IntersectionObserver در تمام مرورگرهای مدرن بغیر از سافاری به خوبی کار می‌کند. به نظر می‌رسد که استفاده از این API بسیار بهتر از حالت قبلی است.

جداسازی کارهای سخت

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

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

۱۲- چگونه کدهای جاوااسکریپت‌م را برای آینده آماده نگه‌دارم؟

یکی از قواعد اصلی جاوااسکریپت این است که حد المقدور از شکستن تغییرات اجتناب کنید. بیشتر کدهایی که امروز نوشته می‌شود حتی تا یک دهه دیگر نیز کار خواهد کرد –حتی با تغییر در صنعت این موضوع باز به همین صورت است-.

با این حال تنها به این دلیل که یک قسمت از کد به خوبی کار می‌کند به این معنا نیست که در آینده نیز کارایی خوبی از خود نشان می‌دهد. پایه کدهای شما در چند سال بعد ممکن است به کاملی اشتباه باشد!

از شلخته بودن در کدها اجتناب کنید –Spaghetti Code-

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

با نگه‌داری کردن از کدها به صورت ماژولار، کارکرد کدها را می‌توانید در هر جایی که نیاز است استفاده نمایید. بعد از اینکه این قسمت‌ها نوشته شدند، هر تغییری به صورت مستقیم قابل دسترس است. تکنیک‌هایی مانند الگوی ماژول‌بندی می‌تواند بدون تاثیر گذاشتن روی کدهای دیگرتان پیاده‌سازی شود.

لزومات هر فریمورک را در نظر بگیرید

بسیاری از فریمورک‌های مدرن، مانند ری‌اکت یا Polymer در روند ایجاد کامپوننت‌ها سعی دارند تا توسعه‌دهندگان را به استفاده از الگوی ماژول ترغیب کنند. هر کدام از این موارد حالت ارتباطی منحصر به فرد خودشان را با دیگر قسمت‌های یک پروژه دارند.

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

تا جایی که ممکن است از ویژگی های محلی جاوااسکریپت برای رسیدن به نتیجه استفاده کنید. در این حالت مسئله مربوط به تغییرات فریمورک حل خواهد شد. برای مثال قبل از اینکه مسئله data manipulation را به یک کامپوننت واگذار کنید، خودتان از objectهای جاوااسکریپت برای حل این مسئله استفاده نمایید.

نوشتن جاوااسکریپت به صورت یونیورسال معمولا می‌تواند اثربخشی بسیار سریع‌تری را برای شما داشته باشد.

تمیز کردن کدها

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

let activeUsers = users.filter(user => user.active === true);

Self-document کردن کدها ابزار بسیار قدرتمندی برای بهبود آینده کدهای‌تان است. از نام‌های تشریح دهنده برای متغیرهای‌تان استفاده کنید.

از همه مهمتر سازگار و همخوان باشید. با پایبند بودن به یک استایل یکسان و یکنواخت، کدهای‌تان قابلیت خوانایی بالایی پیدا می‌کند. برای این موضوع می‌توانید از Style Guide استفاده کنید.

در مقیاس‌های مختلف کار کنید

خوانا بودن کدهای‌تان به ساختار پروژه نیز مربوط می‌شود. بدون این مورد همه چیز ممکن است کمی پیچیده باشد.

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

اما وقتی که فایل های پروژه بزرگ‌تر می‌شود ممکن است برخی چیزها گم شوند. ساختاری را پیاده‌سازی کنید که بتواند اپلیکیشن‌ها را در هر مقیاسی پشتیبانی کند.

همه چیز را «تست پذیر» نگه‌ دارید

فریمورک‌هایی مانند ری‌اکت شما را ترغیب می‌کنند که کامپوننت‌های کوچکی را با قابلیت استفاده مجدد ایجاد کنید. حتی با داشتن یک ساختار مناسب و مقیاس‌پذیر در نظر گرفتن اینکه تمام فایل‌ها به خوبی کار می‌کنند کمی سخت و دشوار است. با نوشتن تست‌ برای فایل‌ها، می‌توانید از درست کار کردن آن‌ها مطمئن شوید.

تست‌های واحد در یک سطح ماژول کار می‌کنند. ابزارهایی مانند Mocha و Jest به توسعه‌دهندگان اجازه می‌دهند تا خروجی مورد نظری را برای یک ورودی تعریف کنند.

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

موضوعات دیگری نیز در روند تست کردن یک اپلیکیشن وجود دارد که باید آن‌ها را در نظر گرفت. ادغام‌سازی و تست کارایی از این دسته موارد هستند. داشتن چنین تست‌هایی به شما این امکان را می‌دهد که برای آینده پروژه‌تان مطمئن‌تر باشید.

زبان فردا

یکی از بهترین راه‌ها برای نوشتن اپلیکیشنی برای آینده این است که از سینتکس آینده استفاده کنید. در حالیکه چنین موضوعی کمی عجیب و غریب است اما ابزارهایی وجود دارد که در این زمینه به شما کمک می‌کنند.

Babel یک transpiler است که وظیفه تبدیل یک فرم از جاوااسکریپت به فرم دیگری را دارد. از این مورد برای تبدیل کردن کدهای مدرن به کدهایی با قابلیت خوانایی توسط مرورگرها و محیط‌های قدیمی استفاده می شود.

ES2015 ویژگی‌های بسیار زیادی را به جاوااسکریپت آورد و بعد از آن ES7,8 نیز به همین صورت جلو رفتند. Babel به شما کمک می‌کند که این ویژگی‌ها را به جاوااسکریپت قدیمی‌تری تبدیل کنید و آن‌ها را در مرورگر اجرا نمایید.

منبع