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

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

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

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

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

Лекция имеет следующую структуру:

• Называйте вещи своими именами - легкие, короткие и удобочитаемые имена переменных и функций
• Избегайте глобальных переменных и функций
• Придерживайтесь строгого стиля кодирования
• Комментируйте насколько необходимо, но не больше
• Избегайте смешивания с другими технологиями
• Используйте сокращенную нотацию, когда это имеет смысл
• Разбивайте на модули - одна функция на задачу
• Улучшайте постепенно
• Предусматривайте конфигурацию и перевод
• Избегайте глубокой вложенности кода
• Оптимизируйте циклы
• Минимизируйте доступ к DOM
• Не используйте особенности браузеров
• Не доверяйте никаким данным
• Добавляйте с помощью JavaScript функции, не создавайте слишком много контента
• Опирайтесь на плечи предшественников
• Код разработки не является рабочим кодом

Называйте вещи своими именами - легкие, короткие и удобочитаемые имена переменных и функций

Это не требует большого ума, но ужасно, как часто можно встретить в JavaScript переменные вида x1, fe2 или xbqne - или на другом конце спектра - с именами переменных типа incrementorForMainLoopWhichSpansFromTenToTwenty или createNewMemberIfAgeOverTwentyOneAndMoonIsFull.

Ни то, ни другое не имеет большого смысла - хорошие имена переменных и функций должны легко пониматься и говорить, что происходит - ни больше и ни меньше. Одной из ловушек, которой надо избежать, будет соединение значений и функций в именах. Функция с именем isLegalDrinkingAge() [ДопустимыйВозрастПьянства()] имеет больше смысла, чем isOverEighteen() [СтаршеВосемнадцати()], так как допустимый возраст принятия алкоголя меняется в различных странах, и существуют другие вещи, кроме принятия алкоголя, которые могут быть ограничены по возрасту.

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

Например, если имеется переменная с именем familyName, и предполагается, что это будет строка, необходимо писать в венгерской нотации sFamilyName. Объект с именем member будет oMember, а булева переменная с именем isLegal будет bIsLegal. Это очень информативно для некоторых разработчиков, но для других кажется избыточным - каждый может решить самостоятельно, использовать это или нет.

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

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

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

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

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

var current = null;
function init(){...}
function change(){...}
function verify(){...}

Можно защитить это от перезаписи, используя литерал объекта:

var myNameSpace = {
  current:null,
  init:function(){...},
  change:function(){...},
  verify:function(){...}
}

Это помогает решить проблему, но имеется недостаток - чтобы вызывать функции или изменить значение переменной, всегда требуется использовать имя основного объекта: init() будет myNameSpace.init(), current будет myNameSpace.current, и т.д. Это может несколько надоедать.

Легче поместить все в анонимную функцию и защитить область действия таким образом. Это также означает, что не требуется изменять синтаксис с function name() на name:function(). Этот прием называется шаблон модуля (Module Pattern):

myNameSpace = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
}();

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

myNameSpace = function(){
  var current = null;
  function verify(){...}
  return{
    init:function(){...}
    change:function(){...}
  }
}();

Это в значительной степени возвращает нас к исходной точке в смысле ссылок от одного к другому и изменения синтаксиса. Я поэтому предпочитаю делать что-то вроде следующего (и называю "раскрытие шаблона модуля"):

myNameSpace = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  return{
    init:init,
    change:change
  }
}();

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

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

myNameSpace = function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
  return{
    init:init,
    set:change
  }
}();

Вызов myNameSpace.set() будет вызывать теперь метод change().

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

(function(){
  var current = null;
  function init(){...}
  function change(){...}
  function verify(){...}
})();

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