Опубликован: 01.07.2011 | Доступ: свободный | Студентов: 6529 / 1096 | Оценка: 4.07 / 3.64 | Длительность: 10:34:00
Лекция 5:

Принципы ненавязчивого JavaScript

< Лекция 4 || Лекция 5 || Лекция 6 >
Аннотация: Идея ненавязчивого JavaScript (определение, предположения). Разделение структуры и поведения. Добавление слоя юзабилити. Принципы JavaScript. Всплывающие окна. Чистый, семантический HTML. Совместимость браузеров.

Введение

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

  • Некоторые браузеры могут полностью игнорировать сценарий, так как они не поддерживают JavaScript или их поддержка слишком устарела.
  • Даже если браузер может поддерживать JavaScript, пользователи могут выключать его по соображениям безопасности, или их корпоративный брандмауэр может блокировать его, удаляя все теги <script>.
  • Даже когда браузер поддерживает JavaScript, он может не понимать некоторые части сценария, так как использует собственную реализацию некоторых частей спецификации DOM (здесь обычно особенно виноват IE).
  • Даже когда сценарий интерпретируется правильно, он может зависеть от HTML, что очень сложно, и/или может изменяться непредсказуемым образом.
  • Даже когда контекст программирования обеспечен безупречным HTML, нельзя быть уверенным в устройстве ввода, которое будут использовать пользователи. Многие сценарии работают, только когда пользователь использует мышь, и забывают о людях, которые используют вместо этого клавиатуру (множество пользователей с ограниченными возможностями не могут использовать мышь, а некоторые люди просто предпочитают клавиатуру).
  • Даже когда сценарий благополучно избегает всех этих опасностей и работает прекрасно, другие программисты могут его не понимать.

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

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

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

  • Определение ненавязчивого JavaScript
  • Разделение структуры и поведения
  • Добавление слоя юзабилити
    • Пример - проверка формы
    • Принципы
    • Пример - всплывающие окна
    • Пример - Ajax
  • Чистый, семантический HTML
  • Совместимость браузеров
  • Заключение

Определение ненавязчивого JavaScript

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

Такую теорию предоставляет ненавязчивый JavaScript. Это не технические приемы как таковые; ненавязчивый JavaScript не является вопросом добавления в сценарии одной функции makeUnobtrusive(), чтобы войти в нирвану. Наоборот, это образ мышления. Чтобы гарантировать, что сценарии никому не причиняют неудобства, необходимо гарантировать, что сценарии не делают никаких предположений.

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

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

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

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

Разделение структуры и поведения

Также как мы должны разделять структуру и представление, помещая весь код CSS в отдельный файл и избегая использования атрибутов style или другой аналогичной разметки представления, мы должны также разделять структуру HTML и поведение JavaScript. Причины те же самые: это разделяет возможные проблемы, сохраняет код чистым, и позволяет работать с JavaScript, не прикасаясь к HTML или CSS.

Основное правило очень простое: файл HTML не должен содержать никакого кода JavaScript, также как он не должен содержать никакого кода CSS. Существуют две вещи, которые авторы JavaScript помещают в файлы HTML: встроенные сценарии и обработчики событий. Удаление их является простейшим способом добиться разделения структуры и поведения.

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

Встроенные обработчики событий, такие как <a href="somewhere.html" onmouseover="hideAll()">, исключить несколько труднее. Они определяют, какие обработчики событий (функции JavaScript) должны выполняться, когда происходит определенное событие. Чтобы сделать код ненавязчивым, необходимо перенести это задание обработчика событий в отдельный файл сценария. Это означает, что внешний сценарий сначала должен найти правильный элемент, а затем присвоить ему обработчика событий.

Чтобы больше узнать об обработчиках событий, прочитайте "Обработка событий с помощью JavaScript" , Обработка событий с помощью JavaScript.

Простейший способ, позволяющий находить элемент, состоит в задании для него ID. Например:

<!- HTML: ->
<a href="somewhere.html" id="somewhereLink">

<!- JavaScript: ->
var x = document.getElementById('somewhereLink');
if (x) {
  x.onmouseover = hideAll;
}

Функция hideAll() выполняется всякий раз, когда пользователь проводит указателем мыши над ссылкой, и этот фрагмент кода эквивалентен следующему

<a href="somewhere.html" onmouseover="hideAll()">.

Более того, эти две строки кода работают на каждой странице, которая содержит элемент с id="somewhereLink", поэтому не требуется повторяться. А если страница не содержит такой элемент, проверка if (x) гарантирует, что не будет создаваться никаких сообщений об ошибке: обработчик событий назначается только в том случае, когда элемент x фактически существует.

А что если браузер пользователя не поддерживает JavaScript? Очевидно, что mouseover не будет работать. Однако ссылка остается ссылкой, и может по-прежнему использоваться для перехода.

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

Например, часто бывает удобно соединять события mouseover и focus парами. Событие mouseover работает, только когда пользователь использует мышь. Люди, которые не используют мышь, будут перемещать фокус клавиатуры на ссылку, на которой они хотят щелкнуть, и это включает событие focus. Если зарегистрировать функцию обработки события на этом событии тоже (что означает, если мы укажем функцию, которая должна запускаться этим событием), мы заставим наше приложение работать также и с клавиатурой.

Это очень легко сделать, когда сценарий правильно отделен от HTML:

var x = document.getElementById('somewhereLink');
if (x) {
  x.onmouseover = x.onfocus = hideAll;
}

Добавляя 12 символов, мы сделали эту часть приложения дост