Лучшие практики JavaScript для начинающих

ЛУЧШИЕ ПРАКТИКИ JAVASCRIPT

Лучшие практики JavaScript для начинающих

Лучшие практики JavaScript, которые помогут вам стать лучшим программистом

У Javascript есть свои преимущества и передовой опыт. Некоторые вещи непростые, и их лучше избегать. А некоторые практики сделают вас лучшим программистом.

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

Если вы предпочитаете видео, вы можете посмотреть его здесь, на YouTube:

На старт, внимание, марш!

1) Придерживайтесь строгого стиля кодирования

Браузеры очень снисходительны к синтаксису JavaScript. Но это не повод писать плохой код. Даже если браузеры могут это переварить.

Небрежный стиль программирования вернется к вам, когда вы перейдете в другую среду. Это если коллеги не отомстят вам за то, что вы сначала страдали.

2) Строгое "строгое"

Строгий режим вносит множество изменений в работу JavaScript, от очевидных до тонких (за которые вы будете очень благодарны).

При использовании "строгого использования" тихие ошибки теперь будут вызывать ошибки. Теперь будут устранены ошибки, которые затрудняли бы оптимизацию движка Javascript. Ваш код может даже работать быстрее.

В ES5 строгий режим не является обязательным, но в ES6 он необходим для многих функций ES6.

Вы можете прочитать Справочник Mozilla по строгому режиму для получения дополнительной информации.

3) Используйте линтинг

Инструмент линтинга для JavaScript - JSLint. Он предоставит вам подробный отчет о синтаксических предупреждениях и их значении. Вы также можете использовать JSHint, инструмент статического анализа кода.

4) Прочтите руководства по стилю кода

Наиболее часто используемым и рекомендуемым руководством по стилю кода для JavaScript является Руководство по стилю кода Google для JavaScript. Вы также можете прочитать Idiomatic.js.

5) Избегайте глобальных переменных

Сведите к минимуму использование глобальных переменных. Глобальные переменные - ужасно плохая идея.

Проблема с глобальными переменными и функциями заключается в том, что они могут быть перезаписаны другими скриптами.

Вы можете обернуть все это анонимной функцией. Или используйте литерал объекта.

6) Установите приоритет доступа к локальным переменным

JavaScript сначала ищет, существует ли переменная локально, а затем постепенно выполняет поиск на более высоких уровнях области видимости до глобальных переменных. Следовательно, локальные переменные будут найдены быстрее.

Чтобы определить текущую область видимости, перед каждой переменной ставьте let или const. Это предотвратит поиск, а также ускорит код.

7) Объявления сверху

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

8) Инициализировать переменные

Лучше всего также инициализировать переменные при их объявлении. Объявите и инициируйте с самого начала.

let what = "javascript";
let one;      // this variable is implicitly initialized with "undefined", best practice would be to set a value to it
let two = 2;  // this variable is explicitly initialized with the numeric value 2

9) Сделайте это понятным

let i1, pio, rialtv;
let  newOrderIfItemIsOnStockAndCustomerFromAustralia;

i1, pio, rialt v - неправильные имена переменных. Также newOrderIfItemIsOnStockAndCustomerFromAustralia не совсем читаемый. Представьте себе чтение кода с этими переменными. Вы хотите, чтобы ваш код был понятным, используя короткие и содержательные имена. Имя переменной должно иметь смысл.

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

10) Используйте === Сравнение

Когда вы используете==, ваши переменные будут преобразованы в типы соответствия.

0 == ""; // true
0 === ""; // false

0 == «»; Это произведет истину.

Где 0 === «»; произведет ложь.

Это потому, что === оператор вызывает сравнение значений и типов.

11) Остерегайтесь автоматического преобразования типов

Поскольку JavaScript имеет слабую типизацию, переменная может содержать разные типы данных. Кроме того, переменная может изменять свой тип данных. Мы можем просто сделать это:

var text = "Hello";
text = 5;

С помощью второго оператора текст переменной преобразуется из строки типа в число.

12) Не объявляйте ненужные переменные

