Аннотация : Современные веб-сайты и веб-приложения, как правило, полагаются на обширный JavaScript на стороне клиента для обеспечения богатой интерактивности. В частности, возврат данных или получение ответа от серверного скрипта (или системы данных) посредством асинхронного запроса без обновления страницы. В этой статье вы узнаете, как фреймворки JavaScript ускоряют и упрощают создание интерактивных, адаптивных веб-сайтов и веб-приложений.
Введение : JavaScript — это объектно-ориентированный язык сценариев, который уже давно используется в качестве предпочтительного интерфейса сценариев на стороне клиента для приложений веб-браузера. JavaScript позволяет веб-разработчикам программно работать с объектами на веб-страницах, предоставляя платформу для манипулирования этими объектами из воздуха. Когда JavaScript был впервые представлен, он часто использовался для обеспечения тривиальных функций, таких как часы и прокрутка текста в строке состояния браузера. Еще одной распространенной функцией является «ссылка при наведении», которая меняет цвет текста или фонового изображения, когда указатель мыши пользователя наводится на объект. Однако в последние годы Ajax привнес новые возможности в сетевое программирование, а JavaScript развился и стал более полезным. До Ajax любая обработка на стороне сервера или доступ к базе данных требовали «обновления» всей страницы или новой страницы, отображаемой браузером. Это не только медленно и неприятно для пользователей, но и приводит к потере пропускной способности и ресурсов.
Ajax — это асинхронный JavaScript и XML. Хотя ссылка на XML больше недействительна, Ajax может реагировать на данные в нескольких других форматах, помимо XML, таких как JSON (нотация объектов JavaScript). Принцип работы Ajax заключается в асинхронной отправке HTTP-запроса на веб-сервер, без обновления и рендеринга всей страницы, а только содержимого ответа. Вместо этого разработчики обычно используют операции DOM (объектная модель документа) для изменения частей веб-страницы, и данные, возвращаемые ответом HTTP, будут отражать эти изменения.
Что такое JavaScript-фреймворк?
JavaScript сам по себе является очень мощным языком, и вам не нужны никакие дополнительные платформы для создания многофункциональных интернет-приложений (RIA) на его основе. Однако работа с JavaScript — непростая задача, главным образом из-за различных сложностей, возникающих при попытке обеспечить поддержку нескольких браузеров. Подобно HTML и CSS, разные браузеры по-разному выполняют JavaScript, поэтому обеспечение кросс-браузерной совместимости вашего кода JavaScript может оказаться настоящим кошмаром.
Фреймворк или библиотека JavaScript на самом деле представляет собой набор инструментов и функций, которые упрощают создание кроссбраузерного кода JavaScript. Каждая библиотека была тщательно протестирована на последних версиях многих популярных веб-браузеров. Таким образом, вы можете быть уверены, что при использовании любой из этих платформ ваш RIA на основе JavaScript будет в целом единообразен для всех браузеров и платформ.
Если оставить в стороне проблемы совместимости с браузерами, фреймворки JavaScript упрощают написание кода для получения, перемещения и управления элементами DOM. Они не только предоставляют быструю функцию для получения ссылки на элемент DOM, но также позволяют последовательное соединение функций обхода DOM для поиска родительских, дочерних или одноуровневых элементов на любой глубине. Наконец, инфраструктура предоставляет ряд функций, которые упрощают манипулирование этими объектами, позволяя изменять, добавлять, удалять их содержимое или манипулировать стилем класса, чтобы повлиять на внешний вид элемента.
Еще одна важная особенность платформы JavaScript — лучшая поддержка обработки событий. Из-за различных реализаций в разных браузерах обработка кросс-браузерных событий может оказаться кошмаром. Поэтому фреймворки JavaScript часто оборачивают события браузера и предоставляют ряд полезных кроссбраузерных функций для их обработки. Некоторые платформы также предоставляют стандартизированные события, которые представляют серии кодов клавиш клавиатуры (например, клавиша Esc, клавиша Enter, курсор и т. д.).
Все эти функции очень полезны, и фреймворки JavaScript сыграли важную роль в их недавних популярных приложениях Ajax. Как и в случае с другими аспектами JavaScript, каждый веб-браузер имеет тенденцию поддерживать Ajax по-своему, и обеспечение поддержки Ajax для всех браузеров потребует большой работы. Почти все платформы JavaScript включают в себя ту или иную форму библиотеки Ajax, обычно предоставляющую объекты запросов и ответов Ajax, обновление элементов DOM после оценки ответов и опрос конкретного запроса.
Типичные характеристики JavaScript-фреймворка
Теперь давайте посмотрим на некоторые функции, которыми обладает большинство фреймворков JavaScript. Эти функции включают в себя:
Чтобы лучше объяснить эти функции, я приведу пример одной или нескольких следующих фреймворков JavaScript: Prototype, jQuery, YUI, ExtJS и MooTools. Хотя реализация и синтаксис каждой платформы различны, концепции в целом одинаковы. Каждая платформа имеет подробный справочник по API, на который вы можете опираться при принятии решения об использовании функций этих конкретных библиотек.