Пишем высококачественный JavaScript код. Часть 2 из 4

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

Цикл for

В цикле for вы проходите по массиву или по объекту, похожему на массив, например arguments или HTMLCollection. Обычно использование цикла for выглядит следующим образом:

// Плохой пример цикла
for (var i = 0; i < myarray.length; i++) {
   // Делаем что-нибудь с элементом myarray[i]
}

Проблема с таким использованием заключается в том, что свойство length массива запрашивается на каждом шаге цикла. Такое функционирование может привести к замедлению кода, особенно когда myarray не массив, а объект HTMLCollection.

HTMLCollections является объектом, который возвращается методами DOM:

• document.getElementsByName()
• document.getElementsByClassName()
• document.getElementsByTagName()

Существует также несколько других объектов HTMLCollections, которые были введены до стандарта DOM и все еще используются. Они включают (среди прочих):

• document.images: все элементы IMG на странице
• document.links : все элементы A
• document.forms : все формы
• document.forms[0].elements : все поля в первой форме на странице

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

Поэтому лучшим вариантом использования цикла for будет кеширование длины обрабатываемого массива (или коллекции):

for (var i = 0, max = myarray.length; i < max; i++) {
   // Делаем что-нибудь с элементом myarray[i]
}

Так вы получаете значение свойства length только один раз и используете его во всем цикле.

Кэширование свойства length для обработки объекта HTMLCollections увеличивает скорость во всех браузерах (от двух раз в Safari 3 и до 190 раз в IE7).

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

Следуя концепции одной декларации  varвы также можете вынести var из цикла и сделать код следующим образом:

function looper() {
   var i = 0,
        max,
        myarray = [];
   // ...
   for (i = 0, max = myarray.length; i < max; i++) {
      // Делаем что-нибудь с элементом myarray[i]
   }
}

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

Еще одним улучшением цикла будет замена  i++ на одно из следующих выражений:

JSLint побуждает к такому действию. Причина заключается в том, что  ++ и -- приводят к излишней запутанности. Если вы сомневаетесь, то можно установить опцию JSLint plusplus в значение false (по умолчанию она имеет значение true).

Также можно дополнительно оптимизировать шаблон цикла:

• Использовать на одну переменную меньше (без max).
• Вести счет на уменьшение до 0, что обычно выполняется быстрее из-за более эффективного сравнения с 0, чем со числовым значением длины массива.

Первая модификация шаблона будет выглядеть так:

var i, myarray = [];
for (i = myarray.length; i--;) {
   // Делаем что-нибудь с элементом myarray[i]
}

В вторая модификация будет использовать цикл  while:

var myarray = [],
    i = myarray.length;
while (i--) {
   // Делаем что-нибудь с элементом myarray[i]
}

Цикл for-in

Цикл for-in используется для  прохода по объектам, не являющимися массивом. Такой цикл еще имеет название перечисление.

Технически можно использовать цикл for-in для массивов (так как все массивы JavaScript являются объектами). Но такое применение не рекомендуется, так как может привести к логическим ошибкам, если массив расширен пользовательским функционалом. В дополнение, порядок (последовательность) списка свойств не гарантируется в цикле for-in. Поэтому предпочтительно использовать цикл for для массивов, а цикл for-in для объектов.

Важно использовать метод hasOwnProperty() во время итераций по свойствам объекта для фильтрации свойств, которые  могут попасть в объект из цепочки прототипа.

Рассмотрим следующий пример:

// Объект
var man = {
   hands: 2,
   legs: 2,
   heads: 1
};

// Где-то в коде
// метод добавляется ко всем объектам
if (typeof Object.prototype.clone === "undefined") {
   Object.prototype.clone = function () {};
}

В данном примере у нас есть простой объект man. Где-то до или после определения объекта man, прототип Object был расширен методом clone(). Цепочка прототипа действует, а значит все объекты автоматически получат доступ к новому методу. Чтобы избежать вывода метода clone() при перечислении объекта  man, нужно использовать метод hasOwnProperty() для фильтрации свойств прототипа. Отказ от фильтрации может привести к выводу функции clone(), что будет причиной странного поведения в большинстве случаев:

// 1.
// Цикл for-in
for (var i in man) {
   if (man.hasOwnProperty(i)) { // фильтр
      console.log(i, ":", man[i]);
   }
}
/* Результат в консоли
hands : 2
legs : 2
heads : 1
*/
// 2.
// Плохой пример:
// Цикл for-in без проверки свойств методом hasOwnProperty()
for (var i in man) {
   console.log(i, ":", man[i]);
}
/*
Результат в консоли
hands : 2
legs : 2
heads : 1
clone: function()
*/

Другой вариант использования метода hasOwnProperty() -  вызвать его для Object.prototype:

for (var i in man) {
   if (Object.prototype.hasOwnProperty.call(man, i)) { // фильтр
      console.log(i, ":", man[i]);
   }
}

Преимуществом такого варианта является обход коллизии имен в случае, если объект man имеет переопределенный метод hasOwnProperty. Можно обойти длительный просмотр свойств прототипа Object с помощью использования локальной переменной для его кеширования:

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
    if (hasOwn.call(man, i)) { // фильтр
        console.log(i, ":", man[i]);
    }
}

Если говорить откровенно, то пренебрежение методом hasOwnProperty() не является ошибкой. В зависимости от задач и  достоверности кода вы можете не использовать его и немного увеличить скорость выполнения цикла. Но если вы не уверены в содержании объекта (и его цепочки прототипа), то лучше добавить проверку методом hasOwnProperty().

Вариацией формата (которая не проходит JSLint) является отбрасывание фигурных скобок и размещение if на той же строке. Преимуществом такого формата является то, что цикл читается как “для каждого элемента, который имеет собственное свойство X, сделать что-то с  X”. Также будет использоваться меньше отступов для тела цикла:

// Предупреждение: не проходит JSLint
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // фильтр
    console.log(i, ":", man[i]);
}

(Не) расширяете встроенные прототипы

Расширение свойств прототипов функций конструкторов является мощным инструментом для добавления функционала. Но каждая палка имеет два конца.

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

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

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

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

Если все три условия выполняются, то вы можете расширить прототип, используя следующий шаблон:

if (typeof Object.prototype.myMethod !== "function") {
   Object.protoype.myMethod = function () {
      // реализация...
   };
}

Шаблон для switch

Вы можете улучшить читабельность и целостность выражений switch с помощью следующего шаблона:

var inspect_me = 0,
    result = '';
switch (inspect_me) {
case 0:
   result = "zero";
   break;
case 1:
   result = "one";
   break;
default:
   result = "unknown";
}

Шаблон сделан в соответствии со следующими соглашениями по стилю:

• Выравнивание каждого case по switch;
• Отступ кода в каждом case;
• Каждый case заканчивается break;.
• Избегаем перехода с одного case на другой (когда опущен break). Если такой вариант необходим, то он должен быть тщательно документирован, так как будет выглядеть ошибкой в глазах читателя вашего кода;
• Каждый switch заканчивается default: для формирования результата даже в случае несовпадения ни с одним условием case .

• Комментарии