جاوا اسکریپت یکی از زبان‌های برنامه‌نویسی است که ریشه در دنیای وب دارد و بسیاری از وب‌سایت‌ها بر مبنای این زبان برنامه‌نویسی نوشته شده‌اند. نوشتن کد تمیز در جاوا اسکریپت از اهمیت زیادی برخوردار است و این در حالی است که بسیاری از توسعه‌دهندگان به این زبان توجه چندانی به این مسئله ندارند. زبان جاوا اسکریپت با وجود این‌که در ابتدا زبان چندان کاملی نبود ولی امروزه به یک زبان برنامه‌نویسی کامل برای وب تبدیل شده است که شما هم می‌توانید کدهای فرانت‌اند را در مرورگر اجرا کرده و هم کدهای سمت سرور را با استفاده از آن بنویسید. امروزه بسیاری از اپلیکیشن‌های تحت وب تک صفحه‌ای مبتنی بر زبان جاوا اسکریپت هستند و با وجود فریم‌ورک‌های قدرتمندی که در این زمینه وجود دارند این زبان قدرتی بسیار بیشتر از گذشته دارد. از جمله رایج‌ترین این فریم‌ورک‌ها می‌توان به مواردی مانند AngularJs، React، Vue.js و ... اشاره کرد.
اصول و تکنیک‌های کدنویسی تمیز به شما کمک می‌کند تا کدهایی را به نویسید که بسیار خوانا هستند. این عامل باعث می‌شود تا شما بتوانید در آینده به‌راحتی کدهای خود را ویرایش کنید و مشکلی در انجام این کار نداشته باشید. علاوه بر این باید دقت داشته باشید که این کار باعث می‌شود تا خواندن کدهای شما برای سایر اعضای تیم یا توسعه‌دهندگان دیگر نیز ساده‌تر باشد. ما در این مطلب قصد داریم کمی بیشتر درباره تکنیک‌های کدنویسی تمیز در JavaScript صحبت کنیم و اطلاعات جامع و کاملی را در خصوص این موضوع در اختیار شما قرار دهیم.
ایزوله‌سازی کدها
ایزوله کردن کدها از مهم‌ترین تکنیک‌های نوشتن کد تمیز در جاوا اسکریپت
اولین و مهم‌ترین تکنیک برای نوشتن کد تمیز در جاوا اسکریپت این است که سعی کنید کدهای خود را بر اساس موضوعی که دارند به بخش‌های مختلف تقسیم‌بندی کنید که معمولا برای انجام این کار از توابع استفاده می‌شود. نکته مهمی که در زمان نوشتن توابع برای انجام این کار باید به آن دقت داشته باشید این است که سعی کنید توابع خود را به شکلی ایجاد کنید که تنها یک هدف خاص را دنبال کنند. توابعی که شما در کدهای خود تعریف می‌کنید نباید چندین کار مختلف را به‌صورت هم‌زمان انجام دهند یا این‌که چندین هدف مختلف را دنبال کنند.
از دیگر نکات کلیدی که برای کدنویسی تمیز در JavaScript باید به آن توجه کنید این است که مواردی که شما نباید داده‌های موردنیاز خود را در خارج از توابع تعریف کنید. برای استفاده از داده‌ها در داخل توابع بهتر است که داده‌های موردنیاز را از طریق پارامترهای ورودی به تابع بدهید و از طریق خروجی نیز نتایج دلخواه را به خارج از توابع خود ارسال کنید. همین عامل نیز باعث می‌شود تا کدهای شما از خارج از توابع قابل‌دسترس نباشند و در نتیجه امنیت کدها نیز افزایش پیدا می‌کند.
ماژول‌بندی کدها
ماژول‌بندی کدها در زبان برنامه‌نویسی جاوا اسکریپت
در بخش قبلی توضیح دادیم که شما می‌توانید بخش‌های مختلف که دارای موضوعات متفاوت هستند را در کدهای جاوا اسکریپت خود به توابع تبدیل کنید تا هریک از این بخش‌ها عملکرد خاصی را انجام دهند. این تکنیک یکی از مهم‌ترین تکنیک‌های نوشتن کد تمیز در جاوا اسکریپت است. تکنیک دیگری که وجود دارد و ارتباط نزدیکی با تکنیک توابع دارد استفاده از ماژول‌ها برای دسته‌بندی بخش‌های مختلف کد است. در این روش شما می‌توانید چند تابع را در نظر گرفته و آنها را داخل یک ماژول قرار دهید. به‌عنوان‌مثال اگر شما عملیات‌های محاسبه مختلفی را دارید هریک از این عملیات‌ها را داخل یک تابع قرار دهید و در ادامه تمام این توابع را در یک ماژول تحت عنوان محاسبات جمع‌آوری کنید. به‌این‌ترتیب شما می‌توانید با فراخوانی ماژول به تمام این توابع دسترسی داشته باشید و از آنها در سایر بخش‌های کد خود استفاده کنید. به‌عنوان‌مثال قطعه کد زیر چنین عملیاتی را برای شما انجام می‌دهد:
function add(a, b) {
return a + b
}
function subtract(a, b) {
return a - b
}
module.exports = {
add,
subtract
}
const { add, subtract } = require('./calculations')
console.log(subtract(5, add(3, 2))
استفاده از چند پارامتر
ترجیح دادن استفاده از چند پارامتر به‌جای یک شی که شامل چندین پارامتر است
یکی دیگر از تکنیک‌ها و نکات مربوط به نوشتن کد تمیز در جاوا اسکریپت این است که سعی کنید به استفاده از یک شی شامل چندین پارامتر از چند پارامتر استفاده کنید. زمانی که شما یک تابع را تعریف می‌کنید همیشه باید سعی کنید چندین پارامتر را به‌جای یک شی به‌عنوان ورودی به آن بدهید. مثلا قطعه کد زیر را در نظر بگیرید:
function displayUser(firstName, lastName, age) {
console.log(`This is ${firstName} ${lastName}. She is ${age} years old.`)
}
// BAD
function displayUser(user) {
console.log(`This is ${user.firstName} ${user.lastName}. She is ${user.age} years old.`)
}
دلیل این موضوع این است که زمانی که شما به خط اول تعریف تابع نگاه می‌کنید دقیقا متوجه می‌شوید که چه چیزی را به‌عنوان ورودی به تابع می‌دهید. با وجود این‌که توابع در بیشتر مواقع تنها یک هدف را دنبال می‌کنند ولی بااین‌حال ممکن است اندازه برخی از توابع بسیار بزرگ باشد و بررسی بدنه آن برای پیداکردن پارامترهای استفاده شده بسیار سخت باشد. این مسئله باعث می‌شود تا زمان زیادی از شما گرفته شود. به همین علت نیز شما به‌جای تعریف یک شی از چندین پارامتر استفاده می‌کنید تا تنها با یک نگاه به خط اول برنامه خود متوجه شوید که دقیقا چه ورودی‌هایی را به تابع داده‌اید.
تکنیک Destructuring
استفاده از تکنیک Destructuring برای نوشتن کد تمیز در جاوا اسکریپت
تکنیک دیگری که برای نوشتن کد تمیز در جاوا اسکریپت وجود دارد تکنیک و ابزار فوق‌العاده کارآمد Destructuring است. Destructuring یک تکنیک فوق‌العاده قدرتمند است که در ES6 معرفی شده است و به شما اجازه می‌دهد تا فیلدهای خاصی را از یک شی بگیرید و آنها را به‌صورت مستقیم به یک متغیر اختصاص دهید. شما می‌توانید از این تکنیک برای هر نوع شی یا ماژولی استفاده کنید که این کار به شکل زیر صورت می‌گیرد:
// EXAMPLE FOR MODULES
const { add, subtract } = require('./calculations')
این کاملا منطقی است که به‌جای کل ماژول تنها توابعی که نیازی دارید از آنها در فایل خود استفاده کنید را import کرده و از طریق آن تنها به توابع خاصی دسترسی پیدا کنید. به طور مشابه زمانی که تصمیم گرفتید تنها به یک شی به‌عنوان پارامتر تابع خود نیاز دارید بازهم می‌توانید از تکنیک destructuring برای Clean Code در جاوا اسکریپت استفاده کنید که این کار نیز به شکل زیر قابل انجام خواهد بود:
function logCountry({name, code, language, currency, population, continent}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})
مقادیر پیش‌فرض
استفاده از مقادیر پیش‌فرض
مقادیر پیش‌فرض برای تکنیک destructuring یا پارامترهای پایه‌ای توابع می‌توانند بسیار مفید باشند و به همین علت نیز استفاده از آنها در لیست تکنیک‌های نوشتن کد تمیز در جاوا اسکریپت قرار گرفته است. این مقادیر در ابتدا یک مثال را به شما ارائه می‌دهند که نشان می‌دهد چه مقادیری را می‌تواند به تابع ارسال کنید. در ادامه شما می‌توانید مشخص کنید که کدام مقادیر لازم بوده و کدام‌یک ضروری نیستند. با استفاده از مثالی که در اینجا ارائه دادیم یک پیکربندی و تنظیمات کامل برای تابع می‌تواند به شکل زیر باشد:
function logCountry({
name = 'United States',
code,
language = 'English',
currency = 'USD',
population = '327 Million',
continent,
}) {
let msg = `The official language of ${name} `
if(code) msg += `(${code}) `
msg += `is ${language}. ${population} inhabitants pay in ${currency}.`
if(contintent) msg += ` The country is located in ${continent}`
}
logCountry({
name: 'Germany',
code: 'DE',
language 'german',
currency: 'Euro',
population: '82 Million',
})
logCountry({
name: 'China',
language 'mandarin',
currency: 'Renminbi',
population: '1.4 Billion',
continent: 'Asia',
})
به‌وضوح مشخص است که گاهی اوقات ممکن است علاقه‌ای نداشته باشید که از مقادیر پیش‌فرض استفاده کنید و به‌جای آن اگر مقداری به تابع ارسال نمی‌شود یک خطا را نمایش دهید. بااین‌حال نباید فراموش کنید که در اغلب مواقع این مقادیر می‌توانند تکنیک بسیار خوبی برای Clean Code در جاوا اسکریپت باشند.
Data scarcity
تکنیک Data scarcity یا کمبود داده
تکنیک‌هایی که در بخش‌های قبلی برای نوشتن کد تمیز در جاوا اسکریپت بیان کردیم ما را به یک نتیجه کلی می‌رساند و آن این است که داده‌هایی که به آنها نیاز ندارید را بیهوده به تابع ارسال نکنید. این به آن معناست که شما در زمان تنظیم کردن توابع خود کار اضافه‌ای را انجام می‌دهید که زمان زیادی را از شما می‌گیرد ولی نکته مهمی که باید بدانید این است که این کار در درازمدت می‌تواند پایگاه کد شما را خواناتر کرده و باعث بهبود عملکرد شما شود. به‌طورکلی دانستن این مسئله که دقیقا کدام مقادیر در یک نقطه خاص استفاده می‌شوند بسیار ارزشمند است و شما در زمان نوشتن کدهای تمیز در زبان برنامه‌نویسی جاوا اسکریپت باید توجه ویژه‌ای به این مسئله داشته باشید.
حدود خط و تورفتگی‌ها
حدود خط و تورفتگی‌ها در نوشتن کد تمیز در جاوا اسکریپت
احتمالا شما هم کدهایی را دیده‌اید که حجم بسیار زیادی دارند و درک‌کردن منطق آنها کار بسیار سخت و پیچیده‌ای است و نیازمند صرف زمان زیادی می‌باشد. به‌عنوان‌مثال فایل‌هایی که بیش از 3000 خط کد دارند معمولا به‌سختی قابل‌درک هستند. به همین علت است که شما باید سعی کنید تا جای ممکن اندازه فایل کدهای خود را به تعداد مشخصی از خطوط محدود کنید. به‌عنوان‌مثال برخی از افراد حجم فایل‌های کد خود را زیر 100 خط در هر فایل نگه می‌دارند و در برخی از موارد نیز آنها را به اعداد 200، 300 یا 400 خط می‌رسانند. بااین‌حال بیشتر از 400 خط کد در هر فایل می‌تواند تمیز بودن کدهای شما را به‌راحتی از بین ببرد و درک کدها را برای سایر افراد و حتی خودتان سخت‌تر کند. به همین علت است که یکی از تکنیک‌های مهم نوشتن کد تمیز در جاوا اسکریپت این است که تعداد خطوط کد خود در هر فایل را محدود نگه دارید.
زمانی که شما این اندازه استاندارد را رعایت می‌کنید اطمینان حاصل می‌کنید که به‌راحتی بتوانید ماژول‌های مختلف را ایجاد کرده و در فایل‌های مختلف از این ماژول‌ها استفاده کرده و از مزایای آنها نهایت بهره را ببرید. تکنیک بسیار مهم دیگری که در نوشتن کدهای تمیز در زبان برنامه‌نویسی جاوا اسکریپت باید به آن دقت کنید این است که سعی کنید تورفتگی‌های کد را به‌خوبی رعایت کنید. حلقه‌ها، دستورات شرطی، بدنه توابع و ... همگی دارای تورفتگی‌هایی هستند که رعایت‌کردن آنها می‌تواند خوانایی کدهای شما را به میزان زیادی افزایش داده و باعث تمیز نوشته شدن کدهای شما شود. پس به شما پیشنهاد می‌‌کنیم حتما به این نکته کلیدی و مهم نیز دقت داشته باشید و سعی کنید در زمان کدنویسی به زبان جاوا اسکریپت آن را رعایت کنید.
استفاده از زیبا کننده‌های کد
استفاده از ابزارهای زیبا کننده کد تکنیک دیگر برای نوشتن کد تمیز در جاوا اسکریپت
کارکردن در یک تیم نیازمند این است که شما کدهای خود را در قالب و سبک مشخصی بنویسید و کل تیم از یک راهنمای مشخص شده برای زیباتر کردن کدهای خود استفاده کنند. ESLint مجموعه‌ای از قوانین را به شما ارائه می‌دهد که می‌توانید آن را مطابق با نیازهای خود شخصی‌سازی و سفارشی‌سازی کرده و از آن برای زیباتر کردن کدهای خود استفاده کنید. استفاده از این ابزار یکی از مهم‌ترین تکنیک‌های نوشتن کد تمیز در جاوا اسکریپت به شمار می‌آید که امروزه بسیاری از توسعه‌دهندگان این زبان برنامه‌نویسی از آن استفاده کرده و از مزایای آن بهره‌مند می‌شوند. علاوه بر این شما می‌توانید از ابزارهایی مانند eslint –fix نیز استفاده کنید که خطاهای موجود در کدهای شما را از نظر تمیز بودن برطرف می‌کنند. البته این خطاها شامل همه خطاهای کد تمیز نیست و تنها برخی از آنها قابل برطرف‌شدن به‌صورت خودکار هستند.
به‌عنوان یک متخصص در این حوزه شما باید از ابزار Prettier نیز استفاده کنید. به‌این‌ترتیب دیگر نیازی نخواهد بود که نگران قالب و فرمت کدهای خود باشید بلکه تنها کافی است که روی کیفیت و عملکرد کدهایی که می‌نویسید تمرکز کنید. این ابزار باعث می‌شود تا توسعه‌دهندگان تمرکز بیشتری روی عملکرد کدها داشته باشند و به‌صورت خودکار فرمت و قالب کدهای شما را تنظیم می‌کند که استفاده از آن برای هر توسعه‌دهنده جاوا اسکریپت توصیه می‌شود.
