JavaScript является одним из наиболее широко используемых языков в веб-разработке. Это просто, но очень мощно, и количество способов его использования практически безгранично. Вот почему так важно собирать советы от тех, кто был до вас. Вот 10 советов от уважаемых веб-разработчиков в сообществе JavaScript.
1. Не забывайте о связывании — Кристоф Портенев
У Кристофа Портенева есть несколько серьезных дизайнерских решений. Он занимается разработкой веб-сайтов с 1995 года, руководит отделом разработки программного обеспечения крупного ИТ-колледжа и в настоящее время является техническим директором Ciblio.net . Он настолько хорош в том, что делает, что команда A List Apart предоставила ему немного экранной недвижимости, чтобы поделиться некоторыми своими взглядами.
Кристоф сталкивается с очень важным аспектом JavaScript: привязки .
Практически ни один из основных языков объектно-ориентированного программирования (ООП) не заставляет вас задумываться о связывании. То есть они не требуют, чтобы вы явно определяли доступ к элементам (методам и свойствам) текущего объекта с помощью ссылки, такой как this или self. Если вы вызываете метод ни для какого конкретного объекта, вы обычно вызываете его для текущего объекта. То же самое происходит, когда вы передаете метод для последующего вызова: он сохранит свой текущий объект. Короче говоря, для большинства языков ООП привязка неявна.
Далее Кристоф приводит примеры правильного связывания и того, как распознать чувствительные шаблоны. Вот четыре основных момента в статье Кристофа :
- Любой членский доступ должен быть квалифицирован с объектом, к которому он относится, даже когда это
this. - Любая ссылка на функцию (присваивание в качестве значения, передача в качестве аргумента) теряет первоначальную привязку функции.
- JavaScript предоставляет два эквивалентных способа явного указания привязки функции при ее вызове:
applyиcall. - Создание «ссылки на связанный метод» требует анонимной функции-оболочки и стоимости вызова. В определенных ситуациях использование закрытий может быть лучшей альтернативой.
2. Используйте библиотеки JavaScript вместо Flash или другой анимации — Дейв Ши
Дейв Ши — уважаемый веб-разработчик и дизайнер, вероятно, наиболее известный за его отличную работу над CSS Zen . Дейв продемонстрировал невероятную способность разрабатывать исключительные пользовательские интерфейсы и является еще одним автором превосходного A List Apart .
Библиотеки JavaScript похожи на швейцарский армейский нож для веб-разработчика. Существует множество разновидностей библиотек JavaScript на выбор, и число разработчиков, разрабатывающих плагины для этих библиотек, растет с каждым днем. Вы можете использовать библиотеки JavaScript практически для любой функциональности.
Взять, к примеру, спрайты CSS . Дейв Ши (Dave Shea) полагает, что вместо использования мощных макетов Flash для достижения эффекта ролловера вам следует использовать крошечные библиотеки JavaScript, такие как jQuery, для реализации той же функциональности. Дэйв перечисляет некоторые преимущества использования библиотек JavaScript, особенно тех, которые размещаются в Google .
Поскольку многие другие веб-разработчики будут ссылаться на код Google, существует вероятность того, что JavaScript уже находится в кэше браузера. Использование библиотек JavaScript позволит вам уделять больше времени разработке, затрачивая меньше времени на написание кода JavaScript.
3. Напишите JavaScript с помощью микро-шаблонов — Джон Резиг
Джон Резиг — один из самых популярных разработчиков JavaScript на планете. Он создал невероятно популярную библиотеку JavaScript jQuery . Он написал книгу о технологиях Pro JavaScript и даже поделился своими знаниями в своем личном блоге .
Джон предлагает довольно уникальный метод для ускорения разработки JavaScript с использованием микро-шаблонов.
У меня была небольшая утилита, которую я порвал в течение некоторого времени, и которая оказалась весьма полезной в моих усилиях по созданию приложений JavaScript. Это супер простая шаблонная функция, которая быстро работает, быстро кэшируется и проста в использовании. У меня есть пара трюков, которые я использую, чтобы сделать это действительно забавным.
Хотя использование микро-шаблонов не является критически важным, оно действительно может ускорить процесс разработки. Ознакомьтесь с некоторыми примерами микро-шаблонирования Джона, чтобы лучше понять преимущества функции шаблонов.
4. Привязать методы к объектам — Айман Хуриех
Айман Хуриех — выпускник факультета компьютерных наук, сотрудник Google и автор веб-разработки Django . Айман знает свое дело с элегантным программированием.
В своей статье, в которой изложены девять советов по JavaScript , Айман затрагивает несколько более сложный аспект привязки методов к объектам.
Любой, кто работает с событиями JavaScript, может столкнуться с ситуацией, в которой ему нужно назначить метод объекта обработчику событий. Проблема в том, что обработчики событий вызываются в контексте их HTML-элемента, даже если они изначально были связаны с другим объектом. Чтобы преодолеть это, я использую функцию, которая привязывает метод к объекту; он принимает объект и метод и возвращает функцию, которая всегда вызывает метод в контексте этого объекта.
Используя Prototype и небольшой пользовательский код, Ayman предоставляет отличный совет для привязки методов к объектам. Маленький, простой и эффективный трюк.
5. Положитесь на делегацию мероприятия — Эндрю Тетлав
Эндрю Тетлоу занимается разработкой веб-сайтов с 1997 года и является техническим редактором SitePoint . SitePoint не стал бы нанимать ни одного дерьма, чтобы стать их техническим редактором. Письмо Эндрю в SitePoint — доказательство этого.
Использование интерактивности JavaScript в ваших макетах может быть сложной задачей. Но Эндрю показал, что использование делегирования событий не только проще, чем вы думаете, но и обеспечивает множество преимуществ, таких как устранение утечек памяти.
События JavaScript — это основа всей интерактивности на веб-страницах (я имею в виду серьезную интерактивность, а не те изящные выпадающие меню CSS). В традиционной обработке событий вы добавляете или удаляете обработчики событий из каждого элемента по мере необходимости. Однако обработчики событий могут потенциально привести к утечкам памяти и снижению производительности — чем больше у вас есть, тем больше риск. Делегирование событий JavaScript — это простая техника, с помощью которой вы добавляете один обработчик событий в родительский элемент, чтобы избежать необходимости добавлять обработчики событий для нескольких дочерних элементов.
Многие из основных библиотек JavaScript имеют примеры делегирования событий, поэтому вам не придется писать свой собственный скрипт.
6. Знайте, когда использовать делегирование событий — Крис Хейлманн
Крис Хейлманн (Chris Heilmann) — международный евангелист, работающий в Yahoo Developer Network . У Криса есть несколько основных вариантов JavaScript, и вы можете увидеть много живых презентаций с его личного сайта .
Крис разработал отличный учебник, который показывает различия между делегированием событий и обработкой событий .
Разница между ними состоит в том, что пример «Обработчики» довольно медленный, когда список очень большой, а пример «Делегирование» может быть расширен настолько, насколько вы хотите, без дополнительных накладных расходов. Последний пример также намного легче изменить.
Делегирование событий лучше подходит для больших приложений, а обработка событий — для небольших проектов.
Для действительно небольших усилий по обработке событий классическое решение дает вам больше контроля, и его довольно легко передать другим разработчикам без особых объяснений. Однако делегирование событий, вероятно, является единственным способом сохранить большое приложение с большим количеством элементов для проверки обработки (или динамически загружаемых элементов).
7. Сделайте AJAX-ответы кэшируемыми — команда YUI
Если когда-либо была команда «мастеров JavaScript», то Yahoo! Сеть Разработчика может быть этим. Yahoo! Команда разработчиков предоставила невероятные активы сообществу разработчиков. Они содержат обширные статьи и советы от своих собственных разработчиков, поэтому мы можем быть уверены, что каждая часть знаний, которыми они делятся, соответствует очень высоким стандартам.
Ajax может быть прекрасным инструментом для обеспечения более богатого пользовательского опыта на веб-сайте. Однако компромисс с использованием Ajax заключается в том, что иногда он загружается медленнее, чем традиционный веб-сайт. Команда разработчиков Yahoo разработала несколько советов по работе с JavaScript и Ajax, в частности, с кэшированием Ajax, поэтому время отклика намного быстрее.
Во многих приложениях время ожидания пользователя зависит от того, как используется Ajax. Например, в веб-клиенте электронной почты пользователь будет ждать результатов запроса Ajax, чтобы найти все сообщения электронной почты, которые соответствуют его критериям поиска. Важно помнить, что «асинхронный» не означает «мгновенный».
Для повышения производительности важно оптимизировать эти ответы Ajax. Самый важный способ улучшить производительность Ajax — сделать кэшируемые ответы …
Кэширование Ajax-вызовов с помощью методов, таких как добавление Expires или Cache-Control Header, может значительно ускорить время отклика приложения.
8. Разместите скрипты внизу страницы — YUI
Неудивительно, что команда YUI собирается сделать этот список дважды, с их обширной базой знаний о советах JavaScript.
Один простой, но ключевой аспект разработки с использованием JavaScript, который упускают из виду многие разработчики, — это добавление JavaScript внизу страницы, а не вверху. Добавляя JavaScript-файлы в верхней части страницы, вы также блокируете параллельные загрузки других элементов на странице, например изображений.
Не всегда лучшая идея добавлять JavaScript включает внизу, но вы можете это сделать много раз, и ваша производительность из-за этого увеличится.
9. Не используйте конструктор Eval — Julien Lecomte
Julien Lecomte — это еще один Yahoo! Сотрудник сети разработчиков. Он очень хорошо осведомлен, когда речь заходит об оптимизации кода JavaScript, так как он является автором YUI Compressor, а также YUI History Manager .
В своем выступлении Жюльен дает несколько отличных советов по оптимизации JavaScript. Во время презентации Жюльен утверждает, что программисты на JavaScript должны находиться как можно дальше от конструктора Eval. На слайде 19 речи вы увидите его обоснование.
- Строка, переданная в Eval (и его родственники, конструктор Function и функции setTimeout и setInterval), должна быть скомпилирована и интерпретирована. Очень медленно!
- Никогда не передавайте строку в функции setTimeout и setInterval. Вместо этого передайте анонимную функцию.
- Никогда не используйте Eval и конструктор Function (за исключением некоторых крайне редких случаев и только в тех блоках кода, где производительность не критична).
10. Операторы присваивания против равенства — Петер-Поль Кох
Peter-Paul Koch — популярный интернет-разработчик Apple, который также управляет веб-сайтом Quirksmode, содержащим множество советов по JavaScript. Питер-Пол также написал ppk на JavaScript , который содержит всевозможную информацию о великолепной разработке JavaScript.
PPK затрагивает серьезное (и распространенное) недоразумение, с которым часто сталкиваются новые авторы сценариев Java: = или ==?
Ошибка, которую часто делают JavaScripters, путает операторы присваивания и равенства = и ==. Если вы хотите сравнить два значения, вы должны использовать двойной знак равенства, поскольку именно так работает JavaScript. Если вы случайно используете один знак равенства, вы не сравниваете значения, а присваиваете значение переменной.
Хотя это и не потрясающая концепция или небольшой кусок информации, это полезное напоминание, которое может сэкономить много часов начинающему программисту.
- Подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные уроки и статьи по веб-разработке.
Вы можете прочитать больше советов по веб-разработке в его блоге Web Jackalope .
Если вы нашли этот пост полезным, пожалуйста, скажите спасибо с Digg: