img

۲۰ ترفند جاوا اسکریپت

/
/
/

برگردان: مهسا قنبری—-

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

جاوا اسکریپت زندگی خود را به عنوان یک زبان مبتنی بر مرورگر آغاز کرد و برای افزودن تعاملات با صفحات وب مورد استفاده قرار گرفت، اما در چند سال گذشته این زبان برنامه نویسی تا حد زیادی تکامل پیدا کرده است. وقتی Node.js کاری کرد که جاوا اسکریپت در سرور اجرا شود، جهانی از امکانات به روی کاربران گشوده شد و نوآوری‌های بیشتر در این زبان اجتناب‌ناپذیر گردید.
با رشد زبان جاوااسکریپت، این تکاملات زمینه ایجاد نسخه بعدی جاوااسکریپت را فراهم ساختند: ECMAScript 2015 ( که قبلاً تحت عنوان ES6 شناخته می‌شد). همراه با این نسخه جدید، یک چرخه انتشار جدید هم عرضه شد. بعد از بروزرسانی اصلی این زبان در سال ۲۰۱۵، زبان جاوا اسکریپت در حال حاضر هر سال شاهد بروزرسانی‌های مختصری است که با وجود تکرارهای مکرر و کوچک همچنان تکامل و توسعه می‌یابد. حال نگاهی به برخی از ابزارها و ترفندهای محبوب جاوااسکریپت می‌اندازیم. مطمئن هستیم این ترفندها موجب تعجب و هیجان شما خواهند شد، بخصوص اگر از تحولات این سال‌های جاوااسکریپت خبر نداشته‌اید.

۱- با Babel جاوااسکریپت فردا را امروز بنویسید     
هنوز هم تمام مرورگرها کد ES2015 را نمی‌فهمند، بنابراین برای استفاده از آخرین ویژگی‌های این زبان، به ابزاری همچون Babel نیاز داریم. Babel کد ES2015 را به کد جاوااسکریپت ES5 تبدیل می‌کند که تمام مروگرها می‌توانند آن را تفسیر کنند. برای توسعه‌دهندگان از طریق ساختن سیستم‌هایی همچون gulp یا webpack، Babel را به روند استقراری خود اضافه می‌کنند. این روش به توسعه‌دهندگان امکان می‌دهد تا از آخرین فناوری‌ها استفاده کنند ضمن این که می‌توانند مطمئن باشند که اپ‌هایشان با نسخه‌های قدیمی مرورگر همچنان سازگاری دارند، اما فقط در مرحله استقرار.
Babel یک کامپایلر جاوااسکریپت است که به توسعه دهندگان امکان می‌دهد با استفاده از جدیدترین نسخه جاوااسکریپت کد نویسی کنند، ضمن این که سازگاری اپ‌های آنان با مرورگرهای قدیمی‌تر که هنوز ویژگی‌های جدید این زبان را نپذیرفته‌اند، حفظ می‌شود.

۲- کشف راه‌های جدید تعریف متغییرها
در ES2015، جاوااسکریپت دو روش جدید برای تعریف متغییرها معرفی کرد: let وconst  . let زمانی استفاده می‌شود که متغییر دوباره تعیین خواهد شد، در حالی که const مانع تعیین دوباره متغییر می‌شود. توجه داشته باشید که استفاده از const، آرایه‌ها و آبجکت‌ها را فریز نمی‌کند و مانع تغییر یافتن خصوصیات نمی‌شود. بلکه، خود متغییر را از انتصاب دوباره حفظ می‌کند.
مزیت اصلی که let  و const نسبت به var دارند این است که وقتی از var استفاده می‌کنید، متغییرهای شما در بالای تابع فعلی محدود (scope) می‌شوند، بنابراین موجب می‌گردد متغییر در دسترس کل تابع قرار بگیرد. برخلاف آن، let و const به نزدیکترن بلوک خودشان محدود (scope) می‌‌شوند و به توسعه‌دهندگان اجازه می‌دهند تا متغییرها را داخل بلوک‌های if ، while ، for و حتی switch تعریف کنند، بدون این که نگران آن باشند که محدوده متغییرها به خارج از آن کانتکست نفوذ پیدا کند.

