Одна из вещей, которую библиотеки JavaScript, такие как jQuery , Dojo и YUI, могут сделать для вас, — добавить поддержку функций в последних веб-стандартах задолго до того, как они встроены в браузеры. Но некоторые библиотеки заходят слишком далеко?
Для разработчиков библиотек JavaScript существует соблазн расширить возможности стандарта и создать что-то еще лучше! Хорошим примером этого являются запросы селектора CSS, которые сначала сделали jQuery известным, но теперь доступны в большинстве библиотек JavaScript.
CSS-запросы предоставляют чрезвычайно удобный способ получения списка элементов из HTML-документа, которые соответствуют определенным критериям. Например, вы можете написать скрипт, который открывает все гиперссылки с атрибутом rel="external" в новом окне. Используя только API DOM, поддерживаемый всеми основными браузерами, код JavaScript для получения этого списка ссылок довольно громоздок:
var anchors = document.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { var href = anchors[i].getAttribute('href'); var rel = anchors[i].getAttribute('rel'); if (href != null && href.length > 0 && rel != null && /(^| )external( |$)/.test(rel)) { // anchors[i] is a link with rel="external" } }
Этот код начинается с получения списка всех элементов в документе, а затем проверяет каждый элемент в этом списке, чтобы узнать, имеет ли он атрибут href атрибут rel который содержит слово external .
Запрос CSS позволяет вам выразить все эти тесты, используя тот же синтаксис компактного селектора CSS, который мы используем при написании таблиц стилей. Вот как это выглядит, используя API запросов jQuery CSS:
var links = $('a[href][rel~=external]'); for (var i = 0; i < links.length; i++) { // links[i] is a link with rel="external" }
Эта функция оказалась настолько популярной, что она была быстро добавлена в каждую библиотеку JavaScript. Вот то же самое, используя API Dojo:
var links = dojo.query('a[href][rel~=external]'); for (var i = 0; i < links.length; i++) { // links[i] is a link with rel="external" }
В то время как различные библиотеки боролись за создание самой быстрой реализации CSS-запросов, производители браузеров собрались вместе на W3C и разработали стандарт, который браузеры могли реализовать непосредственно: API селекторов .
Но здесь все становится интересным: некоторые библиотеки, такие как jQuery, добавили поддержку целого ряда дополнительных селекторов в дополнение к тем, которые предоставляются спецификациями CSS, в то время как другие, такие как Dojo, придерживались только поддержки стандартных селекторов CSS.
Очевидно, что когда браузеры поддерживают API селекторов (Safari и IE8 beta 1 уже делают!), Их собственные реализации будут работать быстрее, чем любая библиотека JavaScript. Но API селекторов позволяет вам использовать только селекторы CSS, поддерживаемые браузером — не больше и не меньше. Библиотеки, поддерживающие дополнительные нестандартные селекторы, не смогут обеспечить такое повышение производительности.
Вот как Алекс Рассел из Dojo изложил это в своем объявлении о недавно выпущенном Dojo 1.1:
… Сохраняя синтаксис нашего запроса в соответствии с тем, что обеспечивает CSS, мы избежали попадания в ситуацию, когда нам всегда нужно будет отправлять такой механизм запросов по проводам. Рано или поздно
dojo.query()станет не чем иным, как вызовомquerySelectorAllплюс некоторый синтаксический сахар в возвращаемом массиве. Еще лучше то, что API не изменится, и вы сможете ускорить работу браузеров, которые его поддерживают, прекрасно зная, что в будущем все будет только быстрее и меньше. Инвестиции в инструментарий, который [обращает] внимание на развитие сети, уже приносят дивиденды пользователям Dojo.
Итак, какую библиотеку JavaScript вы используете, и вы проверили, как ее API сравниваются с новыми стандартами для эквивалентных встроенных функций браузера?
Обновлены примеры кода, приведенные выше, чтобы использовать циклы for вместо циклов for…in основе отзывов в комментариях.