معرفی 18 ابزار و توصیه زبان برنامه نویسی جاوااسکریپت در طراحی وب سایت

زبان برنامه نویسی جاوااسکریپت، یک زبان مبتنی بر مرورگر است که برای اضافه کردن پویایی در طراحی سایت استفاده می شود و در چند سال گذشته تکامل و پیشرفت چشمگیری داشته است.

نسخه تکامل یافته زبان برنامه نویسی جاوااسکریپت  ECMAScript2015 ( قبلا ES6 گفته می شد) در سال 2015 معرفی گردید و بعد از آن هر ساله ما شاهد به روزرسانی هایی در این زبان برنامه نویسی هستیم و البته هر دفعه تکنیک هایی برای تکامل آن اضافه می گردید.

جاوااسکریپت یک زبان برنامه نویسی است که در طراحی سایت استفاده می شود، برای همین ما ازاصطلاح " زبان برنامه نویسی جاوااسکریپت" استفاده می کنیم.

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

18 ابزار و توصیه زبان برنامه نویسی جاوااسکریپت برای طراحی سایت

1. کدهای آینده زبان برنامه نویسی جاوااسکریپت امروزی را با بابل بنویسید

هیچ کدام از مرورگرهای دستورات ES2015( ورژن جدید جاوااسکریپت) را نمی توانند متوجه شوند و به خوبی پشتیبانی کنند، بخاطر همین برای استفاده از آخرین خصوصیات این زبان باید از ابزاری مانند بابل( Babel) استفاده کنیم. این ابزار کدهای ES2015 را به ES5 تبدیل می کند تا مرورگرها بتوانند آن ها را به خوبی متوجه شوند. امروزه بیشتر برنامه نویسان سعی می کنند که از این ابزار برای گسترش فرآیند کاری خود استفاده کنند و دیگر نگران تطابق پذیری کدهای نوشته خود با مرورگر قدیمی نمی باشند.

2. ایجاد روش های جدید برای بیان متغیرها

در ES2015، زبان برنامه نویسی جاوااسکریپت دو راه برای بیان متغیرها بیان می کرد: let و const. Let برای تعیین دوباره متغیر، استفاده می شود درحالی که const مانع تعیین و تخصص دوباره متغیرها می گردد و آن ها را ثابت نگه می دارد. این نکته را در نظر داشته باشید که const، آرایه ها و اشیا را ثابت نگه نمی دارد و مانع تغییر خصوصیات نمی شود بلکه مانع تخصیص مجدد متغیرها می شود.

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

3. استفاده از تابع arrow برای ثابت نگه داشتن this

دیگر خصوصیاتی که به زبان برنامه نویسی جاوااسکریپت اضافه شده است، تابع arrow  است. از این طریق می توانید محتوا را ثابت( سالم) نگه دارید، مخصوصا اینکه ممکن است از مکان های دیگر مورد فراخوانی قرار بگیرند. اساسا نیاز به اضافه کردن .bind(this) در انتهای فراخوان تابع دارند.

دو راه اساسی برای نوشتن تابع arrow وجود دارد: تک- خطی و چند- خطی . تک خطی فقط یک حالت بیان دارد و مقدار اختصاصی را بدون نیازبه آکولاد برمیگردانند. اما چند خطی ها چند آکولاد دارند و کلید های اصلی را که برمیگرداند باید صریحا استفاده شوند.

4. از پرامیسس( Promises) برای بازگشت فراخوانی استفاده کنید

جاوااسکریپت بسیاری از عملیات های خود را به صورت غیرهمزمان انجام می دهد برای همین توصیه میشود در حالیکه منتظر این هستید که بقیه موارد اتفاق بیفتاد  از تابع های بازگشت فراخوان (callback) عبور کنید( استفاده کنید). این یک الگوی استاندارد است.

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

پرامیسس( Promises) این مشکل را حل کرده است. این تکنیک به شما کمک می کند که کدها را به ترتیب و در یک حالت ساده اجرا کنید در حالی که عملیات ها به طور ناهمزمان می باشند.

5. حلقه های for را با map جایگزین کنید تا باعث ساده تر شدن گردد

فرض کنیم که ما یک آرایه از اعداد مختلف داریم و می خواهیم که مقادیر در آرایه دوم، دو برابر آرایه اول باشند. یک راه ایجاد یک آرایه خالی است، یک حلقه for بنویسیم و اعداد را در آرایه دوم با استفاده از ایندکس آرایه اول تعریف کنیم.

یک راه دیگر استفاده از دستور زیر به جای for می باشد:

[3, 2, 1]

