5 простых советов для более эффективного применения селекторов JQuery Javascript


Оглавление (нажмите, чтобы открыть):

Нативные эквиваленты jQuery методов — Часть 1: Выборка DOM элементов

Такая полезная библиотека как jQuery, иногда кажется излишней, загрузить большую библиотеку для того что бы стащить простые вещи, как добавление обработчика события или переключение класса. С многими нативными методами, которые теперь доступны и будучи намного быстрее, самое лучшего времени чтобы отойти от jQuery на некоторое время и изучить некоторые родные эквиваленты.

В следующей серии постов я покажу вам полезные фрагменты кода, которые позволяют делать теже манипуляции, для которых вы обычно используете jQuery без необходимости, добавив еще 80 Кб+ на свою страницу. Каждая запись покажет jQuery метод с соответствующим нативным методом. Посты не будут раскрывать все моменты как учебные пособия, но следует рассматривать их в качестве краткого справочного руководства.

Этот пост будет посвящен множеству методов для выбора DOM элементов.

Получить элемент по его ID

jQuery
Нативный JS

Обратите внимание, что jQuery метод возвращает объект, в то время как нативные версии возвращают узел DOM дерева.

Получить элементы по имени тега (tagName)

jQuery
Нативный JS

Получить элементы по имени класса (className)

jQuery
Нативный JS

Обратите внимание, что, как и jQuery $() метод, querySelector и querySelectorAll оба принимают строковой CSS3 селектор.

Другой важный момент это — что все методы в примерах выше начинают свой поиск с вершины DOM дерева, которые не могут быть эффективны при работе с тонной DOM узлов. Однако мы можем вызывать методы непосредственно на узле DOM дерева.

Это позволит начать поиск непосредственно из parent узла и вернуть все дочерние элементы с именем класса ‘child-class’

Итак, какой из них использовать?

Хорошо, у нас есть getElementsByTagName , getElementsByClassName и querySelectorAll , так какой из них использовать?

Хоть метод querySelectorAll и является более современным подходом и ближе к jQuery методу $(selector) , так как он позволяет использовать в широком диапазоне CSS3 селекторы, есть одно главное различие, которое может вернуться и укусить вас в зад, если вы не знаете этого.

Метод querySelectorAll как и jQuery $(selector) метод, будет возвращать статический NodeList , тогда как getElementsByTagName и getElementsByClassName будут возвращать живой NodeList .

Хорошо, так в чем отличие?

Подумайте о статическом NodeList как снимок DOM дерева, когда метод querySelectorAll был вызван. Все что вы делаете с DOM после вызова метода querySelectorAll не будет отображено в NodeList при возврате. В то время как живой NodeList вернувший getElementsByTagName и будет getElementsByClassName .

Почему это так важно?

Возьмем следующий список элементов:

Давайте получим элементы с помощью метода querySelectorAll

Теперь посчитаем эти элементы:

Добавим новый элемент в список:

Теперь давайте снова считать элементы:

Ой, что случилось? Теперь у нас есть 5 элементов в списке, но второй счетчик все еще показывает 4 элемента!

В этом и заключается суть статического NodeList , существенное отличие которое вам нужно знать при использовании querySelectorAll перед getElementsByTagName и getElementsByClassName . Так как оба последние методы возвращают живой NodeList , пересчет при второй попытки должно было вернуть 5. На самом деле, не важно какое количество элементов вы добавили или удалили, последние методы всегда будут отображать изменения.

Конечно, это относиться только если DOM дерево меняется после того как вызывается метод, если вы уверены, что никаких изменений в будущем не произойдет, вы в безопасности что бы использовать метод querySelectorAll .

Рабочий пример приведенный выше можно найти по этой ссылке: codepen.io/Mobius1/pen/jMjjZd.

Дополнительные селекторы

Получить первый элемент

jQuery
Нативный JS

Помните, что вы можете заменить document с DOM узлом, чтобы сделать поиск более эффективным.

Также отметим, что querySelector возвращает первый подходящий Element узла, в то время как querySelectorAll вернет NodeList .

Получить дочерние узлы элементов

jQuery
Нативный JS

Не используйте метод childNodes если не знаете что делаете, или вы должны поддерживать IE firstChild имеет аналогичные подводные камни как childNodes .

Помните, что метод jQuery вроде $() , querySelector и querySelectorAll оба поддерживают сложные CSS3 селекторы, поэтому так же могут быть использованы ниже:

В случае с jQuery, есть множество способов получения желаемого узла в приведенном выше примере, таким образом просто выберите тот, который соответствует вашим потребностям, но следует отметить что (в зависимости от используемого браузера) старые getElementsByTagName и getElementsByClassName методы могут быть гораздо быстрее, чем новые родные и jQuery методы: запустить тест

Получить последний дочерний элемент

jQuery
Нативный JS

Как и c firstChild и childNodes , lastChild следует использовать только если вы собираетесь поддерживать IE null , если MyElement является последним потомком его родителя.


Получить предыдущий элемент

jQuery
Нативный JS

Нативные методы будут возвращать null , если MyElement является первым потомком его родителя.

nextSibling и previousSibling методы должны рассматриваться так же, как и childNodes , firstChild и lastChild , для их возврата узлов за исключением HTMLElements.

Если вам нужно использовать любой из этих методов для поддержки старых браузеров, то вы можете проверить nodeType для безопасности. HTMLElement nodeType равен 1, если другое значение отличное от 1, то у вас не HTMLElement.

Нет нативной альтернативы?

Обход DOM дерева может быть непростой задачей (особенно для новичков) и к счастью jQuery имеет много полезных методов что бы помочь. Однако не все jQuery методы имеют родной эквивалент.

Получить ближайший элемент вверх по DOM дереву (предка) соответствующий селектору

jQuery
Нативный JS

Несмотря на наличие родной версии jQuery метода closest() , она экспериментальная, и поэтому не должна использоваться на продакшене.

Дополнительно к прочтению: Element.closest()

Давайте создадим наш собственный вместо этого.

Функция выше не включает проверки более сложных атрибутов таких как data-* для сокращения, а также не включает на проверку ID, как правило можно было вызвать getElementById что бы найти его.

Вот и все на сегодня. В следующем посту мы будем рассматривать нативные методы jQuery attr() , prop() , addClass() , hasClass() , removeClass() и методы «полифилов» для старых браузеров.

Про быстродействие селекторов jQuery

Если вы нуждаетесь в дополнительной производительности, и все равно хотите использовать jQuery, то можете попробовать провести оптимизацию селекторов. Тест с использованием time и timeEnd методов консоли браузера в тексте данной статьи.

Пишем следующий javascript-код, в котором разными методами обращаемся к внутреннему элементу div. Не забываем подключить библиотеку jQuery. Производительность измеряем с помощью цикла с 10000 итераций:

Результаты теста смотрим в консоли браузера. Ниже приведены результы из браузера Firefox 41.0.1.

Из результатов теста видно, что самое быстрое обращение по id элемента – всего 15мс, а самое медленное – 328мс.

Что изучать jQuery или чистый JavaScript?

Первоначальной функцией jQuery была нормализация DOM. То есть например если в IE был метод attachEvent, а в остальных браузерах — addEventListener, то задачей jQuery было выбрать нужный метод и предоставить пользователю доступ к нему через свой интерфейс — функцию $.fn.on. В своё время jQuery был почти обязательным для веба, он обеспечивал совместимость.

Сейчас основные функции DOM достаточно унифицированы (например у querySelectorAll поддержка 97.97%), поэтому на данный момент jQuery является не более чем одним из самых простых и элегантных инструментов для манипуляции DOM. JQuery конечно сам по себе крутой — он предоставляет очень удобные и лаконичные способы для реализации анимации, AJAX, обработки наоборов элементов — но всё же в наше время jQuery не является чем-то обязательным, его по вкусу используют в проектах менее сложных, чем веб-приложения.

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

Кроме того jQuery логичен и понятен — как уже ниже заметил Дмитрий «Demian Smith», начать использовать jQuery вы можете в любую минуту, все недопонимания решаются подглядыванием в документацию.

Лично мне кажется, что вообще тратить время на целенаправленное изучение jQuery стоит только в образовательных целях, например чтобы перенять некоторые приёмы программирования которые используют разработчики jQuery. А если вы и так уже используете jQuery для разработки, то вполне можно переключиться на более интересные вещи. В частности, имеет смысл глянуть на то что делает Юрий kangax Зайцев, в том числе Perfection Kills и всевозможные его около/образовательные статьи.

Is, чистый js, es6, webpack, прочие системы сборки, транспайлеринг, попробуйте работать с анимациями , DOM, без jquery и прочей лабуды.

Я видел сеньеров vue и реакта, которые нихрена не знают о Promices. Хотя юзают их. И в результате тащит в свои spa кучу кода для решения простой задачи. Вы не представляете, что такое видеть в vue компонентах jquery. Это ппц

То что вы называете «чистый JS», как противопоставление jQuery- это, просто API к браузеру. Вот он весь https://developer.mozilla.org/en-US/docs/Web/API . Как видите, там много всего. И запоминать наизусть это не нужно, потому что есть эта ссылка.

То что вы называете jQuery — это обёртка над функциями из предыдущей ссылки вот она: api.jquery.com . Тоже довольно много функций, которые тоже не обязательно зазубривать. Потому что есть вторая ссылка.

Без понимания принципов работы JS — две ссылки выше — это просто непонятный набор цветных букв. Так что учите JS. В этом случае сможете использовать и «чистый JS» и jQuery и любую другую библиотеку. Чтоб оседлать этот язык и чувствовать себя как рыба в воде, рекомендую обратить внимание на такие пункты как:

  • синтаксис языка
  • область видимости
  • функции высшего порядка
  • замыкания
  • event loop
  • работа c DOM

Наиболее эффективный способ использования селекторов в JQuery?

это более эффективно использовать $(‘.active’) или $(‘div.active’) ? Я всегда избегал в том числе «DIV» , потому что это дополнительный текст в файле яваскрипта я не хочу, чтобы пользователь должен загрузить.

Более старые версии IE выиграют от включения , div потому что они не поддерживают getElementsByClassName() .

Из — за этого, каждый элемент на странице должен быть выбран:

. и испытаны вручную , чтобы увидеть , если он имеет active класс.

Если включить div , то он может сузить его немного вниз, так как это можно сделать:

. затем проверить только те элементы.

Когда я говорю , более старые версии , я имею в виду IE6 и IE7 , так как IE8 + поддерживает querySelectorAll .

РЕДАКТИРОВАТЬ:

Это зависит. Если вы имеете в виду производительность. Я подготовил специальный тест для каждого на JSPerf: тест селектора JQuery класса . На моем браузере и компьютере (FF 3.6.13 и Core 2 Duo 1,6) div.active немного медленнее. Но обнаружил , что переменная — это , кажется , GC имеет что — то делать здесь.

И после того, как несколько больше испытаний, кажется , что div.active :

  • Скорость регулируется на FF, иногда GC включается «div.active» тест, но в целом разница очень мала.
  • Unnoticable разница в Chrome и Safari
  • Быстрее на IE9

Я хотел бы включить имя тега, если это помогает самому-документу код. Если я могу использовать

Я, как правило, чтобы сделать это.


CSS селекторы в JQuery используются быть оптимизированы аналогично тому , как вы могли бы сделать это для браузеров, см: http://css-tricks.com/efficiently-rendering-css/

Определение общего тега в любом месте, даже с ID или класса будет значительно медленнее, чем просто указать идентификатор или класс в одиночку. Видеть:

Выше использует JQuery 1.3. Так как JQuery 1.4 и введение двигателя Sizzling селектора, это менее важно, насколько я понимаю. Видеть:

Для себя я решил, в CSS, чтобы использовать все, что читает простой, и я более конкретно там, так что только разобран один раз. В JQuery, однако, я был более осторожным, так как эти селекторы могли работать в тысячи раз в течение срока службы страницы.

Я думаю, что лучший способ получить некоторую скорость на больших страницах является использование вместо поиска.

$ (Ваш-контейнер) .find ( «div.active»)

Так как вы всегда? знать, где вы должны смотреть, вы можете создать свой собственный объем. Так что браузер нужно только искать в этой области кода.

Мастер Йода рекомендует:  Введение в jQuery Javascript

Кстати, вам не нужно заботиться о размере CSS, EVER 🙂 Используйте CSS minifing инструменты для минимизации CSS, когда сайт находится в рабочем режиме. Вы также можете настроить свой веб-сервер автоматически GZIP ваши CSS файлы перед отправкой пользователю. И если вы не измените CSS файла на каждом PageLoad, браузер кэш до целого файла CSS.

10 советов для написания JavaScript без JQuery

Введение

JQuery — огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делало процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.

С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.

Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например, для простых страниц с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS.

Вот 10 советов, которые помогут в вашей деятельности .

1. Прослушивание на готовность документа (Document Ready)

Первое, что вы делаете, когда пишете JQuery, это упаковывание своего кода в вызов $(document).ready() для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.

2. Выбор элементов

Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API — querySelector и querySelectorAll.

3. Установка и удаление слушателей событий

Прослушивание событий — фундаментальная часть построения веб-приложения. Принято было использовать две основные стороны, которые отличались тем, каким способом все было сделано — IE и остальное. Но сегодня мы просто используем addEventListener.

4. Манипулирование классами и свойствами

Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute.

5. Получение и установка содержимого элементов

JQuery имеет удобный текст и html ( )методы. Вместо их можно использовать свойства textContent и innerHTML, которые были у нас в течение очень долгого времени.

6. Установка и удаление элементов

Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите.

7. Прохождение по DOM дереву

Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И, тем не менее, есть множество вещей, которые Вы можете делать, путешествуя по DOM — дереву.

8. Обработка массивов

Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов — each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах.

Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить» и, если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов.

Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Хорошая новость — теперь можно использовать один и тот же код везде. Плохая новость — по-прежнему громоздко создавать экземпляры и отправлять AJAX-запросы с XMLHttpRequest, так что лучше предоставить это библиотеке. Но Вы не должны подключать всю JQuery только для этого. Вы можете использовать одну из самых многочисленных и легких библиотек, которые доступны. Вот пример построения запроса AJAX напрямую, и с помощью небольшой библиотеки запросов.

Стремление к минимальному, нулевому количеству наворотов на веб-странице — достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны — никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery. Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Попробуйте следовать ванили в следующий раз, это может быть все, что вам нужно!

Как отказаться от jQuery в современном фронтенде: опыт команды GitHub

Не так давно GitHub полностью перестал использовать jQuery в своём фронтенд-коде. Мы перевели пост, в котором разработчики рассказывают, с чего началась их работа с jQuery, как они поняли, что пора от него отказываться, и как они смогли сделать это без использования других библиотек или фреймворков.

Зачем jQuery был нужен раньше?

jQuery 1.2.1 вошёл в число зависимостей GitHub в конце 2007 года. Это произошло за год до того, как Google выпустил первую версию браузера Chrome. На тот момент не было общепринятого способа обращаться к элементам DOM с помощью CSS-селектора, не было стандартного способа добавить анимацию к стилю элемента, а интерфейс XMLHttpRequest, предложенный Internet Explorer, как и многие API, был плохо совместим с браузерами.

С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах. На заре GitHub, когда большинство его функций только обретали форму, появление jQuery позволило небольшой команде разработчиков быстро создавать прототипы и представлять новые функции без необходимости подстраивать их отдельно под каждый браузер.

Простой интерфейс jQuery также послужил основой для создания библиотек, которые в будущем стали компонентами остальной части фронтенда GitHub.com: pjax и facebox.

Веб-стандарты в последующие годы

С течением времени GitHub превратился в компанию с сотнями разработчиков и постепеннно сформировалась команда, которая отвечала за размер и качество JavaScript-кода, который мы отправляем браузерам. Одна из вещей, за которыми мы постоянно следим, — технический долг, порой вырастающий из некогда полезных зависимостей, которые потеряли свою актуальность по прошествии времени.

Когда очередь дошла до jQuery, мы сравнили его с развивающимся веб-стандартом в браузерах и поняли, что:

  • Шаблон $(selector) можно легко заменить на querySelectorAll() ;
  • Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
  • CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
  • $.ajax -запросы можно выполнять с помощью Fetch Standard;
  • Интерфейс addEventListener() достаточно стабилен для кроссплатформенного использования;
  • Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
  • С эволюцией JavaScript часть синтаксического сахара jQuery устарела.

Кроме того, синтаксис цепочек команд не удовлетворял нашим представлениям о коде, который мы хотели бы писать в будущем. Например:

Такой синтаксис прост в написании, однако по нашим стандартам не очень хорошо передаёт намерения автора. Сколько элементов js-widget , по его задумке, должно быть на странице: один или больше? А если мы обновим разметку страницы и случайно оставим имя класса js-widget , будет ли выброшено исключение, которое сообщит нам, что что-то пошло не так? По умолчанию jQuery молча пропускает всё выражение, когда нет совпадений по начальному селектору; однако для нас такое поведение было больше багом, нежели фичей.

Наконец, нам хотелось начать аннотировать типы с Flow, чтобы проводить статическую проверку типов во время сборки, и мы пришли к выводу, что синтаксис цепочек плохо поддаётся статическому анализу, так как почти каждый результат вызова метода jQuery одного и того же типа. Из возможных вариантов мы выбрали именно Flow, так как тогда такие возможности, как режим @flow weak , позволили нам начать прогрессивно и эффективно применять типы к кодовой базе, которая по большей части была нетипизированной.

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

Постепенный переход


Хотя наша конечная цель была не за горами, мы знали, что было бы нецелесообразно направить все имеющиеся ресурсы на переписывание всего с jQuery на чистый JS. Во всяком случае, такое поспешное решение негативно бы сказалось на функциональности сайта, от которой нам бы пришлось отказаться. Вместо этого мы:

  • Начали отслеживать количество вызовов jQuery на строку кода и следили за графиком на протяжении времени, чтобы убедиться, что он либо не меняется, либо падает, но не растёт.
  • Отказались от использования jQuery в новом коде. Чтобы достичь этого с помощью автоматизации, мы создали eslint-plugin-jquery, который проваливал CI-тесты при попытке использовать возможности jQuery вроде $.ajax .
  • В старом коде появилось много нарушений правил eslint, которые мы пометили с помощью специальных правил eslint-disable в комментариях. Для того, кто будет это читать, такие комментарии должны были служить явным сигналом того, что здесь не отражаются наши текущие методы написания кода
  • Мы написали бота, который при отправке pull request’а оставлял комментарий, сигнализирующий нашей команде каждый раз, как кто-то хотел добавить новое правило eslint-disable . Таким образом мы могли провести ревью кода на ранней стадии и предложить альтернативы.
  • Большая часть старого кода была явно связана с внешними интерфейсами jQuery-плагинов pjax и facebox, поэтому мы оставили их интерфейсы почти без изменений, в то время как изнутри заменили их реализацией на чистом JS. Наличие статической проверки типов вселило в нас уверенность в проводимом рефакторинге.
  • Много старого кода было связано с rails-behaviors, нашим адаптером для Ruby on Rails, таким образом, что он присоединял обработчик жизненного цикла AJAX к определённым формам:

Вместо того чтобы переписывать все эти вызовы согласно новому подходу, мы решили использовать ложные события жизненного цикла ajax* , и формы продолжали отправлять данные асинхронно, как и раньше; только теперь изнутри использовался fetch() .

  • Мы поддерживали свою сборку jQuery, из которой убирали ненужные нам модули и заменяли более лёгкой версией. Например, после избавления от всех jQuery-специфичных CSS-псевдоселекторов вроде :visible или :checkbox мы смогли убрать модуль Sizzle; а когда мы заменили $.ajax -вызовы на fecth() , мы смогли отказаться от модуля AJAX. Мы убивали двух зайцев разом: уменьшали время выполнения JavaScript, параллельно гарантируя то, что никто не напишет код, который будет пытаться использовать удалённую функциональность.
  • Глядя на статистику нашего сайта, мы старались прекратить поддержку Internet Explorer настолько быстро, насколько это возможно. Как только использование определённой версии IE падало ниже определённого порога, мы прекращали её поддержку и фокусировались на более современных браузерах. Отказ от поддержки IE 8-9 на раннем этапе позволил нам использовать многие нативные возможности браузеров, которые в противном случае было бы сложно «заполифиллить».
  • В рамках нашего усовершенствованного подхода к написанию фронтенда GitHub мы сосредоточились на использовании обычного HTML по-максимуму, добавляя JavaScript в качестве последовательного улучшения. В итоге даже те формы и другие элементы интерфейса, которые были улучшены с помощью JS, как правило, могли работать даже с выключенным в браузере JavaScript. В некоторых случаях нам даже удалось удалить определённую устаревшую функциональность вместо её переписывания на чистом JS.
  • Благодаря этим и аналогичным усилиям с течением времени мы постепенно смогли уменьшить нашу зависимость от jQuery вплоть до того момента, когда не осталось ни одной строки кода, ссылающейся на эту библиотеку.

    Custom Elements: пользовательские элементы

    Одна технология, наделавшая шуму в последние годы, — Custom Elements: библиотека компонентов, встроенная в браузер, что означает отсутствие необходимости для пользователя качать, парсить и компилировать дополнительные байты фреймворка.

    Мы создали несколько пользовательских элементов на основе спецификации v0 с 2014 года. Однако, поскольку стандарты в то время постоянно менялись, мы сильно в это не вкладывались. А начали только с 2020 года, когда была выпущена спецификация Web Components v1, реализованная как в Chrome, так и в Safari.

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

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

    Вот пример того, как можно реализовать элемент :

    Один из аспектов Web Components, который мы очень хотим перенять, — Shadow DOM. У Shadow DOM есть потенциал для раскрытия множества возможностей для веба, однако он также усложняет полифиллинг. Так как его полифиллинг на данный момент приведёт к снижению производительности даже для кода, который управляет частями DOM, не относящихся к веб-компонентам, для нас нецелесообразно использовать его в продакшне.

    Полифиллы

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

    Каков наиболее эффективный/быстрый способ многократного использования селектора jQuery?

    Существует элемент HTML, который я выбираю и манипулирую несколько раз внутри функции с помощью селектора jQuery $(«#main-nav) .

    Будет ли быстрее назначать объект jQuery, возвращаемый $(«#main-nav») переменной в начале функции, и манипулировать ею с использованием этой переменной?

    Даже если это не намного быстрее, лучше ли это делать?

    Короче говоря, какая из двух функций ниже быстрее и/или демонстрирует лучшие практики?

    Независимо от того, сколько jQuery может быть оптимизировано для этого конкретного случая, он должен все равно обрабатывать селекторную строку каждый раз, когда она вызывается (даже если нужно просто проверить, что она такая же, как и предыдущий селектор). Версия, использующая переменную, позволяет избежать этой стоимости, и, конечно же, будет более эффективной.

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

    Второй из них работает быстрее, поскольку он только обходит DOM один раз и лучше всего, потому что все, что устраняет избыточность кода, почти всегда предпочтительнее.

    Также обратите внимание, что это обычное (но не важно вообще) префикс jQuery селекторов/объектов с $:

    Изменить: Развернуто при ответе.

    Как обойтись без jQuery.

    JQuery — огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делали процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.

    С тех пор, однако, веб-браузеры намного усовершенствовались. Вы можете с удобством использовать все возможности, предоставляемые ES5, и имеете в полном распоряжении огромную API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.

    Не поймите неправильно – JQuery по-прежнему отличная библиотека и чем чаще вы будете использовать ее, тем лучше. Тем не менее, для небольших проектов, например простые страницы с ограниченным JS взаимодействием, расширениями браузеров и мобильных сайтов, вы можете использовать vanlla JS.

    Вот 10 советов, которые помогут в вашей деятельности.

    1. Обработка события готовности документа (Document Ready)

    Первое, что вы делаете, когда пишете JQuery, это упаковка своего кода в вызов $(document).ready(), для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.

    2. Выбор элементов

    Давным-давно Вы могли только выбирать элементы по ID, классу и имени тега, а JQuery с ее умными CSS-селекторами выступала своеобразным спасателем. Браузеры исправили это и представили две важные API — querySelector и querySelectorAll.

    Примеры селекторов для querySelector и querySelectorAll

    jquery — селектор css — селектор Описание
    :eq(0) :nth-of-type(1) получить первый этого типа, эквавалент jquery

    Сводная таблица селекторов CSS здесь.

    3. Установка и удаление слушателей событий

    Прослушивание событий — фундаментальная часть построения веб-приложения. Принято было использовать две основные стороны, которые отличались тем, каким способом все было сделано — IE и остальное. Но сегодня мы просто используем addEventListener.

    4. Манипулирование классами и свойствами

    Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря свойству ClassList. И если нужно управление атрибутами, Вам нужен SetAttribute.

    5. Получение и установка содержимого элементов

    JQuery имеет удобный текст и html ( )методы. Вместо их можно использовать свойства textContent и innerHTML, которые были у нас в течение очень долгого времени.

    6. Установка и удаление элементов

    Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript. Здесь показано, как добавлять, удалять и заменять любые элементы, какие Вы только захотите.


    7. Прохождение по DOM дереву

    Любой настоящий JS-ниндзя знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery, простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И тем не менее, есть множество вещей, которые Вы можете делать, путешествуя по DOM — дереву.

    8. Обработка массивов

    Некоторые из утилитных методов, которые предоставляет JQuery, доступны со стандартом ES5. При переборе массивов можно использовать forEach и map вместо их JQuery аналогов — each() и map(). Просто будьте осторожны при различиях в аргументах и значениях по умолчанию в обратных вызовах.

    9. Animations

    Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить», и если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать с помощью легкой библиотеки Animate.css, которая позволяет запускать анимацию, добавляя или удаляя имена классов элементов.

    10. AJAX

    Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Теперь можно использовать один и тот же код везде.

    Выводы

    Стремление к минимальному, нулевому количеству наворотов на веб-странице — достойная цель, что окупит себя быстрой загрузкой и лучшим пользовательским опытом. Но будьте осторожны — никто не выиграет, если Вы будете изобретать велосипед, который уже используется в JQuery. Не жертвуйте хорошей практикой разработки только для того, чтобы сократить количество кода. Но есть множество мест, где на сегодня советы вполне применимы. Например, на данном сайте библиотека jQuery не используется.

    Работа с DOM-объектами

    Функция $() библиотеки jQuery

    Доступ к возможностям jQuery осуществляется с помощью функции библиотеки jQuery $(. ), которую мы будем называть просто функцией $(). Эта функция служит точкой входа в волшебный мир jQuery, а символ $ является удобным коротким псевдонимом пространства имен jQuery. Следующие два примера аналогичны (выводят сообщение после загрузки страницы):

    Библиотека jQuery — не единственная библиотека JavaScript, в которой используется переменная $, что может привести к конфликтам имен, если в одном документе используется одновременно несколько библиотек. Чтобы не допустить возникновения проблем такого рода, можно передать контроль над переменной $ другим библиотекам, вызвав метод jQuery.noConflict(), как показано ниже (пример из предыдущей статьи):

    Вы даже можете сами определить псевдоним для функции jQuery(). Это делается путем присваивания выбранной вами переменной результата вызова метода noConflict():

    В этом примере для функции jQuery() создается новый псевдоним jq, который можно использовать в последующих сценариях. Независимо от выбранного способа обращения к основной функции jQuery(), ей передается один и тот же набор аргументов. Возможные варианты вызова этой функции перечислены в таблице ниже:

    Варианты вызова основной функции jQuery()

    Вариант вызова Описание
    $(функция) Позволяет указать функцию, которая должна быть выполнена по завершении построения DOM
    $(селектор)
    $(селектор, контекст)
    Осуществляет выбор группы элементов в документе с помощью селектора
    $(HTMLElement)
    $(HTMLElement[])
    Создает объект jQuery из объекта или массива объектов HTMLElement
    $() Создает пустой набор элементов
    $(HTML-код) Создает новые элементы из фрагмента HTML-кода

    Ожидание готовности DOM-модели

    Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

    В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.

    Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

    Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:

    Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

    Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

    Использование альтернативной нотации

    При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

    Задержка срабатывания события ready

    Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:

    Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).

    Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

    Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

    Выбор элементов

    Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

    Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы ).

    В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

    Расширенные селекторы jQuery

    Селектор Описание
    :animated Выбирает все анимируемые в данный момент элементы
    :contains(текст) Выбирает все элементы, содержащие указанный текст
    :eq(n) Выбирает элемент с индексом n (индексы отсчитываются от нуля)
    :even Выбирает все четные элементы (индексы отсчитываются от единицы)
    :first Выбирает первый из подходящих элементов
    :gt(n) Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля)
    :has(селектор) Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору
    :last Выбирает последний из подходящих элементов
    :lt(n) Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля)
    :odd Выбирает все нечетные элементы (индексы отсчитываются от единицы)
    :text Выбирает все текстовые элементы

    Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

    В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

    Расширенные селекторы типов, определенные в jQuery

    и т.д.

    Селектор Описание Соответствующий элемент html
    :button Выбирает все элементы типа button
    :checkbox Выбирает все элементы типа checkbox
    :file Выбирает все элементы типа file
    :header Выбирает все элементы заголовков
    :hidden Выбирает все скрытые элементы
    :image Выбирает все элементы input для изображений
    :input Выбирает все элементы input
    :parent Выбирает все элементы, являющиеся родительскими по отношению к другим элементам
    :password Выбирает все элементы, являющиеся паролями
    :radio Выбирает все элементы типа radio
    :reset Выбирает все элементы типа reset
    :selected Соответствует всем выбранным элементам
    :submit Выбирает все элементы типа submit
    :visible Выбирает все видимые элементы

    Сужение области поиска с помощью контекста

    По умолчанию jQuery осуществляет поиск элементов в пределах всего DOM-дерева. Область поиска можно сузить, предоставив функции $() дополнительный аргумент. Это позволяет ограничить поиск определенным контекстом, который используется в качестве отправной точки при нахождении подходящих элементов. Соответствующий пример приведен ниже:

    В этом примере одно множество элементов, выбранных селектором jQuery, используется в качестве контекста для выбора другого множества. Сначала определяется контекст, которому соответствуют все элементы, имеющие класс drow. После этого набор выбранных элементов передается селектору img:odd в качестве контекста.

    Если вы предоставляете контекст, содержащий несколько элементов, то каждый из них используется в качестве отправной точки для поиска. При этом следует учитывать одну тонкость: сначала выбирается совокупность элементов, соответствующих контексту, а уже после этого из них выбираются элементы с помощью основного селектора. В отношении нашего примера это означает, что селектор img:odd применяется ко множеству элементов, отобранных с помощью селектора drow, откуда следует, что этот набор нечетных элементов не будет совпадать с тем их набором, который был бы найден при выполнении поиска по всему документу.

    Конечный результат состоит в том, что эффект изменения непрозрачности применяется к нечетным элементам img в каждом элементе div, принадлежащем классу drow. Этим условиям соответствуют изображения нарцисса и примулы. Если опустить контекст, то эффект будет применен к изображениям нарцисса, пиона и подснежника.

    Выбранный набор элементов

    Когда jQuery используется для выбора DOM-элементов, функция $() возвращает результат в виде объекта jQuery, представляющего нуль или более DOM-элементов. Фактически при выполнении любой операции jQuery, которая изменяет один или несколько элементов, ее результатом почти всегда является объект jQuery, что составляет важную особенность библиотеки jQuery.

    Важные методы и свойства объекта jQuery показаны в таблице ниже:

    Базовые свойства и методы объекта jQuery

    Свойство/метод Описание Тип возвращаемого значения
    context Возвращает набор элементов, используемых в качестве контекста поиска HTMLElement
    each(функция) Выполняет указанную функцию для каждого из выбранных элементов jQuery
    get(индекс) Получает объект HTMLElement с указанным индексом HTMLElement
    index(HTMLElement) Производит поиск указанного объекта HTMLElement среди набора выбранных элементов и возвращает его индекс, если находит его number
    index(jQuery) Аналогичен предыдущему методу, но возвращает индекс первого из элементов, содержащихся в указанном объекте jQuery number
    index(селектор) Возвращает индекс первого найденного элемента в объекте jQuery, вычисляемый относительно элементов соответствующих селектору number
    length Возвращает число элементов в объекте jQuery number
    selector Возвращает селектор string
    size() Возвращает количество элементов, содержащихся в объекте jQuery number
    toArray() Возвращает объекты HTMLElement, содержащиеся HTMLElement в объекте jQuery, в виде массива


    Определение селектора

    Свойство selector возвращает селектор, который описывает набор выбранных элементов, содержащийся в объекте jQuery. Если вы сужаете или расширяете набор выбираемых элементов, то свойство selector возвращает селектор, описывающий объединенный набор операций. Использование свойства selector продемонстрировано в примере ниже:

    Определение контекста

    Свойство context предоставляет подробную информацию о контексте, который использовался при создании объекта jQuery. Если в качестве контекста использовался единственный объект HTMLElement, то он и будет возвращен свойством context. Если же в качестве контекста использовалось несколько элементов (как в приведенном ранее примере) или он вообще отсутствовал, то свойство context возвратит значение undefined. Пример использования этого свойства представлен ниже:

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

    Работа с DOM-объектами

    Библиотека jQuery не подменяет собой DOM-модель, а лишь намного облегчает работу с ней. Объекты HTMLElement можно использовать, как и прежде, но jQuery упрощает переход от объектов jQuery к объектам DOM и обратно. По моему мнению, та простота, с которой можно переходить от традиционной DOM-модели к объектам jQuery и обратно и которая позволяет поддерживать обратную совместимость со сценариями и библиотеками, не связанными с jQuery, является следствием элегантности построения самой библиотеки jQuery.

    Создание объектов jQuery из DOM-объектов

    Объекты jQuery можно создавать, передавая объект или массив объектов HTMLElement функции $() в качестве аргумента. Такой способ удобен при работе с JavaScript-кодом, не ориентированным на jQuery, или в ситуациях, когда jQuery открывает доступ к базовым DOM-объектам, например при обработке событий. Соответствующий пример приведен ниже:

    В этом примере для выбора элементов img в документе вместо непосредственного использования селекторов jQuery применяется метод document.getElementsByTagName(). Результат работы этого метода (коллекция объектов HTMLElement) передается функции $(), возвращающей обычный объект jQuery, который можно использовать так же, как и в предыдущих примерах.

    В данном сценарии попутно демонстрируется создание объекта jQuery из одиночного объекта HTMLElement:

    При обработке событий средствами jQuery переменная this ссылается на элемент HTMLElement, обрабатывающий событие.

    Работа с объектами jQuery как с массивами

    Объект jQuery может рассматриваться и как массив объектов HTMLElement. Это означает, что наряду с развитыми средствами, предлагаемыми библиотекой jQuery, по-прежнему можно использовать объекты DOM. Можете использовать свойство length или метод size() для определения числа элементов, которые входят в набор выбранных элементов, содержащийся в объекте jQuery, и получать доступ к отдельным DOM-объектам, используя индексную нотацию массивов (скобки [ и ]).

    Для извлечения объектов HTMLElement из объекта jQuery, рассматриваемого как массив, можно использовать метод toArray(). Лично я стараюсь работать только с объектами jQuery, но иногда, например в случае унаследованного кода, в котором возможности jQuery не используются, удобнее работать непосредственно с DOM-объектами.

    Пример перечисления содержимого объекта jQuery с целью доступа к содержащимся в нем элементам HTMLElement приведен ниже:

    В этом примере функция $() используется для выбора нечетных элементов img и их просмотра в цикле с последующим выводом значений свойств tagName и src на консоль. Результат работы сценария выглядит следующим образом:

    Метод each() позволяет определить функцию, которая будет выполнена для каждого из DOM-объектов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

    Библиотека jQuery передает указанной функции два аргумента. Первый из них — это индекс элемента в коллекции, а второй — собственно объект элемента. В данном примере мы выводим на консоль имя дескриптора и значение свойства src, получая при этом тот же результат, что и в предыдущем примере.

    Определение индекса элемента

    Метод index() позволяет находить индекс элемента в объекте jQuery. В качестве аргумента ему можно передать либо HTML-элемент, либо объект jQuery. В последнем случае метод возвращает индекс первого из содержащихся в указанном объекте jQuery элемента. Демонстрационный пример приведен ниже:

    В этом примере сначала выполняется поиск элемента div по значению атрибута id. Для этого используется метод DOM getElementById(), который возвращает объект HTMLElement. Затем для нахождения индекса объекта, представляющего элемент div, вызывается метод index() объекта jQuery. Далее этот процесс повторяется с использованием объекта jQuery, получаемого посредством функции $(), и оба результата выводятся на консоль, как показано ниже:

    Метод get() дополняет метод index() в том смысле, что позволяет получить объект HTMLElement, который занимает в наборе элементов, содержащихся в объекте jQuery, позицию, определяемую указанным индексом. Результат получается тем же, что и при использовании индексной нотации массивов, описанной ранее. Соответствующий пример приведен ниже:

    В этом сценарии сначала выбираются нечетные элементы img, затем с помощью метода get() запрашивается объект HTMLElement с индексом 1, и, наконец, на консоль выводятся значения свойств tagName и src.

    5 простых советов для более эффективного применения селекторов JQuery Javascript

    Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

    Дизайн лендинга

    Создавайте дизайн любых сайтов — для себя и на заказ!

    Популярное

    • Главная
    • ->
    • Материалы
    • ->
    • JavaScript без jQuery: 10 советов

    Reg.ru: домены и хостинг

    Крупнейший регистратор и хостинг-провайдер в России.

    Более 2 миллионов доменных имен на обслуживании.

    Продвижение, почта для домена, решения для бизнеса.

    Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

    Бесплатный Курс «Практика HTML5 и CSS3»

    Освойте бесплатно пошаговый видеокурс

    по основам адаптивной верстки

    на HTML5 и CSS3 с полного нуля.

    Фреймворк Bootstrap: быстрая адаптивная вёрстка

    Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

    Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.


    Верстайте на заказ и получайте деньги.

    Что нужно знать для создания PHP-сайтов?

    Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

    Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

    Создайте свой сайт за 3 часа и 30 минут.

    После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

    Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

    Изучите основы HTML и CSS менее чем за 4 часа.

    После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

    Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

    Бесплатный курс «Сайт на WordPress»

    Хотите освоить CMS WordPress?

    Получите уроки по дизайну и верстке сайта на WordPress.

    Научитесь работать с темами и нарезать макет.

    Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

    Хотите изучить JavaScript, но не знаете, как подступиться?

    После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

    Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

    *Наведите курсор мыши для приостановки прокрутки.

    JavaScript без jQuery: 10 советов

    jQuery – отличная библиотека! Она пришла к нам в те времена, когда браузер IE6 был браузером номер один. В те времена было много сложностей и препятствий при работе с браузерами, что делало работу более чем утомительной. В такой ситуации библиотека jQuery была отличным инструментом чтобы добиться кроссбраузерности сайта.

    С тех пор браузеры ушли далеко вперёд, что определённо развязывает нам руки при написании кода. Мы можем комфортно использовать все преимущества предоставляемые ES5, а так же в нашем арсенале есть наикрутейший HTML5 APIs, который значительно упрощает работу с DOM.

    Разработчики сейчас находятся в ситуации, когда они могут выбирать, использовать ли им библиотеку jQuery, или же они могут вполне обойтись и без неё, не потеряв при этом в функциональности и производительности.

    Не поймите меня неправильно – jQuery по прежнему остаётся отличной библиотекой, и в большинстве случаев вам действительно нужно будет использовать её. Тем не менее, для каких-то простых и маленьких вещей, вроде простой страницы с ограниченным JavaScript-взаимодействием, расширения для браузеров или мобильных сайтов, вы можете использовать чистый JS.

    В этой статье будут описаны 10 советов, которые помогут вам в ваших стремлениях.

    1. Ожидание готовности документа (Document Ready)

    Правило номер 1: когда вы пишете код на jQuery, возьмите себе в привычку оборачивать его в $(document).ready(). Так вы всегда будете уверены что ваш документ и его DOM-структура полностью готовы для дальнейших манипуляций.

    Без jQuery, вместо $(document).ready() можем использовать document.addEventListener(‘DOMContentLoaded’). Вот как это выглядит:

    2. Выборка элементов

    Раньше для выборки элементов мы могли полагаться лишь на id , class и имена тегов и jQuery для нас с вами был чем-то вроде спасателя, так как позволял осуществлять сложные выборки по селекторам CSS. С тех пор браузеры поймали эту фишку и ввели два важнейших API-метода — querySelector и querySelectorAll:

    3. Добавление и удаление отслеживания событий

    Отслеживание событий – это фундаментальная вещь при создании любых веб-приложений. Раньше существовало два основных лагеря, которые подходили к вопросу отслеживания событий по-разному: это IE и все остальные. Однако сегодня мы просто используем addEventListener:

    4. Управление классами и атрибутами

    Раньше управление классами и атрибутами элементов без jQuery было довольно неудобно. Однако всё изменилось с появлением свойства classList. И если вам нужно поуправлять атрибутами, то всё что вам нужно — это задать атрибут setAttribute

    5. Получение и задание контента элемента.

    Для этого в jQuery есть удобные методы text() и html(). Но вы так же можете использовать методы textContent и innerHTML эти методы уже достаточно давно существуют на чистом JS.

    6. Вставка и удаление элементов

    Несмотря на то, что на jQuery это делается несколько проще, добавление или удаление DOM-элементов не является непосильной задачей для JavaScript. Вот как это делается на JS:

    7. Проход по дереву элементов структуры DOM

    Настоящие JS-джедаи знают, как много всего бывает спрятано в DOM. В сравнении с jQuery, обычное API DOM ограничено в функциональности при выборке родительских а также братских/сестринских элементов. Так или иначе, в вашем кармане есть множество различных способов, чтобы сверху донизу пройтись по DOM-дереву.

    8. Обработка массивов

    Некоторые из служебных методов, которые обеспечивает jQuery, теперь доступны с появлением ES5-стандартов. Для множественных ассоциативных массивов мы можем использовать forEach и map вместо их jQuery-аналогов each() и map(). Вот только будьте внимательны, есть между ними определённые отличия в аргументах и в возвращаемом по умолчанию значении this.

    9. Анимация

    Благодаря jQuery, вы фактически можете анимировать всё, что угодно и как угодно, это поистине мощный инструмент! В случае когда вам нужно создать сложную анимацию для вашего проекта, без jQuery вам просто не обойтись.

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

    10. AJAX

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

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

    Но! Вам не нужно подключать всю jQuery-библиотеку только ради AJAX. Вы можете использовать одну из доступных лёгких библиотек. Вот как можно писать AJAX-запросы, используя маленькую библиотеку запросов

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

    В то же время не стоит изобретать колесо, ведь никто не выиграет от того, что вы будете пытаться написать самостоятельно сложный код, который вполне может предложить jQuery. Также не стоит жертвовать своим временем и трудиться в поте лица, дабы сэкономить пару байтов трафика.

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

    Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

    P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

    Понравился материал и хотите отблагодарить?
    Просто поделитесь с друзьями и коллегами!

    Добавить комментарий