Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

14 полезных техник, советов и передовых методик по jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Если у jQuery и есть недостаток, так это то, что для начала работы с ней необходим чрезвычайно низкий уровень знаний, почему она и привлекает тех, у кого нет и чуточки знаний по JavaScript. Что ж, с одной стороны, это здорово. Однако, с другой, в результате этого появляется куски, честно говоря, ужасного кода (некоторые из которых – на моей совести!).

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


1. Методы возвращают объект jQuery

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

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

Мы «кэшируем» расположение элемента someDiv для того, чтобы сократить количество обходов DOM для получения этого элемента до одного.

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

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


2. Выбор селектора для поиска

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

Одно из них – использование метода find() когда это возможно. Ключевой момент при этом – не провоцируйте jQuery на использование программного механизма Sizzle, если в этом нет необходимости. Безусловно, будут моменты, когда это будет невозможно – и это нормально; но если вам не нужны дополнительные издержки, избегайте этого.

Последние версии современных браузеров поддерживают метод QuerySelectorAll, в который можно передавать CSS-подобные селекторы без необходимости в jQuery. jQuery также пользуется этой функцией.

Однако, более ранние версии браузеров – такие, как IE6/IE7 – по понятным причинам не поддерживают его. Это означает, что при использовании таких более сложных, чем обычно, селекторов происходит запуск программного механизма Sizzle jQuery, который, при всей своей замечательности, служит причиной дополнительных издержек.

Sizzle – чудесная глыба кода, которую я, скорее всего, никогда не пойму. Однако, если сформулировать принцип его работы одним предложением, то так: происходит превращение вашего селектора в «массив», элементами которого являются компоненты вашего селектора.

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

Таким образом, когда это возможно:

  • Используйте максимально простые селекторы
  • Пользуйтесь методом find(). При этом вместо использования Sizzle мы можем продолжить пользоваться собственными функциями браузера.
  • При использовании Sizzle оптимизируйте концевую часть селектора справа насколько это возможно.

Как насчет альтернативы – использования контекста?

Также имеется возможность добавления контекста в ваши селекторы, например, так:

Этот код инструктирует jQuery собрать коллекцию всех элементов с классом someElements, которые являются дочерними элементами элемента с id someContainer. Использование контекста – хороший способ ограничить число обходов DOM, хотя скрытно при этом jQuery использует метод find.

Доказательство


3. Не злоупотребляйте $(this)

Если вы не знаете разнообразные свойства и методы DOM, то запросто можете начать излишне использовать объект jQuery без необходимости. Например:

Если мы используем объект jQuery только для получения атрибута id якоря, то такой подход – расточительный. Лучше воспользоваться «чистым» JavaScript.

Обратите, пожалуйста, внимание, что имеется три атрибута, к которым всегда необходимо обращаться при помощи jQuery: "src" "href" и "style". Для доступа к этим атрибутам в старых версиях IE необходимо использовать getAttribute.

Доказательство

Многочисленные объекты jQuery

Еще хуже, если вы много раз запрашиваете элементы DOM и создаете множество объектов jQuery.

Надеюсь, что вам уже понятно, насколько неэффективен этот код. Если нет – ничего страшного; вы – в процессе обучения. Решение – либо реализовать сцепление, либо «поместить в кэш» расположение #elem.


4. Краткая форма метода Ready в jQuery

Отследить момент, когда документ готов к проведению манипуляций, при помощи jQuery очень просто.

Однако, возможно, что вы встречали другую более сбивающую с толку обертывающую функцию.

Хотя последнюю сложнее понять, два вышеуказанных фрагмента идентичны. Не верите? Давайте просто проверим исходный код jQuery.

rootjQuery – это просто ссылка на корневой компонент – jQuery(document). При передаче селектора в функцию jQuery будет произведена проверка его типа: string, tag, id, function и т.д. Если была передана функция, то jQuery затем вызовет свой метод ready() и передаст вашу анонимную функцию в качестве селектора.


5. Обезопасьте свой код

При разработке кода для распространения всегда необходимо помнить о том, что важно обезопасить его от какого-либо возможного конфликта имен. Что бы случилось, если в каких-то скриптах, подключенных после вашего, также имелась бы функция $? Куча неприятностей!

Решение – либо вызывать функцию jQuery noConflict(), либо располагать ваш код внутри функции-выражения  немедленного вызова и затем передавать в нее объект jQuery.

Способ 1: NoConflict

Будьте осторожны с использованием этого метода и старайтесь не использовать его, если планируется распространение вашего кода. Это хорошенько обескуражит пользователя вашего скрипта! :)

Способ 2: передача jQuery

За счет последней пары круглых скобок (function(){}()) функция  вызывается автоматически. Однако, при вызове функции мы также передаем jQuery, к которому затем обращаемся при помощи $.

Способ 3: передача $ при помощи метода Ready


6. Проявите смекалку

Помните, jQuery – это просто код на JavaScript. Не думайте, что jQuery сможет компенсировать недостатки вашего кода. :)

Это означает, что необходимость оптимизации таких  моментов, как операторы for в JavaScript, справедлива и для метода each jQuery. А как же иначе? Это всего лишь вспомогательный метод, в котором позже скрытно создается оператор for.

Ужасный вариант использования

  1. Происходит поиск anotherDiv при каждой итерации
  2. Дважды происходит обращение к свойству innerHTML
  3. Происходит создание нового объекта jQuery, и все для того, чтобы получить текстовое содержимое элемента.

Более удачный вариант

При этом единственным действием, которое мы выполняем внутри метода each (for) является добавление нового значения в массив ... в отличие от обращения к DOM, получения значения свойства innerHTML элемента дважды и т.д.

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