۳- با استفاده از Arrow Function‌ها ، this را سالم نگه دارید
ویژگی‌ دیگری که اخیراً به جاوااسکریپت اضافه شده است، توابعarrow ‌ هستند که توانایی آن را دارند که کانتکست this را سالم حفظ کنند، بخصوص زمانی که از آن در callbackهایی استفاده می‌کنید که ممکن است از کجاهای دیگر فرا خوانده شوند ( به عبارت دیگر افزودن یک event listener با jQUERY و غیره ). به خصوص این که توابعarrow  نیاز به افزودن .bind(this) را در آخر تعریف یک تابع، جایگزین می‌کنند.
دو راه اصلی برای نوشت توابع arrow وجود دارند: one-linerها و multiple-linerها.one-liner‌ها دارای یک عبارت هستند و مقدار آن عبارت را باز می‌گردانند؛ بدون آن که نیاز به آکولاد باشد. Multiple-liner ها دارای آکولاد هستند و کلمه کلیدی return باید به وضوح مورد استفاده قرار بگیرد.

let doubleShort = (num) => num * 2;
let doublelong = (num) => {
let doublenum = num * 2;
return doublenum;
}

محبوبیت جاوا اسکریپت
جاوااسکریپت جزو زبان‌های برنامه نویسی است که سریعترین رشد را داشته. تعداد مخزن‌های جاوا اسکریپت که اخیراً در GitHub میزبانی می‌شوند، افزایش چشمگیری داشته است
JavaScript.com جاوااسکریپت را رایگان آموزش می‌دهد و با آخرین اخبار مربوط به انجمن جاوااسکریپت بروز می‌شود، این وب سایت با تیم Code School همکاری دارد.

۴- استفاده از promiseها برای جلوگیری از مشکلات callback
جاوااسکریپت بسیاری از عملیات خود را به صورت غیرهمزمان انجام می‌دهد، بنابراین انتقال توابع callback ضمن منتظر ماندن برای انجام گرفتن کارهای دیگر، یک الگوی استادارد خوب است.
وقتی عمل غیرهمزمانی را انجام می‌دهید که عمل غیرهمزمان دیگری را فعال می‌کند، مشگل آغاز می‌شود.
به احتمال زیاد از بسیاری از توابع توکار callback که موجب پراکنده شدن و سختتر خوانده شدن کد می‌گردند، عبور داده خواهید شد.
Promiseها این مشگل را حل می‌کنند، اینگونه که کمک می‌کنند تا کد را به ترتیب صحیح، به یک روش کوتاه و مختصر اجرا کنید، ضمن این که غیرهمزمان بودن عمل‌ها را حفظ می‌کند.
API بسیار خوب است: شما به کد می‌گوید چه کاری انجام دهد، بعد کار دیگر، بعد کار دیگر- و حتی می‌توانید در طول راه خطاها را هم گیر بیاندازید.

برنامه نویسی مبتنی بر توابع
۵- جایگزین کردن حلقه‌های for با map برای حفظ سادگی
فرض کنید ما آرایه‌ای از اعداد داریم و می‌خواهیم با دوبرابر کردن تمام آن اعداد از اولین آرایه، آرایه دیگری بسازیم. یک راه انجام این کار تعریف کردن یک آرایه خالی، نوشتن حلقه for و تنظیم یک عدد در دومین آرایه با  جستجوی شاخص در اولین آرایه و دوبرابر کردن آن است.
یا می‌توانیم با نگاشت(map) آرایه در آرایه دیگر از یک راه حل شسته رفته تری استفاده نماییم.

[۱, ۲, ۳].map((num) => num * 2); // [2, 4, 6]

۶- جایگزن کردن حلقه‌های for با filter
این بار، فرض می‌کنیم که آرایه‌ای از اعداد داریم و می‌خواهیم آرایه دیگری ایجاد کنیم که شامل تنها اعداد زوج از اولین آرایه باشد. مجدداً یک راه انجام این کار تعریف یک آرایه خالی، نوشتن حلقه for و نوشتن دستور if است تا (برای مثال) زوج بود اعداد را در شاخص بررسی کنید.
یا، می‌توانیم از متد filter موجود برای آرایه‌ها استفاده کنیم:
[۴, ۷, ۲, ۳].filter((num) => num % 2 === 0); // [4, 2]
۷-  استفاده از reduce به جای حلقه‌های for
برای این تمرین، جمع  تمام اعداد را در آرایه حساب کنید. یک راه برای این کار تعریف متغییری است که مقدار اولیه آن صفر باشد. سپس یک حلقه for می‌نویسیم و آرایه خود را پیمایش می‌کنیم؛ هر عدد را می‌گیریم و به متغییر تازه خود اضافه می‌کنیم. یا می‌توانیم از متد reduce استفاده کنیم:
[۷, ۲, ۴].reduce((a, b) => a + b); // 13
البته، می‌توانیم تمام سه ایده را با ضرب کردن تمام اعداد در ۷ و افزودن تمام اعدادهایی که کوچکتر از ۲۰ هستند، ادغام کنیم:
[۳, ۲, ۱, ۶]
.map(num => num * 7)
.filter(num => num < 20)
.reduce((a, b) => a + b); // 21

۸- بهره گرفتن از تغییرناپذیری و ثبات
ثبات داده‌ها راهکار رایجی در زبان‌های مبتنی بر تابع است. داده‌های باثبات و تغییرناپذیر به برنامه‌ها اجازه می‌دهند تا تغییرات را خیلی زودتر تشخیص دهند، این کار با مقایسه مرجع‌های آبجکت انجام می‌گیرید و دیگر نیاز نیست دائماً آبجکت‌ها را بررسی کنیم تا ببینیم نیاز به نوسازی داده‌ها در صفحه نمایش هست یا خیر.
از آنجاییکه در جاوااسکریپت به طور پیش فرض، آبجکت‌ها و آرایه‌ها باثبات نیستند، کتابخانه‌ای وجود دارد که به انجام این کار کمک می‌کند. این کتابخانه Immutable.js(netm.ag/immutable-285) نام دارد و توسط یک تیم مهندسی در فیس بوک توسعه و اوپن سورس می‌شود.

سمت سرور با NODE.JS
۹- Node.js : اجتناب از تغییر بافت زبان
Node.js به جاوااسکریپت امکان می‌دهد تا در طرف سرور مورد استفاده قرار بگیرد. این کار تاثیرات جانبی جالبی دارد، مثلاً بهره‌وری توسعه دهندگان را افزایش می‌دهد، چراکه مجبور نیستند هنگام سوییچ کردن به عقب یا جلو بین کد سرور و سرویس‌گیرنده، بافت زبان را تغییر دهند.
همچنین به کتابخانه‌ها اجازه می‌دهد تا بین سرویس گیرنده و سرویس دهنده به اشتراک گذاشته شوند و این کار مقدار کد تکراری را که شخص باید بنویسد، کم می‌کند.

Immutable.js: به طور پیش فرض، آبجکت‌های جاوااسکریپت و آرایه‌ها با ثبات نیستند، اما از این کتابخانه می‌توان برای تغییر آن استفاده کرد.

۱۰- NPM : بزرگترین مدیر پکیج جهان
npm (node package manager)، با بیش از ۳۰۰هزار پکیج، بزرگترین مدیر پکیج در جهان محسوب می‌شود که شامل پکیج‌های بیشتری در مقایسه با Maven Central Repository جاوا، Packagist متعلق به PHP و حتی nugget متعلق به .NET می‌باشد. بعلاوه، سطح همکاری که در این انجمن رخ می‌دهد به معنی نوشتن اپلیکیشنی است که هرگز به این راحتی و خوبی نبوده است.

