1. Как это обычно написано
2. Исправить интервал
3. Локализуйте свою переменную
4. Не используйте оператор приращения
5. Не рассчитывайте длину на каждой итерации
6. Вместо этого уменьшите значение
7. Последние мысли

При кодировании JavaScript я часто использую цикл for. Недавно, когда я закодировал, то перекодировал эти выпадающие меню во время перекодирования я запускал свой JavaScript / jQuery через JSLint используя опцию под названием «Хорошие части».

Я не очень много знаю о JSLint, но я подумал, что это был бы довольно хороший способ убедиться, что код эффективен, относительно перспективен и прост в обслуживании (то есть использует лучшие практики).

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

Как это обычно написано

Я думаю, можно с уверенностью сказать, что большинство начинающих и промежуточных разработчиков JavaScript будут писать свои циклы for следующим образом:

var anchors = document.getElementsByTagName ("a"); for (i = 0; i <anchors.length; i ++) {// кое-что сделать здесь}

Я добавил дополнительную строку, чтобы собрать некоторые элементы DOM для итерации, но цикл - это то, на чем мы сосредоточены. Хотя этот код будет отлично работать, как его можно улучшить? Что ж, JSLint, а также лучшие практики для высокопроизводительного JavaScript помогут нам сделать небольшие, но важные улучшения.

Исправить интервал

Этот небольшой пример кода генерирует 11 сообщений об ошибках в JSLint, используя опцию «Хорошие части». Одна из вещей, на которые JSLint будет часто указывать, это отсутствие расстояния между вашими операторами. Итак, давайте исправим интервал. Вот как выглядит наш код после исправления всех пробелов:

var anchors = document.getElementsByTagName ("a"); for (i = 0; i <anchors.length; i ++) {// кое-что сделать здесь}

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

Локализуйте свою переменную

После исправления пробелов мы можем сосредоточиться на другой ошибке, представленной JSLint: глобальной переменной i. Любая переменная, не определенная с помощью оператора var в JavaScript, имеет глобальный характер. Это плохая практика, и ее можно легко пропустить внутри такого часто используемого фрагмента кода. Итак, давайте сделаем нашу переменную локальной, используя ключевое слово var. Мы могли бы сделать это несколькими способами, но для удовлетворения JSLint будет достаточно следующего метода:

var anchors = document.getElementsByTagName ("a"); for (var i = 0; i <anchors.length; i ++) {// кое-что сделать здесь}

Теперь JSlint дает нам только одну оставшуюся ошибку. (Технически этот код выдаст две другие ошибки: глобальный документ и пустой блок, но в этом иллюстративном примере это не имеет большого значения).

Не используйте оператор приращения

Это то, что я с удивлением увидел. Я еще не читал Книга Крокфорда так что я не знаю, есть ли что-то еще, кроме того, что объясняется на Страница инструкций JSLint , но вот что он говорит об операторе приращения (++):

Операторы ++ (увеличение) и - (уменьшение), как известно, вносят свой вклад в плохой код, поощряя чрезмерную хитрость. Они уступают только неисправной архитектуре в плане защиты от вирусов и других угроз безопасности.

Я предполагаю, что использование оператора приращения в безвредном цикле for не станет для вас большой проблемой. Но кто я такой, чтобы сомневаться? Так какова альтернатива? Что ж, оператор приращения - это просто способ сказать «добавь 1 к моей переменной», так что давайте сделаем JSLint счастливым, сделав так:

var anchors = document.getElementsByTagName ("a"); for (var i = 0; i <anchors.length; i + = 1) {// делать кое-что здесь}

Я действительно не знаю, является ли это лучшим и / или единственным способом сделать это, или это вообще необходимо в цикле for, но это дает нам тот же результат, и JSLint это нравится.

Теперь в этом, казалось бы, безвредном фрагменте кода нет существенных ошибок. Но есть еще два улучшения, о которых JSLint нас не предупреждает.

Не рассчитывайте длину на каждой итерации

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

var anchors = document.getElementsByTagName ("a"); for (var i = 0, j = anchors.length; i <j; i + = 1) {// делать кое-что здесь}

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

Вместо этого уменьшите значение

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

var anchors = document.getElementsByTagName ("a"); for (var i = anchors.length - 1; i> = 0; i - = 1) {// делать кое-что здесь}

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

Последние мысли

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

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

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

Похожие

Комментарии