Больше переменных, больше места в памяти.

Например, вместо того, чтобы писать это:

const sidebar = sidebar.querySelector('#sidebar');
const paragraph = foo.querySelector('p');
paragraph.textContent = 'foo';

Вы можете написать это:

document.querySelector('#sidebar p').textContent = 'foo';

В первом случае у нас было две переменные. После небольшой реструктуризации у нас теперь нет переменных.

13) Использовать значения параметров по умолчанию

Когда вы вызываете функцию и забываете передать ей параметр, для отсутствующего аргумента устанавливается значение undefined.

В ES5 вам нужно было сделать это:

function logNumber(num) {
    if (num === undefined) {
        num = 25;
    }
    console.log(num);
}
logNumber();

ES6 представил для функции параметры по умолчанию. Ты можешь сделать это:

function logNumber(num = 25) {
    console.log(num);
}
logNumber();

Присваивать аргументам значения по умолчанию - хорошая привычка.

14) Завершите свои переключатели настройками по умолчанию

Рекомендуется заканчивать свои switch утверждения знаком default. Даже если так не кажется.

switch(type)
{
    case 1:
        //something
    case 2:
        //something else
    default:
        // unknown type! 
        // there should probably be some error-handling
        // here, maybe an exception
}

15) eval () - не твой друг

Вот что Mozzila говорит об eval.

Предупреждение. Выполнение JavaScript из строки представляет собой огромную угрозу безопасности. Злоумышленнику слишком легко запустить произвольный код, когда вы используете eval(). См. Никогда не используйте eval ()! статья.

Никаких других комментариев не требуется.

16) Не используйте новый объект ()

• Используйте {} вместо new Object()
• Используйте "" вместо new String()
• Используйте 0 вместо new Number()
• Используйте false вместо new Boolean()
• Используйте [] вместо new Array()
• Используйте /()/ вместо new RegExp()
• Используйте function (){} вместо new Function()

Преимущества:

• код короче и читабельнее
• код безопаснее. Литералы по-прежнему будут работать, если конструкторы Object были переопределены
• это немного быстрее

17) Прокомментируйте свой код

Но ровно столько, сколько нужно, не больше.

18) Используйте сокращенные обозначения, когда это имеет смысл

Да, использование ярлыков делает ваш код очень маленьким. Нам всем это нравится. Но если вы переборщите, ваш код может стать нечитаемым.

Условия - вот где я считаю это наиболее полезным. Не нужно писать это:

let level;
if(score > 100){
  level = 2;
} else {
  level = 1;
}

Где я могу это написать:

let level = (score > 100) ? 2 : 1;

Этот небольшой пример:

if(discount){
  let price = discount;
} else {
  let price = 20;
}

Можно упростить с помощью символа двойной черты:

let price = discount || 20;

Цена будет иметь значение 20, если скидка не указана.

И более"…

19) Используйте одну функцию для каждой задачи / сделайте свой код модульным

Одна функция не должна делать все. Рано или поздно вы будете делать то же самое в нескольких функциях.

Небольшие универсальные вспомогательные функции для одной конкретной задачи - это лучший способ.

Хороший код должно быть легко строить, не переписывая ядро.

20) Узнай о том и о том

this действительно это, или это что-то совсем другое? Или это не определено?

Это реальный вопрос.

21) Узнайте об объемах

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

Вот хороший учебник, который может вам помочь.

22) Используйте самый быстрый способ перебора переменных

В JavaScript есть много способов перебрать Array.

Первый способ - это цикл afor. Другие способы включают цикл for...of, метод forEach для массивов. map и filter. Кроме того, выполняйте цикл по массиву во время выполнения операций сопоставления и фильтрации. И еще есть петля while.

Цикл for - самый быстрый способ. Кэширование length улучшает работу цикла.

let arrayLength = array.length;
for(let i = 0 ; i < arrayLength; i++) {
   let val = array[i];
}

Некоторые браузеры оптимизировали цикл for без кэширования свойства length.

Цикл while с убывающим индексом примерно в 1,5 раза медленнее, чем цикл for

