Как исправить код jQuery в неподдерживаемом плагине или теме WordPress.
Содержание:
- Введение и общие понятия
- jQuery.fn.live() устарел (jQuery.fn.live() is deprecated)
- jQuery.browser устарел (jQuery.browser() is deprecated)
- jQuery.fn.size() устарел (jQuery.fn.size() is deprecated)
- jQuery.fn.load() устарел (jQuery.fn.load() is deprecated)
Это очень обобщенное введение, оно ни в коем случае не является исчерпывающим или полным. Вам предлагается продолжить изучение проблем, с которыми вы можете столкнуться.
С выпуском WordPress 5.5 инструмент, известный как jQuery Migrate, больше не был включен по умолчанию (это часть пути обновления до jQuery 3 в ядре WordPress).
К сожалению, на некоторых пользователей это негативно повлияло, это было своего рода ожидаемым, и плагин для помощи этим пользователям был выпущен до выпуска под названием Enable jQuery Migrate Helper. Он функционирует как временное решение до следующего выпуска WordPress, но к тому времени код должен быть обновлен.
Тем не менее, существуют различные темы и плагины, которые больше не поддерживаются, и пользователи немного не понимают, что они могут делать. В идеале, если это вы, поиск поддерживаемой альтернативы будет лучшим решением. Что не всегда является самым своевременным решением.
Если вам не повезло, и вы используете неподдерживаемый плагин или тему, и у вас возникли проблемы, связанные с тем, что jQuery Migrate больше не включен на вашем сайте, ниже приведен список наиболее распространенных устаревших функций и способы их исправления вручную. .
Обратите внимание, что для этого вам потребуется изменить плагин или тему, и эти изменения будут перезаписаны при обновлении темы или плагина.
Если вы не хотите, чтобы это произошло, рассмотрите возможность разветвления плагина или создания дочерней темы, но это может быть временное решение.
Это также требует, чтобы вы внесли изменения в код, если вам это неудобно, вы, вероятно, найдете других разработчиков, которые возьмут это на себя как внештатную задачу, или, если у вас есть агентство или разработчик, которых вы часто используете, посоветуйтесь с ними.
Введение и общие понятия
Вот несколько ключевых фраз, которые будут использоваться, и их важно знать, чтобы вы могли быстро определить, что нужно изменить.
[selector] — используется для ссылки на определенную разметку HTML, с которой будет работать ваш код JavaScript. Часто в таком формате: $ ([selector]) .function ()
[function] — слово, которое сообщает cvode, что делать в любой момент времени, это то, что на самом деле выполняет код в вашей разметке. Часто в таком формате: $ (‘body’). [function] ()
[event] — Что-то, что заставляет код работать. Часто в этом формате в более современном коде: $ (‘body’) .on ([event], function () {
$ или jQuery — используется, чтобы сообщить вашему браузеру использовать библиотеку jQuery, он может использовать любую из этих двух, и вам следует продолжать использовать ту, которая уже используется. В приведенных здесь примерах будет использоваться сокращение $, поскольку оно более широко используется, но могут быть и другие форматы, поэтому всегда копируйте начало кода.
Вы заметите, что [selector] окружен одинарными или двойными кавычками, они должны быть там, чтобы JavaScript знал, что он смотрит на текст, а не на функцию (вот почему [function] выше не заключите его в кавычки).
Часто вы можете просто найти в своем файле имя функции, как указано ниже, чтобы найти, где вам нужно внести изменения в свой код.
jQuery.fn.live() устарел (jQuery.fn.live() is deprecated)
Документация jQuery об обработчике событий .live ()
Пример: $ (‘button’) .live (‘click’, function () {
Современный пример: $ (‘body’) .on (‘click’, ‘button’, function () {
Объяснение: Приведенное выше будет выполняться всякий раз, когда кнопка на вашем сайте вызывает [event] щелчка (кнопка нажата), а затем запускает серию кода.
Примеры полей:
[selector] — ‘button’
[function] — .live
[event] — ‘click’
Самая распространенная из возникающих проблем — это использование функции .live (), которую использовал jQuery. Для ясности, это было устаревшим в 2011 году, но это также одна из самых простых проблем для решения.
Если вы посмотрите на современный пример выше, вы увидите, что [selector] был заменен на более продвинутый. Это сделано потому, что общий пример не может знать структуру вашего веб-сайта yoru, и это всегда будет работать.
Затем [function] была заменена современным эквивалентом, но [event] осталось прежним.
Наконец, обратите внимание, что исходный [selector] был сделан частью параметров, используемых современной [function], а остальная часть строки осталась без изменений.
jQuery.browser устарел (jQuery.browser() is deprecated)
Документация jQuery о функции .browser ()
Альтернативы этой функции нет. Он использовался для определения того, какой браузер использовал посетитель, но оказался ненадежным и был удален по этой причине.
Если вам нужно определить, какой браузер использует посетитель для применения специальных стилей или аналогичных (обычное его использование), вам следует подумать, чтобы разработчик добавил вместо этого функцию обнаружения.
А ещё в интернете указывается другой, не проверенный нами способ — оформить код, приведенный ниже, как отдельный файл или добавить его прямо в файл jquery-xx.xx.xx.min.js в самый конец:
(function() {
var matched, browser;
// Использовать jQuery.browser не одобряется.
// Подробнее: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch поддерживается для совместимости
jQuery.uaMatch = function( ua ) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
matched = jQuery.uaMatch( navigator.userAgent );
browser = {};
if ( matched.browser ) {
browser[ matched.browser ] = true;
browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
browser.webkit = true;
} else if ( browser.webkit ) {
browser.safari = true;
}
jQuery.browser = browser;
jQuery.sub = function() {
function jQuerySub( selector, context ) {
return new jQuerySub.fn.init( selector, context );
}
jQuery.extend( true, jQuerySub, this );
jQuerySub.superclass = this;
jQuerySub.fn = jQuerySub.prototype = this();
jQuerySub.fn.constructor = jQuerySub;
jQuerySub.sub = this.sub;
jQuerySub.fn.init = function init( selector, context ) {
if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
context = jQuerySub( context );
}
return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
};
jQuerySub.fn.init.prototype = jQuerySub.fn;
var rootjQuerySub = jQuerySub(document);
return jQuerySub;
};
})();
Этот способ можно использовать только на свой страх и риск!!!
jQuery.fn.size() устарел (jQuery.fn.size() is deprecated)
Документация jQuery о функции .size ()
Пример: $ (‘button’) .size ()
Современный пример: $ (‘button’) .length
Объяснение: Это позволит подсчитать, сколько элементов [selector] (в данном случае кнопок) найдено на странице. Обратите внимание, что современный пример не заканчивается скобками, это правильно, в конце не должно быть скобок.
Примеры полей:
[selector] — ‘button’
[function] -. length
Такой способ проверки размера часто используется, чтобы увидеть, существуют ли на странице один или несколько HTML-элементов, прежде чем пытаться манипулировать ими с помощью JavaScript, или чтобы проверить, сколько элементов существует в коллекции (массиве) перед выполнением цикла. . Во всех этих случаях нужно просто заменить .size () на .length.
jQuery.fn.load() устарел (jQuery.fn.load() is deprecated)
Документация jQuery о событии .load ()
Эта функция имеет три использования, и только два из них устарели (если вы получили предупреждение, был обнаружен один из двух методов, указанных ниже, поэтому вам следует найти их и исправить).
Пример: $ (‘body’) .load ()
Современный пример: $ (‘body’) .trigger (‘load’)
Объяснение: Это укажет браузеру запустить любой код, установленный для запуска, после завершения загрузки страницы, даже если она уже завершила загрузку ранее.
Пример: $ (‘body’) .load (function () {
Дополнительный пример: $ (‘img’) .load (function () {
Современный пример: $ (‘body’) .on (‘load’, function () {
Дополнительный современный пример: $ (‘body’) .on (‘load’, ‘img’, function () {
Объяснение: В приведенном выше примере будет запущен некоторый код, когда выбранный [selector] завершит загрузку.
Примеры полей:
[selector] — окно, ‘body’ или ‘img’
[function] — .load
[event] — ‘load’
Если тело или окно используются в качестве [selector], то функции предназначены для запуска, когда страница сама завершила загрузку.
Дополнительный пример и современный пример будут использоваться для запуска всякий раз, когда, в этом примере, изображение на странице завершает загрузку.
Это были наиболее частые проблемы, которые до сих пор возникали у пользователей.
У вас есть другие связанные с этим проблемы или, может быть, у вас есть советы, как что-то еще лучше объяснить, пожалуйста, дайте мне знать!
Если вам неудобно вносить такие изменения в неподдерживаемый плагин или тему, доступна временная служба для переноса кода jQuery.
Источник на английском языке — https://clorith.net