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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۱ فروردین ۱۳۹۷

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

همونطور که دیدید در جلسه گذشته تعدادی از نکات مربوط به Google Style Guide قرار داده شده و برای هر کدام توضیحات به همراه مثالی آورده شد. در این جلسه میخوایم نکات باقیمانده رو بهتون بگیم و این موضوع رو به پایان برسونیم.

برای اتصال رشته و متغیرها از Template String استفاده کنید

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

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

همونطور که میبینید در اینجا با استفاده از عملگر + رشته‌ها و متغیرها رو به هم متصل کردیم که خیلی جالب نیست و خوانایی کدهامون رو پایین میاره. روش دیگه استفاده از join هست:

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

باز این مورد هم بدی‌های خودش رو داره. با اومدن Template String شما میتونین رشته هاتون رو درون ` یا Back Tick قرار بدین و متغیرهای مورد نظرتون رو هم درون ${} بذارید. بصورت زیر:

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

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

از Backslash برای مدیریت رشته‌های طولانی استفاده نکنید

اکثر اوقات با رشته‌های طولانی سر و کار داریم و بعضی افراد میان و خودشون رشته‌ها رو در نقاط مختلف میشکونن و اینکار رو با استفاده از Backslash انجام میدن. از انجام اینکار خوددداری کنید چون هم بعضی اوقات باعث به وجود آوردن ارور میشه و همچنین خوانایی پایینی داره. در Style guide مربوط به گوگل بیان شده که رشته‌ها رو میتونین بشکونین و با استفاده از + از هم جدا کنید ولی در Style Guide مربوط به Airbnb گفته شده که به رشته‌های طولانی دست نزنین و بزارید در یک خط بمونن. مثالی برای حالت بد این مورد:

// bad (sorry, this doesn't show up well on mobile)
const longString = 'This is a very long string that \
    far exceeds the 80 column limit. It unfortunately \
    contains long stretches of spaces due to how the \
    continued lines are indented.';

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

// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +
    'strings are cleaner.';

استفاده از حلقه for...of بر for ارجحیت دارد

با سر کار اومدن ES6 تعداد حلقه‌های For در Javascript به 3 عدد رسیده است. همه این حلقه‌ها کاربردهای خودشون رو دارن ولی تا جایی که میشه بهتره از حلقه‌های for...of استفاده کنیم. از حلقه‌های for...of میتونین برای همه مواردی که iterable هستند مانند آرایه‌ها استفاده کنید.

از eval استفاده نکنید

از استفاده از تابع eval و Function(String) استفاده نکنید چون خطرناک هستند و میتونن به سایتتون آسیب برسونن. در سایت Mozilla Developer هم بیان شده که از این تابع استفاده نکنید. حالت بد:

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );

حالت خوب و بدون eval:

// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
let result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a

ثابتها باید با حروف بزرگ تعریف بشوند

ثابتهایی که تعریف میکنید رو باید بصورت حروف بزرگ قرار بدین و اونا رو با استفاده از _ یا Underscore از هم جدا کنید. اگر ثابت مورد نظر فقط در یک تابع کاربرد داشته باشد نیازی نیست که این قاعده رو رعایت کنید و میتونین بصورت camelCase اون رو تعریف کنید. بصورت زیر:

// bad
const sample_number = 5;

// good
const SAMPLE_NUMBER = 5;

در هر declaration فقط یک متغیر را تعریف کنید

شما نباید بصورت یکباره تعدادی متغیر رو با استفاده از let یا ... تعریف کنید و باید اونا رو بصورت تک تک و جدا جدا تعریف کنید. بصورت زیر:

// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;

 

از Single quote استفاده کنید

شما باید بجای استفاده از Double quotation از Single quotation برای تعریف متن و ... استفاده کنید. اگر یک رشته خودش شامل Single quote میشه شما میتونین با استفاده از template string اون رو مدیریت کنید. نمونه‌های زیر رو ببینید:

// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

همونطور که دیدید نکاتی رو بهتون گفتیم که با رعایت اونا میتونین کدنویسی استانداردتر و بهتری رو داشته باشید.

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

Source

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

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

احسان

خیلی ممنون. مفید بود. بعضی از این موارد را رعایت نمیکردم.

محمد اسفندیاری

خواهش میکنم موفق باشید

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :