Современные методы применения JavaScript

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

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

Проще всего проверить синтаксическое качество кода можно, пропуская его через JSLint (http://www.jslint.com/) - инструмент валидации JavaScript, который создает подробный отчет о синтаксических проблемах и их значении. Были также написаны расширения для редакторов (например, JS Tools для TextMate - http://andrewdupont.net/2006/10/01/javascript-tools-textmate-bundle/), которые автоматически проверяют код при его сохранении.

JSLint может быть немного придирчив в отношении возвращаемых результатов - и его разработчик Дуглас Крокфорд говорит - он может оскорбить ваши чувства. Я обнаружил, однако, что стал писать код значительно лучше, с тех пор как установил пакет TextMate JS и начал подвергать код проверке JSLint.

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

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

Комментируйте насколько необходимо, но не больше

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

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

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

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

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

module = function(){
  var current = null;
  function init(){
  };
/*
  function show(){
    current = 1;
  };
  function hide(){
    show();
  };
*/
  return{init:init,show:show,current:current}
}();

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

module = function(){
  var current = null;
  function init(){
  };
/*
  function show(){
    current = 1;
  };
  function hide(){
    show();
  };
// */
  return{init:init,show:show,current:current}
}();

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

Для более крупных приложений комментированная документация в стиле JavaDoc (http://www.oracle.com/technetwork/java/javase/documentation/index-137868.html) имеет большой смысл - общая документация продукта создается по мере написания кода. Успех библиотеки Yahoo User Interface обусловлен частично этим, и существует даже инструмент, который можно использовать для создания такой же документации для своих продуктов (http://yuiblog.com/blog/2008/12/08/yuidoc/). Не беспокойтесь особенно об этом, пока не станете более опытным разработчиком сценариев JavaScript - JavaDoc упомянут здесь скорее для полноты представления.

Избегайте смешивания с другими технологиями

Хотя и возможно создать все необходимое в документе с помощью JavaScript и DOM, это не обязательно самый эффективный способ работы. Следующий код создает красную границу вокруг каждого поля ввода, когда его класс будет "mandatory", и в этом нет ничего сложного.

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' &&
     inputs[i].value === ''){
    inputs[i].style.borderColor = '#f00';
    inputs[i].style.borderStyle = 'solid';
    inputs[i].style.borderWidth = '1px';
  }
}

Это работает, однако означает, что если в последующем потребуется изменить эти стили, придется просматривать код JavaScript и вносить в него изменения. Чем сложнее изменение, тем труднее будет выполнить редактирование. Более того, не каждый разработчик на JavaScript достаточно опытен или интересуется CSS, что означает много дополнительной работы, пока будет получен требуемый результат. Добавляя класс с именем "error" в элемент, когда имеется ошибка, можно гарантировать, что данные стиля будут храниться в CSS, что будет более подходящим:

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' &&
     inputs[i].value === ''){
    inputs[i].className += ' error';
  }
}

Это значительно более эффективно, так как CSS предназначен для каскадного (иерархического) применения в документе. Пусть, например, желательно скрыть в документе все DIV с определенным классом. Можно в цикле просмотреть все DIV, проверить их классы, и затем изменить их совокупность стилей. В новых браузерах можно использовать процессор селекторов CSS, а затем изменить совокупность стилей. Проще всего, однако, использовать JavaScript для задания класса на элементе-предке и использовать в CSS синтаксис вдоль строк element.triggerclass div.selectorclass{}. Оставьте работу реального сокрытия DIV дизайнеру CSS, так как он лучше знает, как это сделать.

Используйте сокращенную нотацию, когда это имеет смысл

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

Объекты являются, вероятно, наиболее универсальной вещью, имеющейся в JavaScript. Старая школа записывала их примерно следующим образом:

var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
  console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';

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

var cow = {
  colour:'brown',
  commonQuestion:'What now?',
  moo:function(){
    console.log('moo');
  },
  feet:4,
  accordingToLarson:'will take over the world'
};

Массивы являются в JavaScript несколько путаной темой. Можно найти множество сценариев, определяющих массив ( Array ) следующим образом:

var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';

Здесь присутствует много бесполезного повторения. Все это можно переписать значительно быстрее, используя для массива сокращение [ ]:

var aweSomeBands = [
  'Bad Religion',
  'Dropkick Murphys',
  'Flogging Molly',
  'Red Hot Chili Peppers',
  'Pornophonique'
];

В некоторых руководствах может встретиться термин "ассоциативный массив". Это неправильное название, так как массивы с именованными свойствами, а не с индексом, являются в действительности объектами, и должны так определяться.

Условия можно сократить, используя "троичную запись". Например, следующая конструкция определяет переменную как 1 или -1, в зависимости от значения другой переменной:

var direction;
if(x > 100){
  direction = 1;
} else {
  direction = -1;
}

Это можно сократить до одной строки:

var direction = (x > 100) ? 1 : -1;

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

Другая распространенная ситуация в JavaScript состоит в задании предварительно заданного значения для переменной, если оно не определено, как в следующем случае:

if(v){
  var x = v;
} else {
  var x = 10;
}

В качестве сокращенной записи для этого случая используют две вертикальные черты:

var x = v || 10;

Это выражение автоматически задает для x значение 10, если v не определено - вот и все.