قراردادها و سبک کدنویسی در جاوا اسکریپت

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

قراردادهای کدنویسی در جاوا اسکریت

سوالی که در ذهن متبادر می شود این است که قراردادهای کدنویسی با قوانین کدنویسی چه تفاوتی دارند؟ قوانین کد نویسی قراردادهایی محکم و ثابت هستند که اگر آن ها را رعایت نکنید با خطا مواجه می شوید و اجرای کدهایتان متوقف می شود اما قراردادهای کدنویسی (همانطور که از نامشان مشخص است) تنها یک قرارداد هستند.

 به معنی آنکه عده ای قبول کرده اند به این شکل کد نویسی کنند و اگر آن ها را رعایت نکنید مشکلی برایتان پیش نمی آید.

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

قراردادها و قوانین برنامه نویسی معمولا سه حیطه را در بر میگیرند:

• قوانین نامگذاری و declaration برای متغیرها و توابع
• قوانین استفاده از فضای خالی (white space)، فرو رفتگی (indentation) و کامنت ها.
• قواعد برنامه نویسی و اصول آن.

از مزایای رعایت این قراردادها می توان به خواناتر شدن کدها و مدیریت ساده تر آن ها اشاره کرد.

نامگذاری متغیرها

اگر از ابتدای دوره دقت کرده باشید متوجه خواهید شد که نامگذاری متغیرها را به صورت camelCase انجام داده ایم. camelCase (به معنی «شتری») قرارداد نامگذاری است که می گوید تمام حروف اول در هر کلمه باید بزرگ باشند به جز کلمه ی اول. دلیل نامگذاری آن این است که نوشتن با این قرارداد کلمه را به کوهان یک شتر شبیه می کند.

در نامگذاری متغیرها ما به این صورت عمل کرده ایم:

• تمام متغیرها با حرف شروع می شوند نه عدد.
• از استاندارد camelCase استفاده می شود.

به مثال زیر توجه کنید:

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

اگر در مثال بالا firstName را به صورت FirstName یا FIRSTNAME یا firstname مینوشتیم دیگر پیرو قانون camelCase نبودیم.

فضای خالی پیرامون اپراتورها

همیشه اطراف اپراتورها ( = + - * / ) و بعد از ویرگول ها space قرار دهید:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

فرورفتگی (indentation)

همیشه برای فرورفتگی بلوکه های کد از 2 عدد space استفاده کنید:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

بسیاری از برنامه نویسان از Tab به جای space استفاده می کنند. شما می توانید این تصمیم را بر اساس ادیتور خود بگیرید چرا که بعضی از ادیتور ها ممکن است Tab را به شکل های مختلفی تعبیر کنند.

قوانین statement ها

قانون اول: همیشه statement های ساده را با نقطه ویرگول تمام کنید. مثال:

var values = ["Volvo", "Saab", "Fiat"];

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

برای statement های پیچیده:

• براکت باز شونده را در انتهای خط اول قرار دهید.
• قبل از براکت باز شونده از space استفاده کنید.
• براکت بسته شونده را در خطی جدید و بدون اسپیس قرار دهید.
• statement های پیچیده را با نقطه ویرگول تمام نکنید.

مثال های زیر را ببینید:

توابع

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

حلقه ها

for (i = 0; i < 5; i++) {
  x += i;
}

شرط ها

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

قوانین اشیاء

• براکت بازشونده را در همان خطی قرار دهید که نام شیء در آن قرار دارد.
• بین هر خصوصیت (property) و مقدار آن از علامت دو نقطه و یک space استفاده کنید.
• مقادیر رشته ای را بین quotation قرار دهید اما با مقادیر عددی را چنین کاری نکنید.
• بعد از آخرین property و مقدارش، دیگر ویرگول نگذارید.
• بارکت بسته شونده را در خطی جدید و بدون space قرار دهید.
• همیشه تعریف یک شیء را با نقطه ویرگول تمام کنید.

به مثال زیر توجه کنید:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

اشیاء کوچک را می توان در یک خط نیز نوشت:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

تعداد کاراکترهای هر خط

برای خواناتر شدن کدهایتان بهتر است خط هایتان بیشتر از 80 کاراکتر نداشته باشند. به طور مثال اگر دستورات جاوا اسکریپت شما در یک خط جا نمی شوند می توانید آن ها را بشکنید:

<!DOCTYPE html>
<html>
<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly.";
</script>

</body>
</html>

می بینید که کد جاوا اسکریپت از قسمت = innerHTML شکسته شده است. این شکستگی در اجرای کد مشکلی ایجاد نمی کند.

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

در جلسات قبل توضیح دادیم که در دنیای برنامه نویسی می توان یک کد را به چندین شکل مختلف نوشت (از نظر syntax) و این مسئله باعث ایجاد بی نظمی هایی شده است. محققین و شرکت های بزرگ همواره سعی کرده اند تا یک استاندارد برنامه نویسی را ارائه دهند تا تمام برنامه نویسان بر اساس آن کدنویسی کنند. خوشبختانه این تلاش ها تا حد زیادی موفق بوده و اکثر برنامه نویسان با استاندارد های یکسان یا شبیه به هم برنامه نویسی می کنند. قصد داریم در این قسمت با قراردادها و قوانین بیشتری آشنا شویم.

قراردادهای نامگذاری

سعی کنید در تمام کدهایتان از یک قرارداد کدنویسی خاص استفاده کنید و در نیمه ی راه آن را تغییر ندهید. به طور مثال:

• برای نام متغیرها و توابع از قرارداد camelCase استفاده کنید.
• برای نام متغیرهای سراسری از UPPERCASE استفاده کنید.
• برای نام ثابت ها (مانند عدد پی) از UPPERCASE استفاده کنید.

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

سوال: آیا می توان از hyphen (علامت خط فاصله -) یا Underline (علامت آندرلاین _) استفاده کرد؟

پاسخ: بستگی دارد این سوال را در چه زمینه ای بپرسید. به طور مثال در HTML خصوصیت (attribute) هایی داریم که با -data شروع می شوند و در CSS نیز خصوصیاتی مثل font-size داریم. هر دوی این موارد از خط فاصله استفاده می کنند بنابراین مشکلی در آن ها نداریم اما در جاوا اسکریپت استفاده از خط تیره در نام ها مجاز نیست چرا که ممکن است باعث عملیات تفریق شود.

در مورد آندرلاین ها نیز مشاهده شده است که در زبان SQL رایج است به جای استفاده از camelCase از آندرلاین استفاده شود. همچنین در documentation مربوط به زبان PHP از قرارداد آندلاین استفاده شده است. این مورد به نظر خودتان بستگی دارد.

قرارداد PascalCase معمولا محبوب برنامه نویسان C است و در دنیای وب استفاده ی کمی دارد. تفاوت PascalCase با camelCase در این دو مثال مشخص می شود:

بر اساس PascalCase اینطور می نویسیم: DateOfBirth

بر اساس camelCase اینطور می نویسیم: dateOfBirth (تفاوت در حرف اول)

جاوا اسکریپت و تقریبا تمام کتابخانه های آن (مانند jQuery) از استاندارد camelCase استفاده می کنند.

هشدار: هیچ گاه در زبان جاوا اسکریپت از $ برای نام متغیرها استفاده نکنید چرا که با برخی از کتابخانه های جاوا اسکریپت تضاد دارد.

جاوا اسکریپت در HTML

یکی از عوارض استفاده از نامگذاری شلخته برای عناصر HTML در حالت زیر نمودار می شود:

var obj = getElementById("Demo")

var obj = getElementById("demo")

دو دستور زیر یکی نیستند و عناصر متفاوتی را انتخاب می کنند! به همین دلیل پیشنهاد می کنیم که در HTML از قراردادهای نامگذاری استفاده کنید که در جاوا اسکریپت نیز استفاده می کنید.

وب سرورها