Использование forEach цикла в 10 раз медленнее, чем цикл for, поэтому, вероятно, лучше его избегать, особенно для больших массивов.

23) Не делайте слишком много вложений

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

firstFunction(args, function() {
    secondFunction(args, function() {
        thirdFunction(args, function() {
            // And so on…
        });
    });
});

Вот гид, который поможет вам определить, насколько глубоко сбалансировано гнездование.

24) Остерегайтесь проблем с DOM

Доступ к DOM происходит медленно. Манипулирование, доступ и добавление должны выполняться разумно.

25) Используйте лучшие библиотеки и фреймворки

Имея так много библиотек и фреймворков JavaScript, вы можете выбрать лучший инструмент для себя. React, Angular, Vue - это то направление, куда нужно смотреть.

26) Иметь эффективную настройку и перевод

Поместите всю конфигурацию в один объект. Что-то со временем может измениться. Поэтому разрешите настройку и перевод.

27) Ограничьте доступ к переменным и свойствам

Когда вы выполняете циклы, не считывайте атрибут длины массива на каждой итерации:

let names = ['Jana','Maja','Kaja','Nika'];
for(let i=0;i<names.length;i++){
  sayHerName(names[i]);
}

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

let names = ['Jana','Maja','Kaja','Nika'];
let all = names.length;
let(var i=0;i<all;i++){
  sayHerName(names[i]);
}

28) Не доверяйте никаким данным

Вы знаете, что делают пользователи? Они все время вводят неверные данные! Это не потому, что они глупы. Или зло и хотят тебя взломать. Они могут быть заняты, отвлечены или инструкции сбивают с толку.

Вам нужно проверить данные. Он должен быть чистым и именно тем, что вам нужно.

29) Используйте мощь стрелочных функций ES6

Чтобы избежать некоторых крайних случаев и травм, связанных с this, ES6 предоставляет нам функцию стрелки. Это связывают стрелочные функции.

30) Используйте шаблонные литералы

Шаблонные литералы значительно упрощают работу со строками, чем раньше. Нет больше конкатенации длинных строк!

Чтобы создать шаблонный литерал, вместо одинарных кавычек (') или двойных кавычек (") мы используем символ обратной кавычки (`). Это создаст новую строку, и мы сможем использовать ее как захотим.

31) Пусть Spread поможет вам с массивами

Spread позволяет массиву расширяться в местах, где ожидается 0+ аргументов.

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); //6

32) Отложите загрузку скриптов

При загрузке файловый браузер должен загрузить файл, проанализировать содержимое, а затем преобразовать его в машинный код и запустить. Это дорого.

Лучше всего отложить это как можно дольше. Поэтому поместите тег script в конец файла. Также используйте атрибут defer в теге script для задержки.

33) Сохраните байты с помощью минификации

Минификация файлов Javascript уменьшит размер файла без изменения его функциональности.

34) Избегайте нежелательных петель

Не используйте вложенные циклы, если они не требуются, чтобы JavaScript оставался линейным. Кроме того, вы не хотите, чтобы ваш код проходил через тысячи объектов. Это сделает ваш код очень медленным.

35) Предпочитать карту для петли

Преимущества использования карты:

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

Вот небольшой пример возможности компоновки. Допустим, мы хотим просуммировать нечетное число в массиве. Давайте воспользуемся картой и другими операторами итерации. Нам нужно написать это:

let strings = ['1', '2', '3', '4', '5'];
strings
    .map(toNumber)
    .filter(isOdd)
    .reduce((sum, number) => sum + number);

С циклами for это будет выглядеть так:

let numbers = [];
let len = strings.length;
for (x = 0; x < len; x++)
  numbers[x] = toNumber(strings[x])evenNumbers = [];
for (y = 0; numLen=numbers.length; y < numLen; y++)
  i = 0
  if (isOdd(numbers[y]))
    evenNumbers[i] = numbers[y];
    i++sum = 0
for (z = 0; let eNum = evenNumbers.length; z < eNum; z++)
  sum = sum + evenNumbers[z];

