در این مطلب با ادامه 13 نکته با ارزش و مفید از راهنمای کدنویسی Javascript یا همون Javascript Style Guide گوگل در خدمتتون هستیم و امیدوارم که بتونه در کدنویسی بهتر بهتون کمک کنه.
همونطور که دیدید در جلسه گذشته تعدادی از نکات مربوط به Google Style Guide قرار داده شده و برای هر کدام توضیحات به همراه مثالی آورده شد. در این جلسه میخوایم نکات باقیمانده رو بهتون بگیم و این موضوع رو به پایان برسونیم.
همونطور که میدونین اکثر مواقع با مواردی روبرو میشیم که در اون باید تعدادی رشته و متغیر داینامیک رو پشت سر هم قرار بدیم و اونا رو بهم بچسبونیم. در گذشته روشهای مختلفی برای اینکار انجام میشد و هر کدام بدی هایی داشتن. با سر کار اومدن Template String شما میتونین هر متغیری رو در هر جای متن مورد نظرتون قرار بدین و همچنین میتونین متون چند خطی رو به وجود آورده و تعریف کنید. یک روش قدیمی برای اینکار رو در مثال زیر قرار میدم:
|
1 2 3 4 |
// bad function sayHi(name) { return 'How are you, ' + name + '?'; } |
همونطور که میبینید در اینجا با استفاده از عملگر + رشته ها و متغیرها رو به هم متصل کردیم که خیلی جالب نیست و خوانایی کدهامون رو پایین میاره. روش دیگه استفاده از join هست:
|
1 2 3 4 |
// bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } |
باز این مورد هم بدی های خودش رو داره. با اومدن Template String شما میتونین رشته هاتون رو درون ` یا Back Tick قرار بدین و متغیرهای مورد نظرتون رو هم درون ${} بذارید. بصورت زیر:
|
1 2 3 4 |
// good function sayHi(name) { return `How are you, ${name}?`; } |
میبینید که کدها رو راحتتر میشه فهمید و بررسی کرد.
اکثر اوقات با رشته های طولانی سر و کار داریم و بعضی افراد میان و خودشون رشته ها رو در نقاط مختلف میشکونن و اینکار رو با استفاده از Backslash انجام میدن. از انجام اینکار خوددداری کنید چون هم بعضی اوقات باعث به وجود آوردن ارور میشه و همچنین خوانایی پایینی داره. در Style guide مربوط به گوگل بیان شده که رشته ها رو میتونین بشکونین و با استفاده از + از هم جدا کنید ولی در Style Guide مربوط به Airbnb گفته شده که به رشته های طولانی دست نزنین و بزارید در یک خط بمونن. مثالی برای حالت بد این مورد:
|
1 2 3 4 5 |
// 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.'; |
حالا اگر بخواید همین کد رو با استفاده از راهنمای گوگل بنویسید بصورت زیر میشه:
|
1 2 3 4 5 |
// 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.'; |
با سر کار اومدن ES6 تعداد حلقه های For در Javascript به 3 عدد رسیده است. همه این حلقه ها کاربردهای خودشون رو دارن ولی تا جایی که میشه بهتره از حلقه های for...of استفاده کنیم. از حلقه های for...of میتونین برای همه مواردی که iterable هستند مانند آرایه ها استفاده کنید.
از استفاده از تابع eval و Function(String) استفاده نکنید چون خطرناک هستند و میتونن به سایتتون آسیب برسونن. در سایت Mozilla Developer هم بیان شده که از این تابع استفاده نکنید. حالت بد:
|
1 2 3 4 |
// bad let obj = { a: 20, b: 30 }; let propName = getPropName(); // returns "a" or "b" eval( 'var result = obj.' + propName ); |
حالت خوب و بدون eval:
|
1 2 3 4 |
// 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 اون رو تعریف کنید. بصورت زیر:
|
1 2 3 4 5 |
// bad const sample_number = 5; // good const SAMPLE_NUMBER = 5; |
شما نباید بصورت یکباره تعدادی متغیر رو با استفاده از let یا ... تعریف کنید و باید اونا رو بصورت تک تک و جدا جدا تعریف کنید. بصورت زیر:
|
1 2 3 4 5 6 |
// bad let a = 1, b = 2, c = 3; // good let a = 1; let b = 2; let c = 3; |
شما باید بجای استفاده از Double quotation از Single quotation برای تعریف متن و ... استفاده کنید. اگر یک رشته خودش شامل Single quote میشه شما میتونین با استفاده از template string اون رو مدیریت کنید. نمونه های زیر رو ببینید:
|
1 2 3 4 5 6 7 8 |
// 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`; |
همونطور که دیدید نکاتی رو بهتون گفتیم که با رعایت اونا میتونین کدنویسی استانداردتر و بهتری رو داشته باشید.
امیدوارم از این موارد استفاده کنید و بتونه بهتون در کدنویسی بهتر کمک کنه.
خیلی ممنون. مفید بود. بعضی از این موارد را رعایت نمیکردم.
خواهش میکنم موفق باشید