اکثر وب سرورها (مانند Apache و Unix) به کوچک و بزرگ بودن حروف حساس هستند. این بدان معنی است که تصویر london.jpg را نمی توانید از طریق London.jpg دریافت کنید. وب سرورهای دیگر مانند Microsoft و IIS به کوچکی و بزرگی حروف حساس نیستند بنابراین london.jpg را می توانید از طریق London.jpg یا london.jpg بگیرید. به دلیل این تفاوت ها باید چند نکته را رعایت کنید:

• اگر از حروف بزرگ و حروف کوچک به شکل ترکیبی استفاده می کنید (مانند camelCase) باید این استاندارد را در تمام فایل هایتان رعایت کنید و آن را تغییر ندهید.
• اگر سایت خود را از یک وب سرور به وب سرور دیگری منتقل کنید باید حواستان به نام فایل هایتان باشد. فرض کنید وب سرور اول به حروف بزرگ و کوچک حساس نیست اما وب سرور دوم حساس است؛ در این صورت کوچکترین خطا می تواند وب سایت شما را از کار بیندازد.

بنابراین بهترین توصیه این است که در وب سرورها همیشه از حروف کوچک استفاده کنید.

متغیرهای سراسری

تا حد امکان از متغیرهای سراسری استفاده نکنید (این قانون شامل تمام انواع داده ها، اشیاء و توابع است) چرا که ممکن است متغیرها و توابع سراسری توسط اسکریپت های دیگر overwrite شوند.

همچنین بهتر است تمام متغیرهایی که در توابع تعریف می شوند به صورت local (محلی) باشند. متغیرهای محلی تنها می توانند با کلیدواژه ی var تعریف شوند، در غیر این صورت سراسری خواهند شد.

declare کردن متغیرها

از روش های بسیار خوب کدنویسی این است که متغیرهایتان را در بالای کدها declare کنید. مزیت های این روش عبارت اند از:

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

مثال:

// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

نکته: بهتر است پس از declare کردن متغیرها، همانجا آن ها را مقدار دهی (initialize) کنید. چرا که از خطر برخورد با متغیرهای تعریف نشده دوری می کنید و کدهایتان نیز خواناتر می شوند.

به مثال زیر توجه بفرمایید:

// Declare and initiate at the beginning
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};

از جلسات قبل یادتان می آید که تفاوت declare و initialize چه بود؟

var firstName مثالی از declaration است.

"" = var firstName مثالی از initialization است.

تغییر متغیرهای عادی به صورت شیء

هیچ گاه متغیرهای عادی را به صورت شیء تعریف نکنید:

var x = "John";             
var y = new String("John");

در کد بالا، خط اول صحیح است. خط دوم با اینکه صحیح است اما مشکلاتی برایتان ایجاد می کند. به طور مثال:

var x = "John";             
var y = new String("John");
(x === y)

خروجی این مقایسه false خواهد بود چرا که یکی رشته و دیگری شیء است. حتی می توان گفت:

var x = new String("John");             
var y = new String("John");
(x == y)

خروجی این مقایسه نیز False خواهد بود چرا که در جاوا اسکریپت اجازه ی مقایسه کردن اشیاء را ندارید.

بنابراین:

• به جای ()new Object از {} استفاده کنید.
• به جای ()new String از "" استفاده کنید.
• به جای ()new Number از 0 استفاده کنید.
• به جای ()new Boolean از false استفاده کنید.
• به جای ()new Array از [] استفاده کنید.
• به جای ()new RegExp از /()/ استفاده کنید.
• به جای ()new Function از {}()function

پیش فرض ها

در switch های خود از default استفاده کنید. مثال:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

همچنین بهتر است در توابع خود به undefined مقدار دهید چرا که اگر کد تابع شما به undefined برخورد کند تمام برنامه متوقف می شود. مثال:

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

در ECMAScript 2015 می توانید مقادیر پیش فرض را در خود آرگومان ها تعریف کنید:

function (a=1, b=1) { // function code }

امیدوارم از این قسمت لذت برده باشید.