Руководство для начинающих по заказу jQuery

24 января 2018

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

Но сколько из вас - как разработчиков или дизайнеров - получили этот телефонный звонок или тот адрес электронной почты, в котором клиент утверждает, что что-то не так с их сайтом, только чтобы обнаружить, что в консоли браузера отображается что-то об ошибке, связанной с JavaScript или jQuery?

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

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


Слово о включении файлов JavaScript

Эта тема не является новой для Wptuts +. Фактически, мы написали обширную статью об этом, прежде чем закончим с рядом примеров кода, все из которых должны предоставить вам все, что вам нужно, чтобы понять, как работать с JavaScript в WordPress.

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

Итак, прежде чем читать эту статью, убедитесь, что вы знакомы с тем, как включить JavaScript и CSS в темы и плагины WordPress.


WordPress как основа

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

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

Но когда мы начинаем удалять библиотеки, которые поставляются с WordPress в пользу наших собственных, это почти так, как будто мы создаем «мини-вилку» проекта.

Это не очень хорошая практика.

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

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

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


Почему проблема конфликтов JavasScript существует

Вообще говоря, проблема конфликтов JavaScript существует по одной из трех причин. Разработчик имеет либо:

    Неправильно управляемый jQuery в своём коде. Сменил версию jQuery в пользу другой версии. Изменен порядок загрузки jQuery.

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

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

1. Неправильное управление jQuery

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

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

2. Перевернутые версии jQuery

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

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

3. Измените порядок, в котором загружается jQuery

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

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

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


Как правильно включить jQuery

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

(function( $ ) {
    "use strict";
    $(function() {
        // Your code here
    });
}(jQuery));

Здесь вы также можете посмотреть GitHub.

Вкратце:

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

Обратите внимание, что оператор «use strict» предоставляет следующее:

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

Для тех, кто заинтересован, вы можете узнать больше об этом на этом сайте.

Наконец, фактическая функция document.ready не является обязательной. Здесь он используется, чтобы показать, как вы можете начать использовать стандартные функции jQuery в контексте кода.


Заключение

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

В частности, в настоящее время в Trac есть билет, в котором WordPress не позволит нам удалить jQuery из панели мониторинга. Это хорошая вещь.

Короче говоря, основные выходы для этой статьи следующие:

Использовать версию, которая поставляется с WordPress Получите доступ к функции $, используя надлежащие средства JavaScript

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