Делать и нет для новичков JavaScript

С тех пор, как Брендан Эйх создал его, у JS было добавлено много макияжа, изменений, дополнений и рамок. После всей жизни турбулентности JS был сформирован в том, как мы видим ее сейчас в 2018 году, и все же в его будущем гораздо больше роста.

Сегодня я думаю, что нынешнее состояние JavaScript лучше всего описать цитатой Этвуда: «Любое приложение, которое можно записано в JavaScript, в конечном итоге будет написано в JavaScript». Практически все, что вы себе представляете, может быть написано в JavaScript.

В этом посте мы дадим вам несколько советов о том, что делать, а что не делать, как для новичков, так и для тех, кто имел какой -то предыдущий опыт на этом языке.

Есть некоторые общие правила, когда речь заходит о написании кода JavaScript, который всегда должен быть у вас на уме. Такие правила связаны с объявлениями переменных, соглашениями об именах, комментировании кода, стремлении писать более чистый код и не отставать от мира JavaScript в целом. Давайте займем некоторые из них.

Переменные

Когда дело доходит до переменных именования, использование правила Camelcase, как правило, считается наилучшей практикой. Вот как мы в JSGURU называем их, и это помогает, когда вся команда использует это правило, поскольку оно помогает сохранить форму кода.

Также важно сохранить короткие, краткие и описательные имена переменных. Это должно соблюдаться как можно больше из -за того, что код делится большую часть времени. Читатель должен быть в состоянии выяснить, что хранится в этой переменной или что он относится, не ведя ее в консоли и не обращаясь к своему коду. Хорошее имя переменной должно рассказать читателю о контексте, который он используется в кусочке кода, и не обращаться к его значению или цели, для которой он используется с точки зрения пользователя. Например, «userAnswer» – это лучшее имя переменной, чем «пользовательский вставка», как ясно ссылается, с точки зрения кодирования до вопроса, задаваемого ранее. Вы точно знаете, на что он относится. В том же направлении избегайте использования общих имен, таких как «num» и «arr», не добавляя его с информацией, связанной с тем, к чему он относится, то есть «SelectedColors». В том же духе «хочет, чтобы подписать» или «следует запомнить» лучше, чем «TrueOrfalse». Используйте глаголы и множественное число/единственное число, чтобы помочь указать значение, а не какую -то аббревиатуру, связанную с типом значения внутри имени.

Облегчение чище кода и легче считать, что считается хорошей практикой. Вы можете сделать это, поместив объявление переменных в начале вашего сценария, добавив VAR или пусть перед первой переменной в списке, и только первую. Запятая может разделить остальное и запечатать сделку, чтобы положить полуколон в конце этой декларации. Инициализируйте переменные из первых рук, когда вы объявляете их, чтобы мы избегали неопределенных значений, а затем делаем все остальное.

Пусть или const вместо var

С момента принятия ES6 (также известного как стандарта ECMASCRIPT 2015), переменные должны быть объявлены с использованием ключевых слов LET и CONST. Причина отказа от ключевого слова VAR заключается в том, что оно должно обеспечить более четкое значение в отношении цели переменной и контекста, в котором она используется. Const, как правило, должен содержать ссылки на значения, которые не будут изменены с течением времени, хотя, в случаях объектов и массивов, им разрешено мутировать. С другой стороны, ключевое слово let указывает, что значение может быть изменено или что другое значение будет назначено конкретной переменной. Если вы попытаетесь изменить значение Const, JavaScript расскажет вам об этом и поможет вам избежать ошибок. Хорошим вариантом использования для Const является хранение ссылки на элемент DOM, который вы всегда хотите сохранить в этой переменной. Ключевое слово Let предназначено для использования с петлями или математическими алгоритмами, как правило, когда ожидается, что его значение будет различаться. Переменные, объявленные с помощью let и const, не поднимаются, как объявленные с Var.

Вы когда -нибудь оказывались в ситуации, когда смотрели на свой старый код, только чтобы увидеть, что с ним нет комментариев? Может быть, вы забыли написать их в то время, или вы случайно отложили писать их и забыли сделать это позже. Как бы то ни было, теперь вы находитесь в ситуации, когда смотрите на кучу иероглифов и начинаете чувствовать себя подавленным, потому что вы не знаете, где начать читать и понимать его. Наверняка написание чистого кода и соблюдение хороших соглашений об именах, безусловно, может помочь, но более сложная часть кода иногда просто нуждается в одном или двух комментариях, чтобы помочь читателю понять его быстрее. Я помню, как возвращался к своему коду многократно и тратил много времени, выясняя, что я написал и как именно я пошел на это. Это когда я узнал важность написания некоторой логики внутри комментариев, просто чтобы служить нотами и помочь мне быстрее понять это в будущем. Вы почти, несомненно, вы окажетесь в ситуации, когда вы пытаетесь понять код, который вы или кто -то еще написали, и желая, чтобы вокруг него были некоторые комментарии, просто чтобы ускорить процесс догоняния.

