JavaScript
В нашем втором сообщении HYS мы объявили о нашем решении
отказаться от jQuery, и некоторые из вас уже выпускают обновления для своих дополнений, что приятно видеть. Следующее служит неисчерпывающим справочником для любых конкретных изменений в фреймворке, которые могут повлиять на то, как вы пишете код JavaScript в своих дополнениях в дальнейшем.
XF.extendObject
Это новый метод, который заменяет стандартный метод jQuery
$.extend(). Он работает практически точно так же, включая возможность делать "глубокое" клонирование.
XF.createElementFromString
jQuery поддерживал создание нового элемента с различными свойствами и атрибутами полностью из строки, например:
JavaScript:
const $input = $('<input type="text" readonly class="input" />')
Мы хотели иметь что-то похожее, поэтому мы добавили метод, который работает аналогично:
JavaScript:
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() в основном не изменилось, очевидно, что мы больше не используем под капотом
$.ajax() от jQuery, который является оболочкой для
XMLHttpRequest. Мы решили отказаться от
XMLHttpRequest в пользу более современного Fetch API.
XF.ajax теперь возвращает
Promise, что похоже на то, что возвращал jQuery, хотя имена методов промиса немного отличаются. Которые были упомянуты в оригинальном сообщении "Вы видели".
Другое заметное изменение касается того, как прерываются AJAX-запросы, если это необходимо. Ранее объект, возвращаемый jQuery, имел метод
abort, который можно было вызвать. Fetch API имеет другой способ достижения этого, который немного более сложен, поэтому мы создали новый метод
XF.ajaxAbortable, который делает это немного проще, но стоит отметить, что ваше существующее использование
XF.ajax, где может потребоваться прерывание вызова, нужно будет изменить.
Вот пример использования из
form.js:
JavaScript:
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 для этого. Это выглядит так:
JavaScript:
XF.on(form, 'reset', this.formReset.bind(this))
В первую очередь это должно помочь уменьшить количество ошибок и облегчить навигацию по коду в вашей среде разработки.
JavaScript анимации и CSS-переходы
В jQuery есть ряд функций анимации, которые нам показались стоящими сохранения, поэтому мы переписали их. Новое пространство имен для этих методов -
XF.Animate, которое включает различные подходы для скольжения/затухания контента.
Вот пример, где мы плавно уменьшаем видимость существующего контейнера для его скрытия, заменяем его содержимое, а затем плавно увеличиваем видимость обратно, чтобы показать новый контент:
JavaScript:
XF.Animate.fadeUp(containerEl, {
speed: XF.config.speed.fast,
complete ()
{
containerEl.innerHTML = html.innerHTML
XF.Animate.fadeDown(containerEl)
},
})
Возможно, вы также знакомы с нашими настраиваемыми методами
addClassTransitioned и
removeClassTransitioned. Ранее эти методы были добавлены как расширения jQuery. Теперь они перенесены в новое пространство имен
XF.Transition и требуют передачи элемента в качестве первого аргумента.
JavaScript:
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, который вы можете найти в
rating.js.
Как и обещали, на этой неделе мы быстро рассмотрим некоторые изменения в XenForo 2.3, ориентированные на разработчиков.