۱۱- NPM :وارد کردن وابستگی‌های فرانت اند (front-end)
با گذشت سالها، تکنیک‌های پیشنهادی زیادی در خصوص وارد کردن وابستگی‌های خارجی به codebase محلی شما وجود دارد. اما بهترین تکنیک‌ها برای استفاده از کتابخانه‌هایی همچون Bootstrap یا Zurb Foundation کدامند؟ آیا آن‌ها را از CDN مرکزی اضافه کنیم یا به طور دستی از هر جایی از وب سایت‌ آن‌ها را دانلود نماییم؟
با ظهور npm ، تعداد روز افزون توسعه‌دهندگان از راهکارهای جایگزین همچون Bower خلاص شدند و برای هرکاری به nmp متوسل می‌شوند. بله برای حتی وابستگی‌های CSS.
چارچوب‌های رابط کاربر و کتابخانه‌ها
 ۱۲- Angular: یک چارچوب برای حکومت بر همه
Angular یک چارچوب جاوااسکریپت است که توسط گوگل با کمک انجمن منبع-باز حفظ و نگهداری می‌شود. اولین نسخه این چارچوب بر مبنای الگوریتمی مثل MVC بود، پاک کردن پراکندگی‌هایی که در codebase‌های بزرگتر مبتنی بر برنامه نویسی سبک jQuery  ، شاهدشان بودیم. جدیدترین نسخه، Angular2 ، همه چیز را به مرحله بعدی برده است، تبدیل Angular به یک پلتفرم کامل که نه تنها توسعه رابط‌های کاربر وب، بلکه توسعه موبایل‌های بومی و بیشتر این را نیز فراهم می‌سازد.

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

۱۴-EMBER : چه می‌شود اگر Ruby on Rails با جاوااسکریپت سخن بگوید؟
اگر تا کنون از Ruby on Rail برای نوشتن اپ وب استفاده کرده‌اید، می‌دانید که از الگوی convention-over-configuration استفاده می‌کند. یعنی این که در مورد نحوه نوشتن اپ‌ها بسیار خود رای عمل می‌کند، دقیقاً کاری که تیم پشتیبان Ember برای توسعه دهندگان جاوااسکریپت انجام می‌دهند. Ember یک چارچوب بسیار کامل با تکنیک‌های توسعه‌ای قابل پیش بینی است. و همین کار استفاده از بهترین تکنیک‌ها را هنگام نوشتن اپلیکیشن‌ آسان می‌کند.

۱۵- Redux : مدیریت وضعیت برای همه
یکی از سختترین بخش‌های نوشتن اپ‌ها با رابط‌های کاربری بسیار پویا، همگام ماندن با وضعیت اپلیکیشن است. این مشگلی است که کتابخانه Redux آن را مخاطب قرار می‌دهد. Redux معمولاً در کنار React مورد استفاده قرار می‌گیرد و به آرامی توسط انجمن Angular مورد پذیرش واقع می‌شود. این اپ به شما کمک می‌کند اپلیکیشن‌هایی بنویسید که بدون تناقض رفتار کنند و کاری می‌کند که تجربه یک توسعه دهنده فوق‌العاده را داشته باشید. بنابراین اگر اپی می‌نویسید که ممکن است بسیار بزرگ شود، باید قبل از شروع به کار استفاده از Redux را در نظر بگیرید.