Используйте этот опыт в качестве мотивации, чтобы помочь вам понять важность написания комментариев и помнить его в следующий раз, когда вы напишете некоторую сложную логику. Просто напишите короткое предложение, захвативное суть этого куска и поверьте мне, вы будете благодарить себя в будущем. Что еще более важно, тот, кто читает ваш код, также будет благодарен. В качестве примечания, не помешает делать ваши комментарии юмористическими и позитивными, поскольку негативность и высокомерие являются контрпродуктивными.

Форматирование кода

Форматирование кода иногда может быть сложным. Чтобы помочь вам в этом, вы должны попробовать кодовые линейки, такие как Eslint или Jslint (ссылки на официальный сайт). Оба эти инструмента помогут вам иметь более чистый и лучший код в соответствии со стандартами сообщества. Наименьшее, что вы можете сделать, это использовать пробелы и новички, чтобы сгруппировать ваш код в связанные куски. Это сделает ваш код намного более читабельным, и вы сможете понять его намного быстрее!

ЭФФЕКТИВНОСТЬ

В этом разделе мы напомним вам о важности общей эффективности программирования. Это некоторые общие ловушки новичка, когда дело доходит до JavaScript.

1. Извлечение элементов DOM

Если бы я получил доллар каждый раз, когда я видел Document.getElementById, разбросанный по всему коду, я уже был миллионером. Если элементы DOM на самом деле не изменились, просто храните его в переменной, используйте его позже в будущем.

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

Это особенно распространено при jQuery, мы все видели, как это:

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

Вместо:

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

То, что вы также должны помнить, это то, что извлечение элемента DOM по идентификатору является самым быстрым методом, поэтому вы должны использовать его в других методах, таких как Document.GetElementsByClassName, Document.GetElementsBytagName 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 с каждой итерацией, так как это довольно много времени, было бы также хорошей идеей вывести Innerhtml из цикла.

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

Эти примеры помогают нам помнить две вещи, когда мы говорим об эффективности кода. Во -первых, чтобы объявить переменные вне цикла и, во -вторых, чтобы уменьшить операции DOM и убедиться, что они разумно используют их.

Кроме того, важно помнить, чтобы использовать LET больше, чем VAR, когда вы создаете новые переменные.

Тем не менее, глобальные переменные, определенные с помощью let, не будут добавлены в качестве свойств на глобальном окне объекта, как определены с VAR.

Строгий режим

Мы рекомендуем использовать «строгий режим», когда наша цель – создать более надежный код JavaScript. Строгий режим изменяется (ранее принятый) «плохой синтаксис» в реальные ошибки. Это означает, что попытка добавить значения к свойствам ошибочной переменной, которая создаст новую глобальную переменную в обычном режиме, теперь даст вам ошибку. В строгом режиме любое назначение с незаконным свойством, свойством только Getter, несуществующим свойством, не существующей переменной или несуществующим объектом, будет вынести ошибку.

Оставаться в курсе новейших стандартов JavaScript, пожалуй, самая важная вещь в этом списке.

Во -первых, ваш код будет современным и, скорее всего, написан рядом с тем, какие отраслевые стандарты в то время. Кроме того, используя новейшие функции, вы и все остальные разработчики обнадеживают и создают необходимость в браузерах для реализации этих функций и начать поддержку их из коробки. Прямо сейчас это делается с помощью инструментов транспиляции, таких как Babel. Если вы не знакомы с Babel, просто поместите, он «переводит« новейший код JavaScript в формат, который могут понять браузеры сегодняшнего дня. Babel читает ваш код JavaScript и собирает самые новые функции, которые вы использовали для ES5, которые могут понять все браузеры. Некоторые браузеры уже поддерживают функции ES6, но использование Babel и аналогичных инструментов все еще необходимы, потому что мы хотим, чтобы наш JavaScript поддерживал все браузеры и более старые версии.

Для получения дополнительной информации о Babel, я рекомендую вам посетить их веб -сайт, у них отличная документация, которая запустит вас быстро.

Более того, вы облегчите свою жизнь! Новейшие функции JavaScript потрясающие, и они становятся все лучше и лучше с каждой спецификацией. Они являются улучшением старых способов ведения дел, то есть использование обещаний или асинхронных/ожидающих, чтобы не быть в пирамиде гибели обратного вызовов.

Изучение новых вещей означает, что вы оставляете свою зону комфорта, но поверьте мне, как только вы подберите их, вы никогда не оглянетесь назад. Пара функций, которые я бы порекомендовал изучать методы массива (карта, уменьшение, фильтр), асинхронизация/ожидание, и, конечно же, мои любимые – струнные литералы.

Важно помнить, что вы всегда можете улучшить свои навыки кодирования и написать более чистый код. Это марафон, а не спринт, поэтому не чувствуйте себя подавленным, если ваш код не такой чистый, как может быть. Самое главное, что это работает! Со временем, когда вы станете более опытным и начнете соблюдать отраслевые стандарты, вы начнете писать более чистый код, и даже тогда будет множество места для улучшения, как всегда со всем! Так что не разочаровывайтесь, это просто требует времени.

Я надеюсь, что вы нашли эту статью полезным руководством. До следующего раза, Елена, подписывая …

Оригинал: “https://dev.to/jsguru_io/dos-and-donts-for-javascript-newbies–5dkl”

Переменные

Пусть или const вместо var

КОММЕНТАРИИ