Новые технологии веб-программирования. Десять практических советов по написанию JavaScript

Об этой рассылке

В мире IT очередные крупные именения - внедряются новые концепции такие как Web2.0, компании казавшиеся несокрушимыми монстрами стремительно уступают место вчерашним стартапам, меняется лицо интернета и его ядро.

Англоязычная часть глобальной сети буквально кишит статьями о новых технологиях. Посмотрите хотя бы количество ссылок в del.icio.us на слово Ajax. В русском же интернете лишь немногие блоггеры обсуждают новые веяния, крайне нехватает статей и практических руководств по недавно возникшим технологиям. В этой рассылке предполагается освещать современные техники программирования. Будут публиковаться переводы статей и ссылки на полезные ресурсы.

Первая статья посвящена JavaScript - что нового появилось в 2005-ом? Статья общая, но содержит ряд полезных ссылок. Затем планируется публикация статей об Unobtrasive JavaSript, в последствии - о технологии Ajax. Жду и ваших пожеланий.

Десять практических советов по написанию JavaScript 2005 года.

1. Убедитесь, что ваш код сбалансирован с окружением.

Веб-стандарты - это табуретка о трёх ногах, или же без метафор, это триединство живущих в гармонии технологий . (X)HTML добавляет структуру и семантику в ваш контент, CSS отвечает за его представление, и DOM обеспечивает интерфейс для добавления логики(behavior). Вы сохраните ваши Веб страницы гибкими (другими словами лёгкими для понимания , поддержки, изменения стиля и обновления функциональности) разделяя эти три слоя: структуру и содержание от представления, структуру и содержание от логики, и представление от логики. Чтобы достигнуть этого, попробуйте избежать встроеной функциональности(inline behavior) и используйте взамен ненавязчивые техники.

Когда вы добавляете функциональность подключаемую при загрузке страницы, вам возможно предстоит обойти некоторые известные проблемы. Во-первых, вы можете столкнуться с различиями в поддержке событий между разными браузерами. Во-вторых, надо убедиться, что вы не перезаписываете существующие обработчики события onload. И что важнее, вам может встретиться задержка в подключении фунциональности. Основной проблемой является то, что событие на загрузку запускается только когда документ, со всем его содержимым, включая изображения и объекты, будет загружен. Если вашему скрипту нужно немедленно ответить после загрузки некоего элемента или если вы работаете с большим количеством контента, галереей изображений или же у вас медленный сервер, вы можете быть вынуждены искать решение. Можно либо скрыть ваш конент пока подключается функциональность либо подключить функциональность с помощью скрипта, вызываемого после загрузки вашего элемента, например в конце элемента body.

Выбирайте вашу разметку мудро, так вы сможете воспользоваться всей мощью DOM. Например, если вы используете вложенные списки для построения панели навигации, вы может использовать структуру дерева DOM вместо дублирования структуры в массивах. Избегайте программирование в тех случаях, когда вы можете использовать разметку или CSS для создания функциональности. Это может звучать противоречиво, однако встроенная функциональность включённая с помощью (X)HTML аттрибутов (например, отключение полей формы или настройка максимальной длинны поля ввода) и CSS псевдо-классов (например, при построении ролловеров и выпадающих меню) считается поддерживаемой шире и реализуемой проще, чем с помощью JavaScript. ToughQuiz на Quirksmode приводит пример обсуждения про тонкую грань между контентом сгенерированным с помощью CSS и контентом сгенерированным с помощью обычной разметки с программной логикой.

В тех случаях, когда на сегодня отсутствуют кросс-браузерная поддержка CSS или возможности добавить представление, можно дополнять CSS основанным на DOM программированием. Однако программирование представления документа будет ближайшие годы переданно обратно CSS, когда браузеры станут полнее соответствовать стандарту CSS2.1 и начнут поддерживать CSS3. Пожалуйста, используйте CSS, во-первых, для лучшего взаимоотношения различных веб-стандартов и во-вторых, потому что и веб-стандарты и веб-клиенты постоянно развиваются, и некоторые хорошие приёмы использования DOM и JavaScript будут меняться со временем.

2. Создавайте общедоступный JavaScript

JavaScript общедоступен, когда навигация по сайту, контент и основные выполняемые функции (такие как отправка формы) доступны всей вашей целевой группе, независимо от их Веб-клиентов и устройств ввода. В неё входят:

• Люди которые используют вспомогательные технологии, вроде скрин ридеров.
• Люди не использующие мышь.
• Люди не имеющие поддержки JavaScript (например, в некоторых мобильных клиентах), отключающие JavaScript или имеющие лишь частичную поддержку DOM и JavaScript
• Роботы, например, поисковые боты.

Самый общий способ создать доступный JavaScript - это использовать ненавязчивые техники, независящие от мыши и усиливающие вашу, уже доступную разметку, функциональностью. Последовательное расширение и его предшественник изящное понижение - это хорошие стратегии для создания веб-страниц в которых доступен наибольший общий знаменатель функциональности(to the most common denominator), и в то же время обеспечиваются дополнительные возможности меньшим группам людей с более совершенными устройствами или веб-клиентами. Не имеет значение, какую стратегию вы используете, убедитесь, что она запланирована для большинства сценариев.

3. Создавайте практичный JavaScript

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

4. Создавайте легко применимый JavaScript

Ненавязчивое кодирование строит мост через пропасть между "проектировщиками" и "кодерами". Проектировщики - это большая группа людей в сегодняшней промышленности, которые знают как писать (X)HTML и CSS, но чувствуют неуверенность работая с DOM и JavaScript. Ненавязчивая функциональность внедряет механизм для простого применения небольших переносимых скриптов на веб-странице: "Просто убедитесь, что ваша разметка выглядит как А, содержит скрипт В и результате у вас будет страница, которая делает С"

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

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

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

5. Создавайте JavaScript выдерживающий проверку временем

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

XHTML (если не используется режим обратной совместимости) вводит медиа тип application/xhtml+xml (в настоящее время не поддерживается Internet Explorer), который имеет большое влияние на то как мы пишем JavaScript:

• HTML DOM нечувствителен к регистру, XML DOM - чувствителен.
• На элементы нужно ссылаться указывая их в нижнем регистре: document.getElementsByTagName("p")
• конструкция document.body устарела, вместо неё ссылайтесь на элемент body по id или используйте document.getElementsByTagName("body").item(0)
• Коллекции типа document.images, document.applets, document.links, document.forms и document.anchors недоступны при использовании XHTML как XML, вместо этого исползуйте document.getElementsByTagName()
• innerHTML и document.write больше не используются, вместо этого применяйте методы DOM, такие как document.createElementNS("http://www.w3.org/1999/xhtml", "div")

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

• W3C
  • DOM 3 обеспечивающий дальнейшую интеграцию с XML и XPath
  • XHTML 2 включающий XML Events, которые внедряют описательный(declarative) способ подключения прослушки событий(0event observers) через разметку и XForms, изменяющие способ добавления функциональности формам.
  • CSS3 вводит новые псевдо-элементы.
• ECMA
  • ECMAScript for XML (E4X) предлагает набор расширений языка программирования, добавляющих встроенную поддержку XML к ECMAScript
  • ECMAScript 4 делает ECMA-базированные языки (вроде JavaScript 2 и ActionScript 2) подходящими для написания модульных и объектно ориентированных приложений.
• Поставщики браузеров
  • Стандартизируют поддержку, например, в данный момент всё ещё большой вопрос будет ли Микрософт когда либо полностью поддерживать существующие стандарты и собирается ли поддерживать будущие.
  • Добавление собственных методов и аттрибутов таких как innerHTML, Microsoft.XMLHTTP и XMLHttpRequest.
  • Совместные разработки наподобие Web Forms 2 соответствовать рекомендациям W3C, или Web Applications, которые в будущем могут стандартизировать XMLHttpRequest.