Теперь скажи мне; Было бы глупо полагать, что кодирование - это искусство?

36) Используйте подходящие обработчики событий

Уменьшите глубину стека вызовов за счет правильного использования обработчиков событий. Кроме того, если вы не отслеживаете их, они могут выполняться неоднократно без вашего ведома.

37) Используйте RxJ для создания асинхронных и событийно-ориентированных программ

RxJS - это библиотека для создания асинхронных программ и программ, основанных на событиях, с использованием наблюдаемых последовательностей. Это называется реактивным программированием. Это программирование с асинхронными потоками данных.

Системы, построенные как реактивные системы, более гибкие, слабосвязанные и масштабируемые. Они отзывчивы, устойчивы, эластичны и ориентированы на сообщения.

Observable - это представление любого набора значений за любой промежуток времени. Как и потоки данных, события происходят с течением времени, и их полезная нагрузка содержит некоторые значения. Наблюдаемые объекты - это в основном потоки данных, которых ждет код.

Проще говоря, в реактивном программировании мы не программируем то, что должно произойти дальше, например линейное выполнение кода. Вы выполняете код реактивно.

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

В основном вы делаете следующее:

thing.map(transposeFunc).merge(otherThing).subscribe(handleFunc)

Вы будете иметь дело с Observable, сателлитными типами (Observer, Schedulers, Subjects) и операторами, такими как map, filter, reduce, every,… Вы будете обрабатывать асинхронные события как коллекции.

Основные преимущества использования RxJ и реактивного программирования:

• вы производите значения, используя чистые функции. Это означает, что ваш код менее подвержен ошибкам.
• вы изолируете государство.
• RxJS имеет целый ряд операторов, которые помогают вам контролировать, как события проходят через ваши наблюдаемые.
• Вы можете преобразовать значения, переданные через ваши наблюдаемые.

38) Кеш в браузере

Для этого есть два варианта. Первый - использовать JavaScript Cache API, который мы можем использовать, установив сервис-воркер. Отличный ресурс, который поможет вам использовать возможности кеширования и приложений PWA, - это Google Codelabs. Второй - использовать кеш протокола HTTP.

39) Удалить неиспользуемый JavaScript

Если у вас под рукой неотвечающее веб-приложение, это нужно в первую очередь проверить. В коде могут быть библиотеки, которые существуют только из-за устаревания. Удалите его как можно скорее.

Кроме того, некоторые части кода могут никогда не работать. Если вы обнаружите функциональность, которая не используется пользователями, полностью удалите ее вместе с связанным с ней кодом JavaScript.

40) Избегайте использования слишком большого объема памяти

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

41) Познакомьтесь с моделью RAIL

Модель Google RAIL - это ориентированный на пользователя подход к размышлению о целях производительности.

RAIL учитывает различные контексты взаимодействия пользователя с сайтом.

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

42) Найдите утечки памяти

Если утечка памяти продолжается, загруженная страница будет резервировать все больше и больше памяти, в конечном итоге занимая всю доступную память устройства и серьезно влияя на производительность.

Вы можете использовать Chrome Dev Tools для поиска утечек памяти. В Chrome Dev Tools утечки памяти можно проанализировать, записав временную шкалу на вкладке «Производительность».

Вы можете узнать, сколько памяти в данный момент использует ваша страница, с помощью Диспетчера задач Chrome.

С записями на временной шкале вы можете визуализировать использование памяти с течением времени.

Снимки кучи помогут вам идентифицировать отдельные деревья DOM.

С помощью записей временной шкалы распределения вы можете узнать, когда в куче JS выделяется новая память.

Во время утечки памяти загруженная страница будет постепенно занимать всю доступную память устройства и серьезно влиять на производительность.

43) Используйте веб-воркеров для интенсивных задач

Используйте веб-воркеры, когда вам нужно выполнить код, требующий много времени на выполнение.

Веб-воркеры помогают запускать скрипты в фоновых потоках. Рабочий поток может выполнять задачи, не мешая пользовательскому интерфейсу.