Фрагменты документа

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

Ключевой момент здесь – это то, что имеется множество способов решения простых задач вроде этой, и каждый имеет свои собственные преимущества по производительности при работе в различных браузерах. По мере того, как вы все больше работаете с jQuery и узнаете JavaScript, вы можете обнаружить, что вы все чаще обращаетесь к нативным (* описанным в модели DOM и стандартах HTML) свойствам и методам JavaScript. И если это так, то здорово!

jQuery предоставляет удивительный уровень абстракции, которым вам обязательно стоит воспользоваться, однако это не означает, что вы обязаны использовать ее методы. Например, в примере выше с фрагментом мы использовали метод jQuery each. Если вы предпочитаете использовать вместо него циклы  for или while, то вперед!

Несмотря на вышесказанное, помните, что команда jQuery хорошенько оптимизировала эту библиотеку. Споры насчет преимуществ метода each() или нативного цикла for нелепы и не выдерживают никакой критики. Если вы используете в вашем проекте jQuery, то сэкономьте свое время и воспользуйтесь ее вспомогательными методами. Именно для этого они в ней и имеются! :)


7. Методы AJAX

Если вы – новичок в jQuery, то различные методы AJAX, которые нам предоставляет библиотека, могут показаться пугающими; хотя это не так. В действительности, большинство из них – просто вспомогательные методы, в основе работы которых лежит $.ajax.

  • get
  • getJSON
  • post
  • ajax

В качестве примера давайте рассмотрим getJSON, при помощи которого мы можем получить документы в формате JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript).

Сначала в этом методе скрытно вызывается $.get.

Затем переданные данные собираются в $.get, и происходит вызов «главного» (своего рода) метода –  $.ajax.

Наконец, $.ajax выполняет кучу работы для предоставления нам возможности совершения асинхронных вызовов во всех браузерах!

Это означает, что вы можете также непосредственно и исключительно использовать метод $.ajax для выполнения всех ваших запросов AJAX. Остальные методы – просто обертки для него. Так что, если захотите, то исключите посредников. Между этими подходами нет значительной разницы.

Клевый способ

Чуточку более эффективный


8. Доступ к нативным свойствам и методам

Что ж, вы выучили кое-что по JavaScript и знаете, например, что при работе с якорями вы можете получить значения атрибутов непосредственно:

Единственная проблема заключается в том, что это не сработает, если вы обращаетесь к элементам DOM при помощи jQuery, верно? Конечно же, нет.

Так не сработает.

Так что, если вам необходимо получить доступ к атрибуту href (или любому другому нативному свойству или методу, коли на то пошло), то у вас имеется несколько вариантов.

Метод get особо полезен, поскольку может превратить вашу выборку jQuery в массив.


9. Обнаруживаем запросы ajax при помощи PHP

Без сомнения, в большинстве проектов мы не можем рассчитывать только на JavaScript для выполнения, скажем, проверки правильности данных, или запросы ajax. Что если у клиента отключен JavaScript? Именно на этот случай обычный способ – проверить, был ли выполнен запрос AJAX, при помощи используемого вами на серверной части языка.

При помощи jQuery это очень просто выполнить: путем добавления заголовка в методе $.ajax.

Установив значение этого заголовка, теперь мы можем использовать PHP (или любой другой язык) для проверки наличия заголовка и потом действовать соответственно. В данном случае мы проверяем значение $_SERVER['HTTP_X_REQUESTED_WITH'].

Обертка


10. jQuery и $

Задумывались когда-либо, почему/каким образом вы можете использовать jQuery и $ на равных основаниях? Чтобы ответить, давайте посмотрим на исходники jQuery и глянем на самую нижнюю часть. Там вы увидите:

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

Чтобы это исправить, jQuery подсоединяется к глобальному объекту window, и, по ходу дела, также создается псевдоним – $.


11. Условная загрузка jQuery

HTML5 Boilerplate (* шаблон для клиентской части) предлагает находчивый однострочник (* программа, эффект которой значительно больше, чем можно было бы предположить по её размеру) для загрузки локальной копии jQuery, если по какой-то причине выбранная вами CDN (* content delivery network – сеть доставки (распространения) контента) недоступна.

Выразить код выше словами можно так: если значением window.jQuery является undefined, то это значит, что возникла проблема со скачиванием скрипта с CDN. В этом случае перейти к исполнению правой части оператора && и вставить скрипт со ссылкой на локальную версию jQuery.


12. Фильтры jQuery

Обратите внимание: jQuery.expr[':'] – просто краткое название для jQuery.expr.filters.


13. Возможность передачи единственной функции для метода Hover

Согласно jQuery 1.4 теперь мы можем передавать в метод hover только одну функцию. Ранее необходимо было задавать методы как для события mouseenter, так и для mouseleave.

Ранее

Сейчас

Обратите внимание, что это – не новый метод (* скорее – усовершенствованный старый). Во многих случаях вам по-прежнему необходимо будет передавать две функции в метод hover, и эта возможность сохранилась. Однако, если вам всего лишь необходимо переключить видимость элементов (* при помощи toggle()) (или что-то в этом роде), то за счет передачи единственной анонимной функции вы сократите код на какое-то количество символов.


14. Передача объекта с атрибутами

Согласно jQuery 1.4 теперь мы можем передавать объект в качестве второго параметра функции jQuery. Это оказывается полезным, если нам необходимо вставить новые элементы в DOM. Например:

Ранее

После

За счет этого мы не только сокращаем код, но и делаем его понятнее. Помимо атрибутов элементов мы можем даже передать специфичные для jQuery атрибуты и события, например, click или text.


Спасибо за проявленный интерес!
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.