JavaScript
В нашем втором HYS мы объявили о своем решении отойди от jQuery и некоторые из вас уже выпускают обновления для своих дополнений, и это приятно видеть. Ниже следующее служит не исчерпывающим справочником по любым конкретным изменениям платформы, которые могут повлиять на то, как вы будете писать код JavaScript в своих надстройках в будущем.
XF.extendObject
Это новый метод, который заменяет стандартный метод jQuery. $.extend(). По сути, он работает точно так же, включая возможность «глубокого» клонирования.
XF.createElementFromString
jQuery поддерживает создание нового элемента с различными свойствами и атрибутами полностью из строки, например:
const $input = $('<input type="text" readonly class="input" />')
Нам хотелось иметь что-то похожее на это, поэтому мы добавили метод, который работает аналогичным образом:
const input = XF.createElementFromString('<input type="text" readonly class="input" />')
У нас также есть совершенно новая концепция под названием XF.createElement о чем вы можете прочитать в следующем посте.
Управление событиями
Некоторые возможности управления событиями в jQuery довольно круты, поэтому мы максимально воспроизвели их. Примечательно, что мы поддерживаем события в пространстве имен аналогично jQuery, а также эквивалентные jQuery методы с именем XF.on(), XF.off(), XF.trigger() и XF.customEvent(). Для обработки делегированных событий у нас есть новый XF.onDelegated метод. Если вы ранее использовали jQuery one чтобы прослушиватель событий удалялся после его первого запуска, теперь вы можете просто передать { once: true } в твой XF.on().
Изменения в XF.ajax
В то время как использование XF.ajax() практически не изменился, очевидно, что мы больше не используем jQuery $.ajax() под капотом, который представляет собой обертку вокруг XMLHttpRequest. Мы решили отойти от XMLHttpRequest в пользу более современного Fetch API.
XF.ajax теперь возвращает Promise что похоже на то, что возвращает jQuery, хотя имена методов обещания немного отличаются. Которые были упомянуты в оригинале, вы видели пост.
Другое заметное изменение заключается в том, как запросы AJAX при необходимости прерываются. Раньше объект, возвращаемый jQuery, имел abort метод, который можно вызвать. У Fetch API есть другой способ достижения этой цели, который немного более запутан, поэтому мы создали новый XF.ajaxAbortable метод, который немного упрощает работу, но стоит отметить, что ваше существующее использование XF.ajax если вызов может потребоваться прервать, его необходимо изменить.
Вот пример использования из form.js:
const {
ajax,
abortController,
} = XF.ajaxAbortable('post', this.options.descUrl, { id: value }, this.onLoad.bind(this))
if (abortController)
{
this.abortController = abortController
}
// ... elsewhere in the code
if (this.abortController)
{
this.abortController.abort()
this.abortController = null
}
XF.proxy
XF.proxy метод обычно используется, когда вы хотите изменить контекст this переменная при вызове другой функции. Например, если вы передаете функцию в качестве обратного вызова при прослушивании изображения load событие (или подобное), this в этом обратном вызове обычно будет ссылка на само изображение. Обычно это нежелательно, поэтому XF.proxy помогает нам сохранить this контекст соответствует.
Хотя, конечно, XF.proxy все еще существует и остается неизменным, пожалуйста, считайте, что он устарел и помечен для удаления в будущем.
Вместо этого мы теперь рекомендуем и используем для этого собственный подход JavaScript. Это выглядит так:
XF.on(form, 'reset', this.formReset.bind(this))
В первую очередь это должно помочь уменьшить количество ошибок и облегчить навигацию по коду в вашей IDE.
Анимация JavaScript и переходы на основе CSS
В jQuery имеется ряд функций анимации, которые, по нашему мнению, стоило сохранить, поэтому мы их переписали. Домом для этих новых методов является новый XF.Animate пространство имен и включает в себя различные подходы к перемещению/затуханию контента.
Вот пример, в котором мы увеличиваем яркость существующего контейнера, чтобы скрыть его, заменяем его содержимое, а затем снова уменьшаем его, чтобы показать новое содержимое:
XF.Animate.fadeUp(containerEl, {
speed: XF.config.speed.fast,
complete ()
{
containerEl.innerHTML = html.innerHTML
XF.Animate.fadeDown(containerEl)
},
})
Возможно, вы также знакомы с нашим обычными addClassTransitioned и removeClassTransitioned методами. Раньше они добавлялись как расширения jQuery. Сейчас они перенесены в новое XF.Transition пространство имен и требует, чтобы элемент был передан в качестве первого аргумента.
XF.Transition.addClassTransitioned(this.errorElement, 'is-active')
Изменения в библиотеке поставщиков
В этом разделе обобщены изменения в библиотеках поставщиков, которые могут повлиять на ваши текущие дополнения.
Select2
К сожалению, Select2 по-прежнему написан с использованием jQuery в качестве зависимости, поэтому он больше не будет включаться, начиная с XenForo 2.3. Мы используем Select2 только для нашей системы «ввода токенов», которая используется в качестве ввода тегов и для выбора несколькими пользователями (например, в разговорах). Чтобы сохранить эту функциональность, мы теперь включаем библиотеку под названием
.
Это в значительной степени имеет ту же функциональность, к которой вы привыкли, но, ох, посмотрите, аватары для ввода нескольких пользователей:
Генерация QR-кода
Мы включаем библиотеку генерации QR-кода, главным образом для облегчения настройки TOTP в качестве метода двухфакторной аутентификации. Предыдущая версия этой библиотеки опиралась на jQuery, но новые версии были переписаны без каких-либо конкретных зависимостей. Если вы используете QR-коды в каких-либо своих плагинах, вам следует об этом знать. Конкретную версию этой библиотеки, которую мы сейчас используем, можно найти
.
Звездные рейтинги
Звездные рейтинги, которые вы можете видеть как в XenForo Media Gallery, так и в XenForo Resource Manager, ранее основывались на сторонней библиотеке. Прямой замены на самом деле не существовало, поэтому мы просто конвертировали ее в JavaScript. Теперь это новый класс с именем XF.BarRating[/CODE] который вы можете найти в
rating.js.[/CODE]
