7 полезных советов для улучшения jquery кода


Содержание
Илон Маск рекомендует:  Функции bios int 1ch пользовательское прерывание по таймеру

Используем jQuery с умом, приемы использования

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

Загрузка jQuery

  1. Всегда используйте CDN при подключении jQuery библиотек. Данная опция позволяет с большой вероятностью подгружать jQuery уже из кеш памяти браузера, самые популярные CDN в России для jQuery это у Яндекса и Googl’a

jQuery переменные

  1. Для удобства все переменные используемые вами следует вынести в кеш память используйте префикс $
  2. Для дальнейшего удобства, объявляйте jQuery объекты один раз.

Селекторы

  1. По возможности используйте >document.getElementById() . Кстати в jQuery можно написать и так $(document.getElementById(‘elementId’)) при таком варианте, не тратится время на парсинг названия, но это уже макро оптимизация.
  2. При выборке по классу, не указывайте вид элемента в вашем селекторе. Сравнение результатов.

Избегайте выборки по нескольким >

Манипуляции с DOM

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

p class = «prettyprint» style = «color: #333333;» > // Плохо
var $myList = $ ( «#list» ) ;
for ( var i = 0 ; i 10000 ; i ++ ) <
$myList. append ( «

  • » + i + » » ) ;
    > p >
    // Хорошо
    var $myList = $ ( «#list» ) ;
    var list = «» ;
    for ( var i = 0 ; i 10000 ; i ++ ) <
    list += «
  • » + i + » » ;
    >
    $myList. html ( list ) ;

    // Еще быстрее
    var array = [ ] ;
    for ( var i = 0 ; i 10000 ; i ++ ) <
    array [ i ] = »
    » + i + » » ;
    >
    $myList. html ( array. join ( » ) ) ;

    События

    1. Используйте один обработчик события $(document).ready(), это позволит лучше и быстрее производить отладку кода.
    2. Не используйте анонимные функции для событий. Это может плохо отразиться при отладке кода на jQuery. Подробнее.
    1. Избегайте использования .getJson() или .get() , используйте $.ajax() для получения данных, их парсинг уже используется внутри метода.
    2. Не используйте http запросы у сайтов с https протоколом.
    3. Не используйте URL строку для передачи параметров. Указывайте все параметры в передаваемом объекте.

    Эффекты и анимация

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

    2. Для скрытия и раскрытия используйте функции .slideUp() и .slideDown() .
    3. Для увеличения скорости анимаций используйте параметры fast и slow, а также значением в миллисекундах. Нормальная скорость анимации 400 мс.

    Плагины

    1. Постоянно проверяйте совместимость плагинов с текущей версией разработки. Своевременно обновляйте плагины до актуальных версий. Следите за обновлениями от разработчиков.
    2. Заранее планируйте и проверяйте совместимость скриптов перед разработкой.
    3. Используемый код по множеству раз оформляйте в отдельные jQuery плагины. Посмотреть шаблон пример кода для плагина jquery можно по ссылке.

    Последовательность вызовов

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

      Используйте цепочки вызовов для манипулирования объектами

    Какой лучший способ добавить улучшения jQuery на сайт?

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

    До сих пор я делал нечто похожее на следующее:

    Тем не менее, с тех пор я видел макеты файлов JavaScript, подобные этим:

    Лучше ли расширять jQuery и назначать методы селектору, как во втором примере? Или все еще можно определить отдельные функции в качестве первого примера?

    Это очень многое зависит (всеобъемлющий ответ!). Если часть функциональности имеет смысл как плагин, т.е. может быть повторно использована на вашем сайте различными способами, то сделайте ее плагином. Точно так же, если функция полезна повсеместно, например функция разбора даты, сделайте ее функцией полезности.

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

    объем
    Если функция должна находиться в области видимости, которая делает ее доступной для функций в других областях, сделайте это так. Если это не так, не надо. Который ведет на

    загрязнение
    старайтесь не загрязнять глобальное пространство имен / объект множеством различных функций. Организуйте свой код в связанные функции, используя объектные литералы, так что для глобального объекта создается только одно свойство, содержащее объекты со свойствами, содержащими связанные функции. Например,

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

    Нужна помощь для улучшения написания кода jquery

    1 Cool [2014-07-04 14:56:00]

    Я новичок в CSS и JQuery. Я разработал некоторые страницы, используя Html, CSS и JQuery.

    Я сделал несколько тегов div, чтобы выполнить какое-то действие, я сделал код jquery, как это, в соответствии с моим другим тегом div.

    Код Jquery

    Код HTML

    Как и я, я взял 8 строк, поэтому я использовал 8 div, как four_page-table1-leftline2,3,4,5,6,7,8.

    Подобно этой 3 нисходящей линии, downline2, downline3. По тому же самому другому, что я сделал.

    И я взял CSS и много тегов div для вышеупомянутой функции jquery. Все работает нормально, но то, что я пытаюсь сделать, это то, что у меня много div, поэтому я взял много функций jquery, есть ли способ уменьшить приведенный выше код.

    Я думаю, что я собираюсь сделать более длительный процесс. Есть ли какое-либо решение для такого рода проблем?

    Крутые и полезные советы, хитрости и решения jQuery

    jQuery – это новый вид библиотеки JavaScript . Это быстрая и лаконичная библиотека JavaScript, которая упрощает обход документов HTML, обработку событий, анимацию и взаимодействие Ajax для быстрой веб-разработки . JQuery разработан, чтобы изменить способ написания JavaScript.

    Использование jQuery library растет и растет (только что выпустил jQuery 3.3.1), все больше и больше людей используют эту полезную библиотеку javascript.

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

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

    В jQuery есть много очень полезных плагинов, которые могут помочь вам практически с чем угодно, но есть пара плагинов, которые не настолько умны в использовании, почему?


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

    Используем jQuery. 15 советов.

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

    1. Используйте самую свежую версию jQuery.

    Использование инновации, которые появляются в проекте jQuery, является одним из самых простых способов улучшить производительность вашего сайта. Каждая новая версия библиотеки содержит новые оптимизации кода и исправления ошибок. Весь процесс улучшения сводится к элементарной замене содержания тега script .

    Вы можете получать библиотеку jQuery напрямую с сервера Google, который организует бесплатное хранилище CDN для различных библиотек JavaScript.

    Последний пример будет включать самую свежую версию jQuery 1.6.x автоматически, но учтите, что она кэшируется только на один час.

    2. Делайте селекторы проще.

    До недавнего времени получение элементов DOM в jQuery было достаточно сложным процессом, связанным с разбором строки селектора, циклом JavaScript и встроенными функциями API (такими как getElementById() , getElementsByTagName() и getElementsByClassName() ). Но теперь все браузеры поддерживают функцию querySelectorAll() , которая воспринимает селекторы CSS, что существенно улучшает производительность.

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

    Выбор по id — самый быстрый вариант. Если вам нужно выбрать класс, предварите его имя тегом – $(‘li.selected’) . Такая оптимизация существенно влияет на процессы в старых браузерах и мобильных устройствах.

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

    Еще один момент, о котором следует помнить, заключается в том, что jQuery предоставляет вам большой набор дополнительных селекторов (таких как :visible , :hidden , :animated ), которые не являются селекторами CSS. В результате, если вы используете их, то библиотека не задействует функцию querySelectorAll() . Чтобы оптимизировать процесс следует сначала выбрать элементы, а затем фильтровать их:

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

    3. Объекты jQuery как массивы.

    Результатом использования селекторов является объект jQuery. Но с ним можно работать как с массивом с помощью индекса элементов и их длины.

    Если вопрос производительности вас беспокоит, используйте простые циклы for или while вместо $.each() .

    Проверка длины также является методом определения наличия в коллекции элементов.

    4. Свойство selector.

    jQuery предоставляет свойство, которое используется для начала цепочки.

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

    5. Создаем пустой объект jQuery.

    Иногда нужно создать пустой объект и заполнить его в дальнейшем с помощью метода add().

    Такой подход является основой для метода quickEach(), который можно использовать в качестве альтернативы стандартному each() .

    6. Собственный фильтр для селекторов. Выбираем случайный элемент.

    Вы можете создать свой собственный фильтр для селекторов. Нужно просто добавить новую функцию к объекту $.expr[‘:’] . Ниже приводится код для случайного выбора элемента:

    7. Используем крючки CSS.

    API крючков CSS дает разработчику возможность получать и устанавливать определенные значения CSS. Можно скрывать специфическую реализацию свойств в браузерах и использовать единый интерфейс для доступа к определенным свойствам.

    А особенно хорошо, что уже имеется богатая библиотека поддерживаемых крючков CSS, которую можно использовать в своих проектах.

    8. Используем пользовательскую функцию перехода в анимациях.

    Вероятно, вы знаете плагин jQuery Easing – он добавляет эффекты к анимациям. Единственным недостатком является добавление еще одного файла JavaScript при загрузке документа. Но вы можете сделать простую копию эффекта, который вам нужен, и добавить его к объекту jQuery.easing :

    9. $.proxy()

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

    Нужно скрывать панель при нажатии кнопки. Пробуем сделать код:

    В результате имеем проблему — исчезает кнопка, а не панель. С помощью $.proxy можно сделать так:

    Теперь все выполняется так, как нужно. Функция $.proxy получает два аргумента – оригинальную функцию и контекст. Она возвращает новую функцию, в которой значение this соответствует контексту.

    10. Определяйте вес вашей страницы.

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

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


    11. Сделайте ваш код плагином jQuery.

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

    Создание плагин jQuery очень простой процесс:

    12. Устанавливайте глобальные функции и значения для AJAX по умолчанию.

    При работе с запросами AJAX в вашем приложении часто требуется выводить индикацию о прогрессе процесса. Обычно отображается анимация загрузки или затемняющий слой. Управление индикатором в каждом вызове $.get или $.post может быстро утомить.

    Лучшим решением будет установить набор глобальных значений и функций AJAX по умолчанию с использованием методов jQuery.

    13. Используйте для анимаций delay().

    Связывание анимационных эффектов в цепочки является мощным инструментом jQuery. Вы также можете вставлять задержку между анимациями.

    14. Используйте атрибут HTML5 data

    Атрибут HTML5 data предназначен для простого включения данных в веб страницу. Он удобен для обмена данными между сервером и клиентской частью, когда требуется вывод из блока

    40+ полезных скриптов всплывающих подсказок для CSS, JavaScript и jQuery

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

    Balloon.css — Balloon — это библиотека CSS, состоящая из SasS и LESS и позволяющая отобразить интерактивную подсказку. Содержимое и положение всплывающей подсказки настраиваются через атрибут data. Вы можете показать всплывающую подсказку слева, справа или слева направо. Вы даже можете добавить эмоджи к контенту. Balloon.css можно установить через NPM и загрузить с CDNJS.

    Simptip — сделано с помощью SasS, позволяющим перенастроить и перекомпилировать код в соответствии с вашими требованиями. Позиция и содержимое подсказки настраиваются с помощью имени класса и атрибута tooltip. Simptip доступен в виде пакета NPM, Yarn и Bower.

    Hint.css — одна из популярных библиотек CSS для отображения всплывающей подсказки, Hint.css используется многими популярными веб-сайтами, такими как Fiverr, Webflow и Tridiv. В отличие от двух других библиотек CSS, Hint.css использует атрибут aria-label. Вы можете настроить размер и цвет с помощью имен классов с использованием методологии BEM. Hint.css доступен на NPM, Bower и CDNJS.

    Microtip — еще одна потрясающая библиотека CSS для создания всплывающей подсказки. Microtip использует aria-label для хранения содержимого всплывающей подсказки и атрибут data для настройки размера и положения всплывающей подсказки.

    Скрипт использует переменную CSS, которая позволяет настраивать всплывающую подсказку с помощью простого файла CSS. Переменные CSS уже поддерживаются во многих веб-и мобильных браузерах. Microtip доступен на NPM, Yarn и CDN UNPkg.

    Wenk– весит всего 733 байт. Суперлегкая библиотека, написанная в суперсовременном CSS с использованием CSSNext, LESS и SCSS, позволяет настраивать и перекомпилировать стили так, как вам нравится. Wenk можно загрузить с NPM, Yarn и таких бесплатных CDN-сервисов, как rawgit.com и unpkg.com.

    Tooltippy — другая легкая библиотека CSS размером около 1 КБ. Tooltippy включает в себя несколько готовых тем для стилизации всплывающей подсказки. Она написана с помощью препроцессора CSS под названием Stylus.

    ElegantTips — эта библиотека поставляется с несколькими предварительно созданными темами, которые можно изменить с предоставленными именами классов. В отличие от других библиотек, которые полагаются на данные HTML5 или атрибут aria-label, ElegantTips требует добавления дополнительного элемента для создания всплывающей подсказки. Это позволяет вам добавить буквально любой контент в подсказку кроме простого текста.

    Tootik — эта библиотека CSS предоставляет не только стили в формате CSS, LESS и SasS, а также простой в использовании графический интерфейс для настройки всплывающей подсказки. Вы можете просто скопировать и вставить HTML-код, сгенерированный этим инструментом. Это так просто.

    VanillaJS

    TippyJS – работающая на Popper.js, TippyJS поставляется с множеством опций для настройки всплывающей подсказки. Вы можете настроить анимацию, стрелку всплывающей подсказки, ширину, размер, тему и многое другое. Скрипт также предоставляет функции обратного вызова, с помощью которых можно выполнить функцию, когда всплывающая подсказка показана и скрыта. Эти функции делают TippyJS одной из самых мощных библиотек JavaScript в нашем списке скриптов для создания всплывающей подсказки.

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

    Bubb — скрипт хорошо подходит для продвинутых пользователей JavaScript. Используя обширные API-интерфейсы, помимо отображения простого текста, вы можете программно добавить более сложный HTML-контент во всплывающую подсказку. Это довольно круто; вы можете обратиться к Документам к примерам.

    Popper — содержит техническую абстракцию для создания чего-то, что появляется, как всплывающая подсказка, всплывающее окно и выпадающие списки. TippyJS использует его в качестве основы библиотеки, кроме того скрипт используется известными именами в Интернете, такими как Bootstrap, Microsoft и Atlassian.

    YY Tooltip — в отличие от других библиотек, YY Tooltip не требует добавления элементов или атрибутов HTML. Она полностью работает с JavaScript, а контент, положение и цвета определены в объекте, а не в элементе HTML. Идеально подходит для использования с полным веб-приложением JavaScript.

    Position.js — еще одна отличная библиотека JavaScript для создания всплывающих подсказок, Position.js предоставляет графический интерфейс для настройки функции и просто копирует, а затем вставляет созданный там код. Position.js можно использовать в сочетании с React.js или Vue.js.

    Bezet Tooltip — эта библиотека предоставляет 14 вариантов отображения всплывающей подсказки; например, справа, слева, снизу, слева в центр, снизу в центр и т. д. Кроме того, она также достаточно умна, чтобы могла отрегулировать положение всплывающей подсказки на основе доступного пространства вокруг самой подсказки.

    MouseTip — эта библиотека JavaScrtipt создаст всплывающую подсказку, которая будет двигаться вместе с курсором. Всплывающая подсказка настраивается с нестандартным атрибутом mousetip вместо использования атрибута data в HTML5. Mousetip доступен как модуль NPM.

    Internetips — подобно MousetTip, всплывающая подсказка, генерируемая этой библиотекой, следует за положением курсора. Все настроено через объект JavaScript вместо HTML, а атрибуты также созданы для современных браузеров. Скрипт легкий и быстрый.

    MTip — библиотека JavaScript для всплывающих подсказок с отличной совместимостью с браузером. Она совместима с IE8, полностью настраиваемая с помощью параметров, и вы можете добавить подсказку к любому элементу даже на img (элемент изображения).

    Bubblesee — легкая библиотека JavaScript, которая обеспечивает прямую функциональность «подсказки». Легко использует библиотеку JavaScript без сложных опций для настройки вывода. Файл Sass предоставляется, если вы хотите изменить внешний вид всплывающей подсказки.

    Tipfy — построенный с использованием современного синтаксиса JavaScript, ES6, Tipfy имеет размер всего 2 КБ. Библиотека предоставляет две версии файлов: tipfy.min.js, обеспечивающий сценарий с современным синтаксисом ES6 и tipfy.es5.min.js, если вам нужна совместимость со старыми браузерами. Скрипт использует атрибут data для настройки всплывающей подсказки; Например, data-tipfy-side используется для установки направления всплывающей подсказки, а использования атрибута data-tipfy-text для добавления содержимого всплывающей подсказки.

    JQuery

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

    Protip — еще один расширенный плагин jQuery, Protip поддерживает 49 позиций, HTML для содержимого всплывающей подсказки, поддержка иконок, пользовательские обратные вызовы и многое другое. Protip предоставляет графический интерфейс, позволяющий легко настраивать всплывающую подсказку.

    PowerTip — этот плагин jQuery также предлагает опции и API-интерфейсы, предоставляя разработчикам ряд различных способов реализации всплывающих подсказок. Он поддерживает клавиатурную навигацию, чтобы всплывающее окно отображалось при навигации элементов с помощью клавиатуры Tab. PowereTip доступен как модуль NPM. Он может использоваться с RequireJS и Browserify.

    Accessible Aria Tooltip — плагин jQuery со встроенной функцией специальных возможностей, всплывающая подсказка предназначена для отображения диалогового окна с заголовком, многострочным текстом и кнопкой закрытия.


    TipsJS — простой плагин jQuery, но он имеет довольно отличительные особенности. Содержимое всплывающей подсказки задается атрибутом data-tooltip. Более того, вы можете также обернуть контент специальными символами для форматирования содержимого, подобного форматированию Markdown. Вы можете использовать *, чтобы сделать содержание полужирным,

    для курсивом и ^ для заголовка.

    Dark Tooltip — эта библиотека предоставляет некоторые действительно полезные функции для включения всплывающей подсказки. Например, вы можете добавить кнопку подтверждения — «Да» и «Нет», уменьшить фон во время отображения всплывающей подсказки и добавить элементы HTML в контент.

    Aria Tooltip — еще одна подсказка со встроенной функцией доступности, этот плагин jQuery совместим с WAI-ARIA 1.1. Он реагирует таким образом, что вы можете предоставить различные конфигурации для разных размеров видового экрана. Aria Tooltip доступен как модуль NPM с именем t-aria-tooltip.

    Toolbar.js. — в то время как другой плагин jQuery может отображать только простой текст или HTML-контент во всплывающей подсказке, этот плагин jQuery создает панель инструментов. Всплывающая подсказка будет содержать две или более ссылки с иконкой, которая обычно выполняет действие при нажатии, как и любая панель инструментов.

    VueJS

    V-Tooltip — это компонент Vue.js, работающий от Popper.js. Он предоставляет новую директиву с именем v-tooltip, которая может быть добавлена к любому элементу для создания всплывающей подсказки. V-tooltip может содержать контент всплывающей подсказки или параметры. Помимо пользовательской директивы v-tooltip вы также можете добавить всплывающую подсказку с помощью компонента v-popover. С помощью этого компонента вы можете добавить более сложный контент во всплывающую подсказку с компонентом Vue.js или HTML.

    Vue-Bulma Tooltip — компонент Vue.js для создания всплывающей подсказки, основанной на платформе UML Bulma. Эта библиотека является частью Vue Bulma. Но компонент tooltip доступен как модуль NPM с именем vue-bulma-tooltip, который вы можете использовать как автономный компонент.

    Vue-Directive-Tooltip — в целом он похож на компонент V-Tooltip на основе Popper.js и предоставляет ту же директиву, что и v-tooltip. Однако он не обеспечивает компонент v-popover.

    Vue-Tippy — эта библиотека оборачивает Tippy.js в компонент Vue.js. Она имеет настраиваемую директиву Vue.js, называемую v-tippy, которая работает как атрибут HTML; вы можете добавить контент для всплывающей подсказки или параметры для ее настройки. Скрипт также отображает пользовательский компонент Vue.js в содержимом всплывающей подсказки с помощью параметра html.

    VueJS-Popover — пользовательский Vue.js с настраиваемой директивой, называемой v-popover, и двумя настраиваемыми компонентами, а именно

    и , предоставляющими разработчикам возможность добавлять всплывающие подсказки в приложении Vue.js.

    Vue-Hint — плагин Vue.js, который распаковыввет Hint.css. В плагине имеется директива v-hint-css для добавления всплывающей подсказки. Он предоставляет тот же набор параметров, что и Hint.css, поэтому вы можете добавить их как объект JavaScript или модификатор Vue.js.

    ReactJS

    React Joyride — компонент React, чтобы отобразить набор подсказок, которые помогут новым пользователям ознакомиться с вашим новым приложением.

    React Floater — эта библиотека оборачивает Popper.js в компонент React с именем Floater, поэтому он обладает такими же замечательными функциями, как и у Floater. Вы можете добавить всплывающие подсказки и всплывающие окна, и вы также можете играть с этим компонентом через эту песочницу.

    React Autotip — простой компонент React с функцией автоматического позиционирования, React Autotip автоматически отрегулирует положение всплывающей подсказки при изменении доступного пространства вокруг него.

    React Tippy — построен на базе Tippy.js и Popover.js. В этой библиотеке представлен компонент Tooltip, который можно включить в приложение React.

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

    Больше

    Ember Tooltips — компонент Ember.js для создания всплывающих подсказок, он построен на базе Popper.js. Компонент также разработан с учетом доступности и продолжает улучшаться, чтобы соответствовать требованиям 508 по данному вопросу.

    D3 Tip — плагин D3.js. D3.js — это библиотека JavaScript для визуализации данных, такая как схемы, карты, диаграммы и т. д. Этот плагин позволяет вам показывать всплывающую подсказку поверх этих данных.

    Всем успешной работы!

    PhpBuilder.ru

    ваш путеводитель по веб программированию

    Главное меню

    Уроки по PHP

    Полезные советы и хитрости jQuery

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

    1. Подсказки по jQuery

    Прежде всего, неплохо иметь подсказки в виде справочного материала. Я нашёл три такие в сети:

    Подсказка с ColorCharge

    Подсказка из блога Gscottolson

    Подсказка из блога From Far East

    2. Сокращённый вариант $(document).ready

    Это отличный совет! Вместо того, чтобы писать:

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

    3. Открыть в новом окне

    Атрибут target отсутствует в STRICT-версии стандарта W3C. Поэтому, придётся использовать атрибут rel и немного кода jQuery, чтобы добавлять атрибут target динамически, и, тем самым, избежать ошибок при валидации. Это один из моих любимых примеров. Он так прост и при этом отлично справляется с работой.

    4. Сделать элемент списка кликабельным


    Эта хитрость очень полезна, когда вы используете маркированные списки в качестве меню. Теперь, когда вы нажмёте на область элемента списка (вне ссылки), скрипт найдёт нужный адрес и перейдёт по соответствующей ссылке:

    5. Переключиться на другую CSS-таблицу

    Вы хотите использовать различные дизайны сайта? Можете использовать следующий код для переключения используемых CSS-таблиц:

    6. Запретить нажатие правой кнопки

    Некоторые могут захотеть отключить нажатие правой кнопки или создать собственное контекстное меню. Так мы определим щелчок правой кнопкой:

    7. Получить координаты x и y курсора

    Этот скрипт отображает значения x и y позиции курсора:

    8. Отменить поведение по умолчанию

    Предположим, у нас есть длинная страница и ссылка, похожая на приведённую ниже, которая используется не как гиперссылка. При нажатии на такую ссылку, вы будете перемещены в начало страницы. Это происходит из-за того, что в атрибуте href указан символ #. Чтобы решить эту проблему, необходимо отменить поведение по умолчанию с помощью следующего кода:

    9. Кнопка возврата в начало страницы

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

    10. Колонки одинаковой высоты

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

    11. Создание собственного селектора

    Это более сложный пример.

    12. Масштабирование шрифтов

    Одна из наиболее популярных функций — возможность изменения размера шрифтов на странице. Я модифицировал скрипт с сайта shopdev.co.uk. Теперь в массиве можно указывать ID, классы или имена тегов, для которых будет доступно масштабирование.

    Коллекция советов и хитростей пополняется!

    Я продолжу обновлять статью, так что можете занести её в закладки — надеюсь, эти примеры помогут вам. Некоторые скрипты были изменены и стали более гибкими. Если вы знаете какие-либо советы или хитрости, которыми вы бы хотели поделиться, оставьте комментарий! Спасибо!

    Когда лучше НЕ использовать jQuery?

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

    По сути jquery стал не нужен так как он уже не слабо повлиял на само DOM API. Ну мол, очень много идей позаимстовалось и было улучшено. Правда в итоге скорее всего подключить jquery придется изза каких-то зависимостей, но не факт.

    Usefull 4 web developers

    Все что может пригодиться web разработчикам

    Закрепляем jQuery — 25 отличных советов

    Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

    Далее все написано от имени автора оригинальной статьи.

    Введение

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

    Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

    Содержание

    1. Загружайте фреймворк с Google Code
    2. Используйте «шпаргалку» (cheat sheet)
    3. Соединяйте все ваши скрипты и уменьшайте размер файла
    4. Используйте возможности Firebug для ведения логов
    5. Минимизируйте операции выборки в пользу кэширования
    6. Сводите манипуляции с DOM-деревом к минимуму
    7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
    8. Используйте «id» вместо классов, где это возможно
    9. Задайте контекст своим селекторам
    10. Используйте последовательности вызовов методов с умом
    11. Научитесь правильно использовать анимацию
    12. Научитесь назначать и делегировать события
    13. Используйте классы для сохранения состояния
    14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
    15. Пишите собственные селекторы
    16. Подготавливайте HTML и модифицируйте его, когда страница загружена
    17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
    18. Используйте служебные функции jQuery
    19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
    20. Как узнать что картинки загружены?
    21. Всегда используйте последнюю версию
    22. Как проверить, что элемент существует?
    23. Добавляйте класс «JS» в элемент «html»
    24. Возвращайте «false» для отмены поведения по-умолчанию
    25. Короткая запись для события готовности документа

    1. Загружайте фреймворк с Google Code

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

    Это имеет немаловажное значение. Как много сайтов выдают идентичные копии jQuery, которые не кэшируются? Это очень просто сделать…

    Или можно просто включить прямую ссылку, вроде этой…

    2. Используйте «шпаргалку» (cheat sheet)

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


    3. Соединяйте все ваши скрипты и уменьшайте размер файла

    Ну хорошо, это еще один совет в целом по JavaScript. Но любой большой проект, который вовсю использует jQuery, возможно использует множество плагинов (сайт автора использует localScroll, lightbox и preload), так что этот совет тут весьма кстати.

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

    Некоторые из плагинов уже могут быть минимализированы и упакованы, но нужно предусмотреть объединение оставшихся скриптов. Мне лично нравится Packer Dean’а Edwards’а.

    4. Используйте возможности Firebug для ведения логов

    Если вы до сих пор еще не поставили Firebug, срочно убейте себя опасной бритвой вы действительно должны это сделать. Помимо прочих очень крутых штук, как, к примеру, возможности анализа вашего трафика или поиска проблем с CSS, в Firebug’е есть отличные инструменты для «логирования» выполнения кода, что позволяет просто и быстро отлаживать скрипты.

    Мои любимые «фичи» — «console.info», которая позволяет выводить сообщения и переменные сразу на экран без использования alert-окошек, и «console.time», которая позволяет очень просто задать таймер для выбранного куска кода и посмотреть как долго выполняется именно этот кусок. И все это очень просто использовать.

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

    5. Минимизируйте операции выборки в пользу кэширования

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

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

    Это занимает 1066 миллисекунд на моем компьютере в Firefox 3 (только представьте, как это будет работать в IE6!), что очень и очень медленно по меркам JavaScript. Теперь посмотрим на другой пример, где мы используем селектор единожды:

    Это занимает всего 224 миллисекунды, что более, чем в 4 раза быстрее, при том, что мы поменяли всего лишь одну строчку.

    6. Сводите манипуляции с DOM-деревом к минимуму

    Мы можем сделать код из предыдущего совета даже еще быстрее, если минимизируем количество обращений к DOM для вставки. Операции вставки в DOM, такие, как .append(), .prepend(), after() и wrap() относительно ресурсоемки и злоупотребление ими может ухудшить положение дел.

    Все, что нам нужно, это использовать соединение строк, чтобы построить список и затем всего-лишь одной функцией вроде .html() быстренько добавить элемент в наш маркированный список. Посмотрим пример:

    У меня это заняло 216 миллисекунд, что чуть больше, чем 1/5 доля секунды, но если мы построим элементы списка в виде строк и затем используем метод .html() для вставки, вроде этого…

    Это занимает 185 миллисекунд, что не намного быстрее, но как-никак 31 миллисекундами меньше.

    7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM

    Окей, даже не спрашивайте меня, почему это работает (я уверен, что это сможет объяснить кто-нибудь поопытнее).

    В нашем последнем примере мы вставили 1000 элементов списка в маркированный список, используя метод .html().
    Если бы мы поместили их в тег «ul» до вставки и поместили бы готовый «ul» в другой тег (div), тогда мы бы успешно вставили только 1 тег вместо 1000, что, по всей видимости должно дать эффект. Вот как-то так…

    В этот раз, «на все про все» ушло не иначе, как 19 миллисекунд, что крайне существенное улучшение, производительность возросла более, чем в 50 раз по сравнению с первым примером.

    8. Используйте «id» вместо классов, где это возможно

    jQuery делает выборку DOM-элементов по классам такой же простой, какой в JavaScript является выборка элементов по «id», в результате чего многие используют классы куда более широко, нежели раньше. Однако, все еще гораздо лучше выбирать элементы по «id», так как jQuery использует для этого стандартный метод любого браузера (getElementById) и не проводит никаких дополнительных манипуляций с DOM, что позволяет достичь хорошей производительности. Насколько хорошей? Давайте проверим.

    Я использую предыдущий пример и изменю его таким образом, что каждый элемент «li» будет иметь уникальный класс, добавленный к нему. Затем я выберу в цикле все элементы (каждый по одному разу).

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

    В этот раз — всего 61 миллисекунду. Примерно в 100 раз быстрее.

    9. Задайте контекст своим селекторам

    По-умолчанию, когда вы используете селектор типа $(‘.myDiv’), произойдет обращение ко всему DOM-документу, что, в определенных случаях (например, при большой странице), может весьма существенно отразиться на производительности.

    Функция jQuery принимает второй параметр, когда производит выборка.

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

    Чтобы продемонстрировать это, снова возьмем пример из первого совета. Он создает маркированный список из 1000 элементов, каждый из которых имеет свой класс. Затем скрипт в цикле выбирает каждый элемент. Помните, что при выборке по классу, у нас заняло около 5 секунд, чтобы выбрать все 1000 элементов.

    Затем, я добавил контекст, чтобы jQuery использовал селектор только в пределах маркированного списка. Вроде этого:

    Это заняло 3818 миллисекунд, что само по себе все еще адски медленно, но это уже более, чем 25%-й прирост в скорости при минимальной модификации селектора.

    10. Используйте последовательности вызовов методов

    Одна из самых клевых фишек в jQuery — это возможность выстраивать последовательности вызовов методов. Например, если вы хотите поменять класс элемента:

    Скорее всего, вы выучили это в первые же 5 минут использования jQuery, но это еще не все. Во-первых, это прекрасно работает с переносами строк (поскольку jQuery — это все же JavaScript), что означает, что вы можете писать красивый код вроде этого:

    Использование последовательностей также само по себе помогает вам ограничить использование селекторов.

    Но и это еще не все. Скажем, вы хотите выполнить несколько функций на элементе, но одно из первых же применений изменило элемент каким-либо образом, например:


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

    Представим, что нам нужно покрасить все ячейки с классом «lastColumn» в синий. Поскольку мы использовали функцию find(), мы отфильтровали все ячейки которые не помечены классом «firstColumn», поэтому нам нужно повторно использовать селектор для получения элемента таблицы и мы не можем продолжить выстраивать последовательность сходу, верно? К счастью, в jQuery имеется функция end(), которая возвращает нас к предыдущей нетронутой выборке, так что можно продолжить нашу последовательность:

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

    11. Научитесь правильно использовать анимацию

    Когда я только начал использовать jQuery, я был в восторге от простоты в использовании встроенной анимации вроде slideDown() и fadeIn() для получения клевых эффектов. Очень просто пойти чуть дальше, поскольку метод jQuery animate() очень прост для использования и одновременно очень крут. Фактически, если посмотреть на исходники jQuery, можно увидеть, что все эти методы — эдакие мини-абстракции, частные случаи использования функции animate().

    Метод animate() просто берет любой CSS-стиль и плавно трансформирует его из одного значения в другое. Таким образом, можно поменять ширину, высоту, прозрачность, цвет фона, отступы, цвет, размер шрифта, да и вообще, все, что пожелается.

    Вот, к примеру, так вот просто сделать анимированное меню, пункты которого увеличиваются до 100 px в высоту при наведении мышкой:

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

    Если вы хотите, чтобы эффекты протекали одновременно, тогда просто укажите оба стиля в параметрах объекта и сделайте один вызов. Как-то вот так:

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

    12. Научитесь назначать и делегировать события

    С jQuery как нельзя просто обработчики события назначаются элементам DOM, что замечательно, но добавление чрезмерного числа обработчиков снижает производительность. Делегирование обработки событий позволяет добавлять меньше событий, «прослушиваемых» элементом при аналогичном с точки зрения функциональности результате. Лучший способ понять — увидеть:

    Простая функция, которая превращает ячейки таблицы в красные, когда вы кликаете на этих ячейках. Скажем, у вас есть небольшая таблица с 10 колонками и 50 рядами, но это значит, что уже 500 обработчиков события «ждут своего часа». Может быть, куда уместнее будет назначить только одно событие всей таблице, а затем, когда произошел клик по таблице, заставить обработчик определить, какая именно ячейка вызвала событие?

    Именно это и называется делегированием событий и это очень просто реализовать:

    ‘e’ содержит информацию о событии, включая элемент, на котором произошел клик. Все, что нам нужно сделать — проверить его и узнать, на какую ячейку нажал пользователь. Куда удобнее.

    У делегирования событий есть еще один мега-существенный бонус. Когда вы привязываете обработчик к набору элементов, он присоединяется к тем и только к тем элементам, которые были в этом наборе в момент назначения события. Если добавить новые элементы в DOM, которые вполне себе будут выбираться селектором, они не будут иметь обработчиков. Понимаете, к чему я клоню? Их придется назначать и переназначать постоянно, если элементы меняются.

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

    На момент написания статьи, автором использовалась версия 1.2.6, однако начиная с версии 1.3, в jQuery появился новый функционал, адресованный как раз проблеме переназначения событий — jQuery Event/live.

    13. Используйте классы для сохранения состояния

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

    А вот и пример. Мы хотим создать разворачивающееся меню. Когда мы нажимаем на кнопку, мы хотим, чтобы панель появилась со slideDown(), если она закрыта и наоборот — исчезла со slideUp(), если открыта. Начнем с HTML:

    Очень просто! Мы просто добавили дополнительный класс к элементу-обертке (div), который не имеет иной роли, кроме как сообщить нам состояние элемента. Так что, все что нам нужно — обработчик события «onclick», который производит slideUp() или slideDown() соответствующей панельки, когда кнопка нажата.

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

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

    14. Совсем круто — используйте встроенный в jQuery метод data() для сохранения состояния

    По определенным причинам, это не так хорошо документировано, но в jQuery имеется внутренний метод data(), который может быть использован для хранения информации в парах «ключ/значение», в соответствии с любым DOM-элементом. Хранение любых данных также просто, как вот это:

    Мы можем улучшить пример из прошлого совета. Мы используем тот же HTML (кроме класса «expanded») и используем функцию data().

    Я уверен, вы согласитесь, что это куда более кошерно �� Для дополнительной информации по data() и removeData(), смотрите эту страницу про jQuery internals.

    15. Пишите собственные селекторы

    jQuery содержит массу встроенных селекторов для выборки элементов по id, классу, тегу, атрибуту и многому другому. Но что делать, когда необходимо выбрать элементы по какому-либо другому критерию и у jQuery нет подходящего инструмента?

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

    До сих пор, лучший способ продемонстрировать это — пример:

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

    Я не буду здесь еще более детально рассматривать все это, но вы уже можете представить, насколько суперкрут такой инструмент и если порыскать в Гугле на тему «custom jquery selector», можно найти много интересного.

    16. Подготавливайте HTML и модифицируйте его, когда страница загружена

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

    Это пример того, какой может быть разметка формы, слегка модифицированная, чтобы проиллюстрировать наши задачи. Я уверен, вы согласитесь, что этот код ужасен и если у вас большая форма — вы закончите с неприлично длинной и, мягко говоря, некрасивой страничкой. Куда лучше было бы иметь что-то вроде этого в HTML:

    Все, что здесь нужно — немножко уличной магии jQuery, чтобы вернуть тот самый некрасивый HTML. Смотрим:

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


    17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO

    Еще один способ увеличить скорость загрузки страницы и очистить HTML, который просматривают поисковые роботы — это использовать так называемый «lazy loading» или говоря по-чукотски по-простому — отложенную загрузку целых частей, используя AJAX-запрос после того, как страница уже загружена. Пользователи смогут немедленно увидеть информацию, а поисковики — им и подавно, только информация и нужна.

    Мы использовали эту технику на нашем собственном сайте. Те фиолетовые кнопочки наверху страницы подгружают 3 формы, направления и карту Google, которые увеличили бы изначальный вес страницы вдвое. Так что мы просто поместили весь HTML в статичную страницу и использовали функцию load(), чтобы загрузить все это уже после полной загрузки документа. Делается вот так:

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

    18. Используйте служебные функции jQuery

    jQuery — это не только ослепительные эффекты. Создатель наделил его некоторыми действительно полезными методами, которые могут восполнить пробелы в репертуаре JavaScript:

    В частности, кросс-браузерная поддержка общих функций для работы с массивами (в IE7 нет даже метода indexOf()!). jQuery содержит методы для итерации, фильтрации, клонированию, соединению и удалению дубликатов из массивов.

    К другим труднореализуемым вещам в JavaScript относится, к примеру, задача, где нужно получить выбранный элемент из выпадающего списка. В старом добром JavaScript нам пришлось бы получить элемент «select», используя getElementById, получить дочерние элементы как массив и «пробежаться» по ним в итерации, проверяя каждый, был он выбран или нет. jQuery упрощает подобные дела:

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

    19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками

    Многие JavaScript-фреймворки используют символ «$» в качестве краткой записи и это может может вызвать непредсказуемый результат при попытке использования нескольких библиотек сразу, на одной страничке. К счастью, есть простое решение. Функция .noconflict() обеспечивает контроль «$» и дает возможность задать собственное имя переменной, например

    20. Как узнать что картинки загружены?

    Это еще одна из проблем, решение которой не так хорошо документировано, как хотелось бы и при этом достаточно распространена (в случаях разработки фото-галерей, «каруселей» и т. д.). Тем не менее, все просто.

    Все, что нужно — использовать метод .load() на элементе «img» и вызвать в нем (методе) callback-функцию. Следующие примеры заменяют значение атрибута «src» у картинки для подгрузки новых изображений и присоединяют простую функцию загрузки:

    Можете проверить, alert будет вызван, когда картинка загрузится.

    21. Всегда используйте последнюю версию

    jQuery постоянно развивается и John Resig, его создатель, день и ночь в поисках путей улучшения производительности.

    jQuery сейчас (на момент написания статьи — прим. пер.) в версии 1.2.6, но Джон уже раскрыл, что он работает над новым движком выборки — Sizzle, который увеличит скорость выборки, к примеру, в Firefox, в 4 раза. Так что, чем свежее — тем лучше.

    22. Как проверить, что элемент существует?

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

    Просто, но недостаточно очевидно.

    23. Добавляйте класс «JS» в элемент «html»

    Я узнал эту фишку от товарища Karl’а Swedberg’а, по чьим замечательным книгам я изучал jQuery.

    Недавно на одну из моих предыдущих статей он оставил комментарий об этом приеме и суть в следующем…

    В первую очередь, как только jQuery загрузится, мы используем его для добавления
    класса «JS» к тегу «html»:

    Поскольку, это случится, только когда JavaScript включен, вы можете использовать его для добавления CSS-стилей, которые работают только тогда, когда JavaScript работает:

    Это означает, что мы можем спрятать контент, когда JavaScript включен и затем использовать jQuery для того, чтобы показать его, когда необходимо (например, свернув некоторые панели и разворачивать их только по нажатию пользователем), в то время как те, у кого JavaScript отдыхает (включая поисковых роботов), увидят весь контент, поскольку он не скрыт. Я сам буду активно использовать это в будущем.

    Можете прочитать его полную статью здесь.

    24. Возвращайте «false» для отмены поведения по-умолчанию

    Это может быть очевидно, а может быть и нет. Если у вас есть привычка делать так:

    … а затем назначать обработчик события вот таким вот образом:

    … то возможно это будет нормально работать, но ровно до тех пор, пока страничка не станет длиннее, чем ожидалось изначально. В таком случае, вы увидите, как после каждого нажатия на ссылку, страничка «прыгает» в самое начало (знак #).

    Все, что нужно — отменить стандартное поведение ссылки, впрочем, как и любого другого элемента. Для этого нужно добавить «return false;» в свой обработчик, например:

    25. Короткая запись для события готовности документа

    Маленький прием, который поможет сэкономить несколько символов, если использовать сокращение функции $(document).ready.

    14 полезных методов, примечаний и лучших упражнений jQuery

    Дата публикации: 2011-01-21

    От автора:

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


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

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

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

    Код вверху полностью хорош; однако вы могли бы почти так же легко объединить две строки в одну для достижения того же итога.

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

    2. Селектор Find

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

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

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

    Однако старые браузеры, а именно IE6/IE7, естественно, не обеспечивают поддержку этой функции. Значит, такие более сложные селекторы запускают движок jQuery Sizzle – несомненно замечательный, но требующий больших ресурсов.

    Sizzle – блестящая реализация, которую я, возможно, никогда не пойму. Тем не менее, если вкратце, он сначала берет селектор и превращает его в «массив», состоящий из каждого компонента вашего селектора.

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

    Итак, когда это возможно:

    Старайтесь сделать свои селекторы простыми

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

    Как можно лучше оптимизируйте правую часть селектора при использовании Sizzle.

    Контекст вместо этого?

    Также можно использовать в своих селекторах текущий контекст, например:

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

    Подтверждение:

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

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

    p>Если объект jQuery нужен вам только для того, чтобы иметь доступ к атрибуту id тэга-привязки, это расточительно. Лучше придерживаться «обычного» JavaScript’а.

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

    Подтверждение:

    Множественные объекты jQuery

    Еще хуже процесс неоднократных запросов к DOM и создания множественных объектов jQuery.

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

    4. Сокращенная запись метода jQuery Ready

    Обработка события ready документа при помощи 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. Не думайте, что он способен исправить ваш плохой код.

    Это значит, что если мы должны оптимизировать такие вещи, как предложения for из JavaScript, то же самое касается метода jQuery each. А почему нет? Это просто вспомогательный метод, который затем «за кулисами» создает предложение for.

    Ужасно

    Ищет anotherDiv в каждой итерации цикла

    Дважды подхватывает свойство innerHTML

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Гораздо лучше

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

    Этот совет больше касается вообще JavaScript, чем конкретно jQuery. Главное помнить, что jQuery не исправляет плохой код.

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

    В подобных ситуациях имеется альтернатива– использование фрагментов документа.

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

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

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

    7. Методы AJAX

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

    Как пример давайте рассмотрим getJSON, который позволяет нам получить JSON.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL