سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 14) : Javascript - قسمت 4

دسته بندی: جاوا اسکریپت
زمان مطالعه: 5 دقیقه
۱۲ اسفند ۱۳۹۵

frontend

استایل مربوط به CSS

  • برای Indentation در Javascript از تب استفاده میکنید یا Space؟

در جلسات قبل که در مورد CSS صحبت کردیم، دقیقا چنین چیزی رو بیان کردیم و گفتیم که با اینکار نظم کدهای شما بیشتر میشه. دو نوع متداول که برای Javascript از اون استفاده میکنن بصورت 2 تا Space یا یک تب هست. هر کدوم از این موارد مزایا و معایبی دارن و میتونین برای مطالعه بیشتر در مورد این زمینه، این لینک رو مطالعه کنید.

  • نظرات یا Comment‌ها رو درون Javascript به چه شکلی قرار میدید؟

شما درون Javascript مانند زبانهای دیگه هم میتونین از نظرات یا Comment‌ها استفاده کنید. برای نظرات تک خطی بصورت زیر عمل میکنیم:

// This is a single line JavaScript comment

برای Comment‌ها چند خطی هم میتونین بصورت زیر عمل کنید:

// This
// is
// a
// Multiline
// JavaScript
// comment

همچنین میتونیم بصورت زیر هم عمل کنیم:

/* This
is
a
Multiline
JavaScript
comment */

بهمین راحتی. این دیگه به شما بر می‌گرده که کدوم مورد رو انتخاب کنید. چیزی که انتخاب میکنید، امکان داره اصلا جزئی از این موارد نباشه و بستگی به نظر و سلیقه خودتون داره. استفاده‌های دیگه ای هم از نظرات در Javascript و دیگر زبانهای برنامه نویسی میشه که میتونه برای شما مفید باشه و اون هم قابلیت مستندسازی یا Documentation مربوط به کدها یا API برنامه شماست. یکی از بهترین ابزارهایی که در این رابطه وجود داره، JSDoc هست که با استفاده از Comment‌ها میتونین برای کدها و API خودتون، به راحتی مستندسازی کنید. مثلا یک تابع بنام add داریم، بصورت زیر:

function add(a, b) {
	return a + b;
}

همونطور که میبینید این تابع دو ورودی رو میگیره و مجموع اونا رو برمیگردونه. با استفاده از JSDoc بصورت زیر عمل میکنیم:

/**
 * Add to number
 * @param  {[Number]} a [The first number]
 * @param  {[Number]} b [The second number]
 * @return {[Number]}   [The Addition of a and b]
 */
function add(a, b) {
	return a + b;
}

همونطور که میبینید، درون نظرات اطلاعاتی در مورد هدف تابع، ورودی‌ها و مقدار برگشتی قرار دادیم و هر شخصی با دیدن اون متوجه کاربرد این تابع میشه. همونطور که میبینید پارامترهای a و b بصورت Number یا عددی هستن و چیزی هم که return میشه، عددی هست. در نهایت این کد رو به JSDoc معرفی میکنیم و اون هم مستندات رو بصورت فایل HTML میسازه و کاربران میتونین به راحتی کدهای شما رو بفهمن. در آینده آموزشی در مورد کار با JSDoc قرار میدیم.

  • تیم شما از چه الگویی برای طراحی استفاده میکنه؟

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

برای مثال یک روش که زیاد استفاده میشه، CommonJS هست که Node.js از اون استفاده میکنه. روند کلی این الگو رو در زیر براتون توضیح میدیم. شما در این الگو، کدهاتون رو در فایلهای مختلف و بصورت Modular قرار میدین تا مدیریت بهتری بر روی اونا داشته باشید و هر کدوم از اونا مسئول انجام کار مشخصی هست. شما میتونین کدهای درون یک فایل رو با استفاده از متد exports استخراج کنید و در بیرون ازش با استفاده از require استفاده کنید. مثلا فرض کنید که یک فایل بنام add.js داریم و کدهای زیر رو درونش قرار دادیم:

function add(a, b) {
	return a + b;
}

module.exports = add;

همونطور که دیدید یک تابع رو تعریف کردیم و کارش اینه که دو ورودی رو بگیره و با هم جمع کنه و خروجی بده. ما با استفاده از متد exports، تابع add رو استخراج کردیم و در جای دیگه میتونیم اون رو وارد کنیم و ازش استفاده کنیم. مثلا یک فایل دیگه بنام index.js میسازیم و کدهای زیر رو درونش قرار میدیم:

var add = require('./add');

console.log(add(1, 5));

میبینید که با استفاده از دستور require فایل add یا همون add.js رو وارد کردیم و با استفاده از console.log خروجی مجموع 1 و 5 رو چاپ کردیم. حالا اگر فایل index.js رو با استفاده از node.js اجرا کنیم، خواهیم دید که 6 نمایش داده خواهد شد. اگر سعی کنید که index.js رو درون مرورگر استفاده کنید، با یک ارور مواجه خواهید شد و بخاطر اینه که مرورگر از کدهای Modular هنوز پشتیبانی نمیکنه و باید با استفاده از ابزارهایی که وجود داره مانند Browserify و Webpack استفاده کنید و اونا رو Bundle یا یکی کنید و ازشون درون مرورگر استفاده کنید. در آینده در مورد این ابزارها نیز براتون آموزشهایی رو قرار میدم.

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.