Прощай, jQuery
После того как jQuery стал частью нашего продукта с самого начала, настало время попрощаться с ним.
jQuery - это JavaScript-библиотека, которая инкапсулирует большое количество собственных функций JavaScript в альтернативный набор функций, обильно посыпая их синтаксическим сахаром.
За время существования XenForo стандарты JavaScript и браузеров претерпели значительные изменения. Когда-то использование чего-либо другого было просто немыслимо. В недалеком прошлом jQuery был практически необходим даже для того, чтобы найти элемент с определенным именем класса, или для поддержки, казалось бы, бесконечных причуд в устаревших версиях Internet Explorer и других.
Да и сама по себе эта библиотека занимает более 30 КБ при каждой загрузке страницы, а сколько из этой библиотеки мы на самом деле использовали?
Ну, как разработчик, который лично просмотрел и переписал почти 40 000 строк кода, скажу, что это гораздо меньше, чем можно подумать. А из тех языковых возможностей jQuery, которые мы использовали, многие вещи являются простой прямой заменой на родную функцию JavaScript, которая давным-давно либо вообще не существовала, либо была слишком новой, чтобы получить достаточную поддержку браузера.
Мы понимаем, что для разработчиков, имеющих существующий код на основе jQuery, возникнут некоторые болевые точки, но, по правде говоря, если вы не поддерживаете и близко 40 000 строк кода, которые поддерживаем мы (разработчики XenForo), переход должен быть относительно плавным. Но если вы совсем застряли, то при желании всегда можно заново добавить jQuery, но мы бы рекомендовали избегать этого, если есть такая возможность. А удаление jQuery как зависимости можно начать уже сейчас, если вы планируете вносить изменения в существующий код до выхода XenForo 2.3. Мы настоятельно рекомендуем воздержаться от написания нового кода, напрямую использующего функциональность jQuery.
При необходимости мы можем более подробно рассказать о внесенных изменениях, но вот некоторые основные моменты.
Примечание: Следующий раздел посвящен специфике разработки, поэтому, если это вас не интересует, переходите к следующему разделу.
Переменные с привязкой к блоку
Хотя это и не относится к jQuery, стоит отметить, что мы больше не используем
var для определения переменных, а предпочитаем использовать
let и
const. Это делает определение переменных более понятным, а код менее подверженным ошибкам и более предсказуемым.
Выбор элемента(ов)
Выбор элементов из DOM - это, пожалуй, самая частая операция, которую вы выполняете в JavaScript, поэтому это существенное изменение, которое, хотя и делает код немного более многословным, делает его более понятным и менее склонным к ошибкам.
jQuery / XF 2.2
JavaScript:
var $element = $('.someClassName')
if ($element.length)
{
// you have an object containing one or more elements; you can call various methods which will interact with this element or elements
}
JavaScript / XF 2.3
JavaScript:
const element = document.querySelector('.someClassName')
if (element)
{
// you have an instance of HTMLElement, if more elements exist with the same selector, you have the first element
}
// ... or
const elements = document.querySelectorAll('someClassName')
if (elements.length)
{
// you have a NodeList object containing one or more HTMLElement objects
}
Стрелочные функции
Опять же, хотя это и не связано с jQuery, в настоящее время
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками
Вход или
Регистрация
используются как можно чаще. Помимо того, что они синтаксически более удобны, чем традиционные анонимные функции, они не создают новых привязок для ключевых слов, таких как this.
jQuery / XF 2.2
JavaScript:
var self = this
var callback = function (foo)
{
self.doSomething(foo)
}
JavaScript / XF 2.3
JavaScript:
const callback = (foo) =>
{
this.doSomething(foo)
}
// ...or
const callback = (foo) => this.doSomething(foo)
Обработка событий
От некоторых функциональных возможностей, предоставляемых jQuery, было трудно отказаться, и большинство этих
действительно полезных методов были переписаны и перенесены на ванильный JavaScript в качестве дополнительных методов нашего объекта
XF. Не последнюю роль в этом играет управление событиями в jQuery, которое поддерживает события с именами и обеспечивает более интуитивный способ удаления слушателей событий из элемента, не требующий ссылки на исходный обратный вызов события.
jQuery / XF 2.2
JavaScript:
var $element = $('.someClassName')
$element.on('namespace.click', function (e)
{
e.preventDefault()
$element.off('namespace.click')
});
JavaScript / XF 2.3
JavaScript:
const element = document.querySelector('.someClassName')
if (element)
{
XF.on(element, 'namespace.click', e =>
{
e.preventDefault()
XF.off(element, 'namespace.click')
})
}
AJAX
По сравнению с XenForo 2.2 ситуация в основном не изменилась, поскольку мы по-прежнему используем обертку
XF.ajax() в качестве вспомогательного метода, но за кулисами вместо использования метода
$.ajax() из jQuery (который является оберткой вокруг
XMLHttpRequest) мы перешли на использование более современного
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками
Вход или
Регистрация
.
Главное, на что следует обратить внимание, - это то, что методы
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками
Вход или
Регистрация
, доступные в результате вызова
XF.ajax(), называются несколько иначе, чем в jQuery.
jQuery / XF 2.2
JavaScript:
var t = this
XF.ajax('some-url', data, callback)
.always(function ()
{
t.loading = false
})
JavaScript / XF 2.3
JavaScript:
XF.ajax('some-url', data, callback)
.finally(() =>
{
this.loading = false
})
Хранение произвольных данных для элемента
Некоторые возможности jQuery, несмотря на свою мощь, иногда могут показаться непоследовательными или неоднозначными. Одной из таких возможностей является метод
data, доступный для объектов jQuery. В зависимости от его использования он может вести себя по-разному. Рассмотрим следующий пример:
jQuery / XF 2.2
JavaScript:
var $element = $('.someClassName').first() // <span class="someClassName" data-foo="1"></span>
var foo = $element.data('foo') // reads the data-foo attribute from the element in the DOM
var bar = $element.data('bar') // attempts to read the data-bar attribute from the element which doesn't exist, but the internal data store may have a value set
$element.data('bar', [1, 2, 3]) // sets the bar key in the internal data store to an array
$element.data('foo', '100') // the foo entry in the internal data store for this element now returns 100, ignoring the data-foo attribute which remains unchanged in the actual DOM
В XenForo по-прежнему существует необходимость хранить произвольные данные, особенно те, которые не всегда являются строкой. Однако наши современные подходы более предсказуемы и последовательны:
JavaScript / XF 2.3
JavaScript:
const element = document.querySelector('.someClassName') // <span class="someClassName" data-foo="1"></span>
const foo = element.dataset.foo // reads the data-foo attribute from the DOM
element.dataset.foo = '100' // sets the data-foo attribute in the DOM
XF.DataStore.set(element, 'bar', [1, 2, 3]) // a new XF.DataStore class is introduced for reading / storing arbitrary, non-string data
const bar = XF.DataStore.get(element, 'bar') // returns an array: [1, 2, 3]
Цели обработчиков
У нас есть специальная переменная, которую мы передаем во все обработчики элементов/событий, в настоящее время это
this.$target. Обратите внимание, что в XF 2.3 она становится
this.target, поскольку обычно префикс
$ в именах переменных используется для обозначения объекта jQuery. В XF 2.3
this.target представляет собой объект
HTMLElement.
Для поиска дочерних элементов целевого объекта это немного больше соответствует стандартному JavaScript, чем jQuery:
jQuery / XF 2.2
JavaScript:
var $child = this.$target.find('.someChild').first() // returns the first child element which matches the someChild class
JavaScript / XF 2.3
JavaScript:
const child = this.target.querySelector('.someChild') // returns the first child element which matches the someChild class; this will be a HTMLElement; note it uses the same querySelector method rather than a separately named method
Поддержка миграции
Хотя, по понятным причинам, некоторые пользовательские методы в XF 2.3 будут недоступны для вас до релиза, мы рекомендуем вам уже сейчас начать переносить как можно больше кода, чтобы использовать ванильный JavaScript там, где это возможно.
Если вы считаете, что вам нужна поддержка в переводе кода на ванильный JavaScript, мы имеем около 40 000 строк опыта, и мы (разработчики XenForo) постараемся ответить на запросы в
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками
Вход или
Регистрация
, где это возможно.