ویژگی‌های جالب دیگر
۱۶- تست رگرسیون بصری (visual regression testing) را با Phantomcss امتحان کنید
هر توسعه‌دهنده‌ای که به اندازه کافی در این کار باشد، ممکن است به طور اتفاقی باگی را وارد تولید کرده باشد. جای هیچ خجالت و شرمندگی هم ندارد. بخصوص در مورد توسعه رابط کاربری، که اجتناب از خطا در مارک‌آپ CSS وHTML  به نوعی غیرممکن است. و در نهایت پکیجی به نام PhantomCSS که در مورد تست رگرسیون بصری به شما کمک می‌کند. این پکیج با گرفتن تصاویر فوری از تغییرات قبل و بعد و محاسبه تفاوت‌های بین این دو تصویر کار می‌کند.

۱۷- فراتر از console.log
استفاده از console.log() برای نمایش داده‌ها در console، ضمن نوشتن اپ‌های جاوا اسکریپت بسیار متدوال است، اما آیا می‌دانید که می‌توانید از متدهای دیگر console مثل dir() و table() استفاده کنید تا در هنگام توسعه به شما در visualize کردن داده‌ها کمک کند؟ درست است، برای تعامل بیشتر آبجکت‌های تجسمی در console ، از console.dir(object) استفاده کنید. اگر آرایه‌ای از آبجکت‌ها دارید که می‌خواهید visualize کنید، می‌توانید از console.table(array)، برای ایجاد جدول‌هایی با فرمت زیبا، جهت نشان دادن داده‌هایتان استفاده کنید.

۱۸- استفاده از دیباگر
یکی از ویژگی‌هایی که اغلب از سوی توسعه‌دهندگان نادیده گرفته می‌شود، کلمه کلیدی دیباگر است. به جای استفاده از console.log() برای انجام برخی دیباگ کردن‌های کاذب، فقط دیباگر را اضافه کنید، و مرورگرهای مدرن همچون گوگل کروم یک نقطه وقفه(breakpoint) اضافه می‌کنند تا بتوانید نگاه عمیقتری به وضعیت اپ خود از جمله تمام متغییرهای محلی داشته باشید.

۱۹- یادتان باشد نقطه ویرگول اختیاریست
آیا می‌دانید که نقطه ویرگولها ( اکثراً) در جاوااسکریپت اختیاری هستند؟ زبان رسمی جاوا اسکریپت دارای ویژگی است به نام درج خودکار نقطه ویرگول(ASI) که موجب آشوب و اغتشاش در این انجمن شده است. واقعیت این است که تعداد زیادی از توسعه دهندگان نقطه ویرگول‌ها را در کد جاوااسکریپت خود حذف می‌کنند، آن هم به خاطر سلیقه شخصی. اگر شما هم مایل به انجام این کار هستید، از یک Code linter مثل ESLint استفاده کنید تا به شما کمک کند از باگها و دام‌ها دور بمانید.

۲۰ – Codebase نوع سخت داشته باشید
یکی از دلایلی که برخی توسعه دهندگان از یک زبان به سراغ زبان دیگری می‌روند، فقدان وجود یک سیستم از نوع سخت است. اگر این تنها دلیل آنهاست پس وقت آن رسیده که تجدید نظر کنند.
دو پروژه اصلی وجود دارند که یک سیستم نوع سخت اختیاری را به جاوا اسکریپت می‌افزایند: Flow ، که در فیس بوک ایجاد شد، و TypeScript که در مایکروسافت توسعه پیدا کرد. هنگام استفاده از استراتژی‌های مختلف، هدف از اضافه کردن این دو پروژه‌، به دام انداختن باگ‌هاست، آن هم با اضافه کردن سیستم نوع جاوااسکریپت-پسند به اپلیکیشن‌ها.

جاوااسکریپت را بروز کنید
آخرین واقعیت در مورد جاوااسکریپت آن است که یادگیری این برنامه آسان نیست و هنوز افراد زیادی از آن استفاده نمی‌کنند. اگر می‌خواهید در مورد جاوااسکریپت چیزهای بیشتری یاد بگیرید، به وبسایت تیم Code School به نام JavaScript.com بروید. این وبسایت اصول اولیه این زبان را به رایگان به توسعه دهندگان آموزش می‌دهد.

1 نظرات

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text