[map((num) => num * 2); // [2, 4, 6.

6. Filter  را جایگزین حلقه for  کنید

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

[3, 2, 7, 4]

[filter((num) => num % 2 === 0); // [4, 2.

7. به جای حلقه for  از reduce استفاده کنید

برای مثال شما می  خواهید جمع مقادیر یک آرایه را بدست آورید. یک راه استفاده از حلقه for   است و راه دوم استفاده از دستور reduce می باشد.

[4, 2, 7]

reduce((a, b) => a + b); // 13.

همچنین می توانید مقادیری مورد نظر خود را فیلتر کرده و جمع آن چند مقدار را بدست آورید.

[6, 1, 2, 3]

 (map(num => num * 7.

 (filter(num => num < 20.

reduce((a, b) => a + b); // 21.

8. از تغییر ناپذیری بیشترین استفاده را بکنید

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

برای همین به طور پیش فرض شی و آرایه ها در جاوااسکریپت تغییرناپذیر نیستند و کتابخانه ای برای انجام این کار وجود دارد که Immutable.js نامیده می شود و به صورت اپن سورس است.

9. Node.js: از تغییر متن زبان خودداری کنید

Node.js این امکان را به زبان برنامه نویسی جاوااسکریپت می دهد که در سمت سرور استفاده شود. این به کتابخانه ها اجازه می دهد بین کلاینت و سرور به اشتراک گذاشته شود.

10. NPM: بزرگترین مدیر بسته جهان

با بیش از 300 هزار بسته ، NPM بزرگترین مدیر بسته جهان شده است که شامل بسته های جاوا، PHP و حتی .NET می باشد.

11. Angular: یک فریم ورک برای کنترل کردن همه

Angular یک فریم ورک زبان برنامه نویسی جاوااسکریپت است که توسط گوگل و با کمک انجمن های اپن سورس نگهداری و حفظ می شود. نخستین ورژن این فریم ورک براساس الگوی MVClike بود که بی نظمی های در پایگاه داده از بین می برد و همچنین متکی به استایل جی-کوئری برنامه نویسی بود. ورژن جدید، Angular2، باعث انتقال کلی فریم ورک قبلی به یک پلتفرم کامل گردید که باعث توسعه برنامه نویسی UI و موبایل می شود.

12. React: یک کتابخانه که جهان UI را تحث تاثیر قرار می دهد

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

13. Ember: اگر رابی آن ریلز در جاوااسکریپت صحبت کند؟

اگر تا به حال از رابی آن ریلز(Ruby on Rails) برای نوشتن اپلیکیشن وب استفاده کرده باشید، حتما می دانید که از الگوی قرارداد بر پیکربندی استفاده می کند این یعنی اینکه در خصوص نوشتن نوع اپلیکیشن ها خیلی حساس است و همان چیزی بود که تیم Ember برای برنامه نویسان جاوا اسکریپت ارائه دادند. Ember یک فریم ورک کامل با فعالیت های توسعه قابل پیش بینی است. که این استفاده از بهترین فعالیت و تمرین ها را درحالی که کدهای اپلیکیشن را می نویسید، آسان می کند.

14. Redux: حالت مدیریت برای همه

یکی از سخت ترین بخش های اپلیکیشن با رابط کاربری بالا، نگه داشتن حالت اپلیکیشن است. این مشکل توسط کتابخانه Redux  حل گردید. Redux  به موازات React استفاده می شود و خیلی کم با انجمن Angular تطابق یافته است. این به شما امکان نوشتن اپلیکیشن را می دهد که رفتار ثابتی داشته باشد و تجربیات افرادی بزرگ در زبان برنامه نویسی را به شما نشان می دهد. برای همین اگر اپلیکیشنی استفاده می کنید که خیلی بزرگ است، توصیه ما استفاده از این کتابخانه می باشد.

15. آزمون مجازی رگرسیون با PhantomCSS

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

16. فراتراز console.org

استفاده از()console.org برای نشان دادن داده در کنسول استفاده می شود اما متدهای کنسول دیگری هم برای نوشتن وجود دارد مانند ()dir و ()table که به شما کمک می کند که داده را در حالی که برنامه نویسی میکنید، تجسم کنید. برای تعامل بیشتر تجسم سازی اشیا در کنسول از (console.dir(object استفاده کنید.

اگر آرایه ای اشیا دارید که قصد دارید آن ها را تجسم کنید از (console.table(array استفاده کنید تا بتوانید یک فرمت جدولی زیبا برای نشان دادن داده ها استفاده کنید.

17. از برنامه عیب زدایی استفاده کنید

یکی از خصوصیاتی که توسط برنامه نویسان بیشتر از همه مورد توجه قرار میگیرند، برنامه عیب زدایی است. به جای استفاده از ()console.org، می توانید ازعیب زدا و یا مرورگرهای پیشرفته مانند گوگل کروم استفاده کنید.

18. به یاد داشته باشید سمی کالن اختیاری است

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