13 نکته باارزش از Javascript Style Guide گوگل - قسمت 1

- visibility ۰ mode_comment

در این مطلب و مطلب بعدی 13 نکته با ارزش و مفید از راهنمای کدنویسی Javascript یا همون Javascript Style Guide گوگل رو در اختیارتون قرار میدم و امیدوارم که بتونه در کدنویسی بهتر بهتون کمک کنه.13 نکته باارزش از Javascript Style Guide گوگل - قسمت 1

اول از همه برای اونایی که اولین بار هست با واژه Style guide برخورد میکنن بگم که گوگل مجموعه ای از قواعدی که فکر میکنه با رعایت کردن اونا کدهای قابل فهم تر و با خوانایی بالاتری خواهیم داشت رو در کنار هم قرار داده و شما میتونین از اونا بصورت رایگان استفاده کنید و استانداردتر کدنویسی کنید.

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

گوگل و Airbnb دو نمونه از معروفترین Style guide ها هستند. اگر بیشتر وقتتون دارید با Javascript کار میکنید، بهتون پیشنهاد میکنم که حتما یکی از این دو مورد رو انتخاب کرده و قواعد اون رو رعایت کنید.

در ادامه 13 نمونه از مهمترین موارد مربوط به راهنمای Google رو در اختیارتون قرار میدم.

بجای Tab از Space استفاده کنید

شما باید بجای استفاده از Tab که 4 فضای خالی رو به وجود میاره، از 2 Space برای Indentation استفاده کنید. مثلا کد زیر رو ببینید:

در کد بالا فضای خالی با . نمایش داده شده است. همونطور که میبینید از 4 فضای خالی استفاده شده است و این مورد از نظر راهنمای گوگل نامناسب هست. کد بعدی رو ببینید:

در اینجا از یک Space استفاده شده است و باز هم با راهنما مطابقت ندارد. شما باید از 2 فضای خالی استفاده کنید. بصورت زیر:

به همین راحتی.

استفاده از Semicolon یا ; اجباری است

در پایان هر Statement در Javascript باید یک ; یا Semicolon قرار بدین. این کار هم خوانایی کدهاتون رو بالا میبره و در بعضی مواقع هم از وقوع مشکل جلوگیری میکنه. این مشکل بیشتر زمانی پیش میاد که میخواید چند فایل رو با هم ترکیب کنید. مثلا کد زیر یک مثال بد هست که در اون از Semicolon استفاده نشده است.

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

همونطور که میبینید خوانایی کد بالاتر میره و بهتر میشه فهمید که هر دستور کجا به پایان رسیده است.

از قواعد ماژولار ES6 استفاده نکنید

چون هنوز تکلیف ES6 Modules بصورت کامل مشخص نشده است پس بهتره تا نهایی شدن اون صبر کنیم و ازش استفاده نکنیم. این مورد زمانی که ES6 Modules نهایی بشه تغییر میکنه و به شما پیشنهاد میکنه که حتما از اون استفاده کنید. مثلا از کدهایی مثل مورد زیر استفاده نکنید:

البته اینو بگم که ابزارهایی مثل Webpack این کدها رو درست میکنن ولی با قواعد Google مطابقت نداره.

از ترازبندی افقی استفاده نکنید (اختیاری)

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

همونطور که میبینید 42 رو با استفاده از Space به جلو بردیم تا به 435 برسه. بهتره که این کار رو نکنیم و کد رو بصورت زیر در بیاریم:

از Var برای تعریف متغیرها استفاده نکنید

شما باید در اکثر مواقع متغیرها رو با استفاده از const تعریف کنید مگر در مواقعی که میخواید متغیرها در ادامه برنامه بازنویسی بشن که در اون مواقع میتونین از let استفاده کنید. استفاده از var رو باید کنار بذارید و گوگل اون رو ممنوع کرده است. بصورت زیر:

استفاده از Arrow function ارجحیت دارد

همونطور که میدونین با استفاده از Arrow function کدنویسی مختصر و کوتاه تر میشه و تعدادی از مشکلات مرتبط با کلمه کلیدی this رو برطرف میکنه. تا جایی که میشه و میتونین از Arrow function ها استفاده کنید، مخصوصا برای توابع تو در تو. کد زیر رو ببینید:

بجای اینکار میتونیم بصورت زیر عمل کنیم:

در نمونه بالا میتونیم کد رو خیلی ساده و خلاصه تر کنیم. بصورت زیر:

میبینید که خیلی از پرانتز و فضاهای خالی حذف شدن و به دلیل تک دستوری بودن هم return رو حذف کردیم. دو کد بالا دقیقا یک کار رو انجام میدن.

در جلسه بعد با ادامه این نکات در خدمتتون هستم.

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

Source

comment دیدگاه کاربران

نیاز به لاگین

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