Веб-воркеры были представлены для решения потенциальных проблем с производительностью.

Они могут выполнять вычисления с интенсивным использованием процессора, не блокируя поток пользовательского интерфейса.

44) Используйте общие методы программирования

Остерегайтесь вычислительной сложности

Всегда используйте алгоритмы с наименьшей вычислительной сложностью для решения задачи с оптимальными структурами данных.

Упрощать

Вы можете переписать алгоритм, чтобы получить тот же результат с меньшим количеством вычислений.

Избегайте рекурсивных вызовов

Не нужно больше говорить.

45) Регулярное выражение - твой друг

Регулярные выражения очень полезны при извлечении информации из любого текста. Они ищут одно или несколько совпадений с определенным шаблоном поиска.

Несколько примеров самых полезных:

• Обрезать пробелы в тексте:

^[\s]*(.*?)[\s]*$

• Найдите любой допустимый тег HTML и соответствующий закрывающий тег:

<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)

• Найдите любой допустимый шестнадцатеричный цвет

\B#(?:[a-fA-F0–9]{6}|[a-fA-F0–9]{3})\b

• Найдите действующий адрес электронной почты (RFC5322)

\ b [\ w.! # $% & '* + \ / =? ^ `{|} ~ -] + @ [\ w -] + (?: \. [\ w -] +) * \ b

• Соответствует имени пользователя длиной от 4 до 12. Допустимы буквы, цифры и тире.

/^[a-z0–9_-]{3,16}$/

• Соответствовать паролю минимальной длины 7, хотя бы одной прописной буквой, хотя бы одной строчной буквой, хотя бы одной цифрой, хотя бы одним специальным символом

(? = ^. {7,} $) ((? =. * \ w) (? =. * [AZ]) (? =. * [az]) (? =. * [0–9 ]) (? =. * [|! ”$% & \ / \ (\) \? \ ^ \ '\\\ + \ - \ *])) ^. *

46) Используйте массивы поиска

Они используются для получения значения на основе другого вместо использования оператора switch / case.

let array = [10, 20, 30, 40, 50];

// Here find function returns the value of the first element
let found = array.find(function(element) {
    return element > 20;
});


console.log(found); // 30

47) Используйте Google LightHouse

Lighthouse - это хороший инструмент для повышения производительности веб-страниц, он помогает вам проводить аудит производительности, доступности, лучших практик и SEO.

Вы можете запустить Lighthouse в Chrome DevTools, из командной строки или как модуль узла. Вы также можете установить его как плагин в браузере Chrome.

Lighthouse - один из лучших инструментов для анализа производительности веб-страниц. Это помогает вам проводить аудит производительности, доступности, лучших практик и SEO.

48) Используйте GooglePageSpeed

Google PageSpeed разработан, чтобы помочь разработчикам понять оптимизацию производительности веб-сайта и области для потенциального улучшения. Компоненты созданы для выявления ошибок в соответствии веб-сайта рекомендациям Google по обеспечению производительности в Интернете.

49) Используйте JavaScript Navigation Timing API

Navigation Timing API предоставляет данные, которые можно использовать для измерения производительности веб-сайта.

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

А теперь последний :)

50) Проверьте свой код

Вы будете выполнять модульное тестирование тестирование интеграции и тестирование пользовательского интерфейса.

При тестировании внешнего интерфейса рекомендуется отделить пользовательский интерфейс от функциональности.

По возможности тестируйте с реалистичным и полностью визуализированным компонентом.

Посмотрите, как контент обслуживается по сети.

Вы должны запрашивать элементы HTML на основе атрибутов, которые вряд ли изменятся.

Вот несколько инструментов, которые вы будете использовать для тестирования: Jest, Cypress, Enzyme, Mocha, Chai, Jasmine, react-testing-library.

Это оно. 50 советов для начинающих JavaScript.

Если вам понравилась эта статья, поделитесь ею. Вы также можете подписаться на меня на YouTube.

И еще несколько статей, которые могут вас заинтересовать:

Хорошего дня!