بایدها و نبایدها برای تازه‌کاران در JavaScript

از آن روزی که Brendan Eich جاوااسکریپت را اختراع کرد، این زبان تغیرات زیادی به خود دیده است و فریم‌وورک‌هایی به بدنه آن اضافه شده‌اند. پس از مقدار زیادی تلاتم، JavaScript به شکلی که امروزه در سال 2018 می‌بینیم در آمده است، و همچنان رشد بیشتری در آینده منتظر آن است.

امروز، بهترین توضیح برای وضعیت JavaScript، این است: «هر برنامه‌ای که بتواند در JavaScript نوشته شود، در نهایت در JavaScript نوشته خواهد شد.» عملا هر چیزی که بتوانید تصور کنید، می‌تواند با استفاده از JavaScript نوشته شود.

در این پست، نکاتی درباره کارهایی که باید و نباید در JavaScript انجام دهید، هم برای تازه‌کاران و هم کسانی که در آن تجربه دارند، خواهیم گفت.

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

متغیرها

وقتی که کار به نامگذاری متغیرها می‌رسد، استفاده از قوانین camelCase (نامگذاری با حروف بزرگ در وسط حرف، بدون استفاده از هیچ‌گونه فاصله) رایج‌ترین روش است. همچنین مهم است که نام متغیرها را کوتاه، مختصر و توصیفی نگه دارید. از آنجایی که در اکثر مواقع کدها به اشتراک گذاشته می‌شوند، بهتر است به این قضیه پایبند باشید. خواننده باید بتواند بدون لاگ‌کردن متغیر در کنسول و پیگیری آن، درک کند که در آن متغیر چه چیزی قرار داده شده است. یک نام متغیر خوب، باید درباره محتویاتی که در آن استفاده می‌شود به خواننده اطلاع دهد، و به مقدار آن و هدف آن از استفاده، از نظر کاربر اشاره‌ای نداشته باشد. برای مثال، userAnswer (پاسخ کاربر) نام بهتری نسبت به (ورودی کاربر) userInput است؛ زیرا همانطور که از نامش پیداست، نشان می‌دهد که پیش‌تر یک سوال پرسیده شده است.

مرتب‌تر و خواناتر کردن کد، یک تمرین خوب است. می‌توانید با قرار دادن تعریف متغیرهای خود در اول کد، این کار را انجام دهید. یا مثلا می‌توانید یک var یا let قبل از اولین متغیر قرار دهید، و باقی آن‌ها را با ویرگول جدا کنید.

LET یا CONST به جای VAR

پس از ورود استاندارد ES6، (که با نام ECMAScript 2015 نیز شناخته می‌شود) متغیرها باید با استفاده از کلمات کلیدی let و const تعریف شوند. علت رها کردن کلمه کلیدی var، این است که باید معنای واضح‌تری از هدف متغیر و متحویات آن نمایش داده شود. Const معمولا نمایانگر ارجاع به متغیرهایی است که در طی زمان قرار نیست تغییر کنند، گرچه در موارد آبجکت‌ها و آرایه‌ها، می‌توان آن‌ها را جهش داد. در سمت دیگر، کلمه کلیدی let نمایانگر این است که متغیر ممکن است تغییر کند یا این که مقدار دیگری به آن اختصاص داده شود. اگر تلاش کنید که مقدار یک const را تغییر دهید، JavaScript شما را مطلع می‌کند تا از باگ‌ها جلوگیری کنید. یکی از موارد خوب استفاده از const، هنگام ارجاع به یک عنصر DOM است که همیشه می‌خواهید آنچه در آن متغیر است را نگه دارید. کلمه کلیدی let برای استفاده از حلقه‌ها یا الگوریتم‌های ریاضی طراحی شده است.

کامنت‌ها

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

قالب‌بندی کد

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

بهره‌وری

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

۱. گرفتن عناصر DOM

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

    let container = document.getElementById("someElementId"); 
        container.innerHTML = "<h1>Hello World!</h1>";
        container.addEventListener('mouseover', function(e) {
            this.innerHTML = "<h1>Hello Again!</h1>";
        })

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

$('#button').addClass('actioned');
    $('#button').hover(function () { ... });
    $('#button').click(function () { ... });

که به جای این کد نوشته شده است:

let button = $('#button');
    button.addClass('actioned');
    button.hover(function () { ... });
    button.click(function () { ... });

چیزی که باید در ذهن داشته باشید، این است که گرفتن یک عنصر DOM با استفاده از Id آن، سریع‌ترین روش است؛ پس باید هر زمان که می‌توانید، آن را به جای متدهایی مانند موارد زیر استفاده کنید:

document.getElementByClassName
document.get.ElementByTagName
document.querySelector

و...

2. دستکاری DOM در حلقه

این مورد، مثالی از کارهایی که نباید انجام دهید است. در اینجا، ما یک عنصر DOM را از داخل یک حلقه می‌گیریم. این به این معنی است که ما در هر تکرار، آن را به طور ناخواسته می‌گیریم و متعاقبا HTML داخلی آن را نیز، بر روی هر تکرار قرار می‌دهیم.

function processArray(myArray) {
    for (let i = 0; i < myArray.length; i++){
      let div = document.getElementById("container");
      div.innerHTML = div.innerHTML + myArray[i];
      if (i < myArray.length - 1) {
        div.innerHTML = div.innerHTML + ", ";
      }
    }
  }

اولین کاری که برای بهینه‌سازی این کد می‌توانیم انجام دهیم، انتقال بیانیه fetch به بالای حلقه است. با انجام این کار، منطق این بلوک کد را تغییر نمی‌دهیم، اما یک افزایش سرعت قابل توجه به کد خود می‌دهیم، و همچنین مقدار استفاده از حافظه را نیز کاهش می‌دهیم. برای جلوگیری از بروزرسانی دائم DOM در هر تکرار، انتقال HTML داخلی به خارج از حلقه می‌تواند ایده خوبی باشد.

    let container = document.getElementById("someElementId"); 
        container.innerHTML = "<h1>Hello World!</h1>";
        container.addEventListener('mouseover', function(e) {
            this.innerHTML = "<h1>Hello Again!</h1>";
        })

آنچه خواندید، برخی نکات درباره JavaScript بود. امیدوارم که این مقاله برای شما کاربردی بوده باشد.

منبع