6. Знать слабые места JavaScript, его ограничения и баги.

Хотя JavaScript в основном хорошо поддерживается большинством современных Веб клиентов, его поддержка все ещё остаётся самым слабым звеном. Так как с первых дней интернета, пользователям часто надоедают разные виды раздражающей функциональности, производители браузеров решили дать возможность легко отключать JavaScript (Windows XP Service Pack 2 даже отключает некоторые JavaScript по умолчанию, потому что они расцениваются как потенциально опасный код(active scripting)). Если вы сравните JavaScript с его младшим собратомActionScript (который поддерживается, везде где установлен плагин Flash и не может быть отключён) вы найдёте - основная разница между ними в том, что при выполнении конкретной задачи на ActionScript можно положиться. Так как слишком просто выключить JavaScript, простые задачи, такие как валидация форм, всегда должны быть дублированы на стороне сервера. Это причина, по которой в будущем большинство проверок форм на стороне клиента будет перенесено в разметку и "встроенную функциональность('built-in behavior'.)".

Как упоминалось ранее, обработка события onload(загрузка страницы) недостаточно хороша, чтобы применять ненавязчивые техники. Я надеюсь что люди в W3C ответят на эту обратную связь от сообщества JavaScript и добавят новый обработчик типа onElementLoad и onDOMLoad в будущих спецификациях DOM.

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

7. Зачастую есть более чем одно хорошее решение.

JavaScript очень гибкий язык и в итоге обычно имеется множество путей выполнения задачи(doing things). Вы можете выбирать будете ли вы использовать процедурное или же объектно-ориентированное программирование. Для вашей ненавязчивой функциональности вы можете использовать в качестве триггеров либо собственные аттрибуты, либо классы атрибутов, чтобы полностью контролировать программную логику вашего сайта. Гибкость означает, что вы можете делать конкретные выборы, однако зачастую одно решение не обязательно лучше или хуже чем другое. Основывайте своё решение на контексте в котором вы используете ваши скрипты, а также на ваших философии и вкусе; попытайтесь быть последовательным в стиле программирования.

8. Пишите собственные скрипты или повторно используйте из доверяемых источников

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

Итак, как же пользователям менее опытным в DOM и JavaScript указать разницу между хорошим и плохим кодом в интернете? Существуют несколько экспертов в сети, которые являются сторонниками современных способов программирования и есть сообщества, которые обсуждают и оценивают новые скрипты и технологии. Некоторые из них:

• DHTML & CSS Blog: Stylish Scripting
• A List Apart
• QuirksMode
• Simon Willison
• Stuart Langridge
• Christian Heilmann
• Brainjar
• Gazingus

DHTML Utopia: Modern Web Design Using JavaScript & DOM заглавие новой серии книг сосредоточенных на применении современного JavaScript и ненавязчивых технологиях написания скриптов.

9. Оптимизируйте исполнение вашего JavaScript

Оптимизируйте ваш скрипт как для лучшей скорости скачивания, так и для лучшей скорости исполнения. Несколько советов:

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

10. Используйте средства разработки чтобы оптимизировать вашу работу.

Набор средств разработки, которые делают жизнь много проще:

• Mozilla или Firefox
  • По умолчанию содержат старую добрую Netscape JavaScript консоль (Tools > Web Development > JavaScript Console для Mozilla и Tools > JavaScript Console для Firefox), нужную, чтобы, например, просмотреть ошибки и предупреждения
  • Расширение Web Developer Toolbar, пригодиться чтобы быстро включать или отключать ваши скрипты
  • Расширения DOM Inspector для Mozilla и Firefox для изучения и редактирования реального DOM любого документа
  • Venkman, JavaScript дебагер (Расширение Venkman для Firefox)
• JSDoc, инструмент который разбирает встроенную в JavaScript документацию и выдает итог в формате HTML
• JSLint, JavaScript верификатор, для проверки синтаксиса и ошибок программирования.