4 ключевых принципа написания удобочитаемого и эффективного кода JavaScript

Очистите свой код и поднимите зарплату

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

1. Напишите код в стиле строго типизированного языка.

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

Вы должны указать тип данных при определении переменной

Плохой код:

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

Хороший код ：

Не изменяйте произвольно тип переменной

Плохой код:

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

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

Хороший код:

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

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

Плохой код:

Эта функция может возвращать целое число или строку. Хотя это соответствует синтаксису JavaScript, для человека, вызывающего функцию, затрудняется выполнение арифметических операций непосредственно с результатом getPrice().

Хороший код:

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

2. Уменьшите количество ненужных поисков в области видимости.

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

Не подвергайте свой код глобальной области видимости, если в этом нет необходимости.

Плохой код:

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

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

Хороший код:

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

Конечно, если вы уверены, что будете использовать переменную element в другом месте, вам все равно следует предоставить ее в глобальной области видимости.

Не злоупотребляйте закрытием

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

Плохой код:

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

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

Лучше передать count в качестве параметра process.

Хороший код:

3. Используйте функции ES6, чтобы упростить код.

ES6 существует уже несколько лет и теперь очень совместим. Мы должны активно использовать ES6, чтобы сделать код более лаконичным и элегантным.

Используйте стрелочные функции вместо обычных функций в качестве функции обратного вызова

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

Плохой код:

Хороший код:

Использовать класс

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

Плохой код:

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

Хороший код:

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

Строки шаблона заключаются в обратную кавычку (` `) вместо двойных или одинарных кавычек.

Плохой код:

В строках шаблона мы можем использовать любые символы вместо escape-символов, таких как \n.

В то же время мы можем напрямую использовать выражение ${} для вставки переменных вместо разделения строк и использования + для конкатенации.

Хороший код:

Очевидно, это легче читать.

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

В ES5, если мы хотим присвоить аргументам функции значение по умолчанию, мы могли бы написать что-то вроде этого:

В ES6 мы можем писать более простым и читаемым способом:

Использовать переменные области действия блока

Если мы хотим, чтобы консоль выводила цифры 0, 1, 2,… 10 с интервалом в 100 миллисекунд, по очереди, некоторые люди могут написать такой код:

for(var index = 0; index <= 10; index++){
  setTimeout(() => console.log(index), 100)
}

К сожалению, приведенный выше код не соответствует требованиям. Поскольку переменные, объявленные var, находятся в глобальной области, значение index было изменено на 11 при выполнении функции обратного вызова setTimeout.

Одно из решений в ES5 - использовать замыкания:

for(var index = 0; index <= 10; index++){
  (function(archivedIndex){
    setTimeout(() => console.log(archivedIndex), 100)
  })(index)
}

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

Но приведенное выше письмо очень хлопотно и сложно для понимания. Лучше всего использовать let для объявления переменной с блочной областью видимости.

for(let index = 0; index <= 10; index++){
  setTimeout(() => console.log(index), 100)
}

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

4. Грамматический стиль

Замените простой if-else тернарным оператором

В общем, синтаксис тернарного оператора следующий:

condition ? expression_1 : expression_2;

condition - это выражение, которое принимает логическое значение, true или false. Если условие равно true, тернарный оператор возвращает expression_1, в противном случае он возвращает expression_2.

Плохой код:

Хороший код:

Избегайте ==

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

Плохой код:

Хороший код: