JavaScript
En nuestro segundo HYS anunciamos nuestra decisión
de alejarnos de jQuery y algunos de ustedes ya están publicando actualizaciones de sus complementos, lo cual es estupendo de ver. Lo que sigue sirve como referencia no exhaustiva para cualquier cambio específico en el marco que pueda afectar a la forma de escribir código JavaScript en sus complementos en el futuro.
XF.extendObject
Este es un nuevo método que reemplaza al método
$.extend() por defecto de jQuery. Funciona básicamente igual, incluyendo la opción de hacer un clonado "profundo".
XF.createElementFromString
jQuery permitía crear un nuevo elemento con varias propiedades y atributos completamente a partir de una cadena, por ejemplo:
JavaScript:
const $input = $('<input type="text" readonly class="input" />')
Queríamos tener algo parecido a esto, así que hemos añadido un método que funciona de forma similar:
JavaScript:
const input = XF.createElementFromString('<input type="text" readonly class="input" />')
También tenemos un concepto completamente nuevo llamado
XF.createElement sobre el que podrás leer en un post posterior.
Gestión de eventos
Algunas de las cosas de gestión de eventos en jQuery son bastante interesantes, así que las hemos replicado tanto como ha sido posible. Notablemente, soportamos eventos namespaced de forma similar a jQuery, junto con métodos equivalentes a jQuery llamados
XF.on(),
XF.off(),
XF.trigger() y
XF.customEvent(). Para manejar eventos delegados tenemos un nuevo método
XF.onDelegated. Si antes usabas el método
one de jQuery para que un evento fuera eliminado después de ser disparado por primera vez, ahora puedes simplemente pasar
{ once: true } en tus llamadas
XF.on().
Cambios en XF.ajax
Aunque el uso de
XF.ajax() no ha cambiado en su mayor parte, está claro que ya no utilizamos
$.ajax() de jQuery, que es una envoltura de
XMLHttpRequest. Hemos decidido abandonar
XMLHttpRequest en favor de la más moderna API Fetch.
XF.ajax devuelve ahora una
Promesa similar a la que devuelve jQuery, aunque los nombres de los métodos de las promesas son ligeramente diferentes. Ya se mencionaron en el post original.
El otro cambio notable es cómo se cancelan las peticiones AJAX si es necesario. Anteriormente, el objeto devuelto por jQuery tenía un método de
abortar que podía ser llamado. La API de Fetch tiene una forma diferente de conseguirlo, que es un poco más enrevesada, así que hemos creado un nuevo método
XF.ajaxAbortable que hace que sea un poco más fácil trabajar con él, pero vale la pena tener en cuenta que tu uso actual de
XF.ajax donde una llamada puede necesitar ser abortada, necesitará ser cambiado.
Aquí hay un ejemplo de uso de
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
El método
XF.proxy se utiliza normalmente cuando se desea cambiar el contexto de la variable
this al llamar a otra función. Por ejemplo, si pasas una función como
callback al escuchar un evento de
carga de imagen (o similar),
this en ese callback sería normalmente una referencia a la propia imagen. Eso no suele ser deseable, por lo que
XF.proxy nos ayuda a mantener la coherencia de este contexto.
Aunque, por supuesto,
XF.proxy sigue existiendo y permanece sin cambios, por favor considéralo obsoleto y marcado para su eliminación en el futuro.
En su lugar, ahora recomendamos y utilizamos el enfoque nativo de JavaScript para esto. Esto se ve así:
JavaScript:
XF.on(form, 'reset', this.formReset.bind(this))
Principalmente, esto debería ayudar a reducir los errores y ayudar a navegar por el código en su IDE.
Animaciones JavaScript y transiciones basadas en CSS
jQuery tiene una serie de funciones de animación que pensamos que valía la pena mantener, así que las hemos reescrito. Estos nuevos métodos se encuentran en un nuevo espacio de nombres
XF.Animate e incluyen varios enfoques para deslizar/desvanecer contenido.
Este es un ejemplo en el que desvanecemos un contenedor existente para ocultarlo, reemplazamos su contenido y lo volvemos a desvanecer para mostrar el nuevo contenido:
JavaScript:
XF.Animate.fadeUp(containerEl, {
speed: XF.config.speed.fast,
complete ()
{
containerEl.innerHTML = html.innerHTML
XF.Animate.fadeDown(containerEl)
},
})
Puede que también esté familiarizado con nuestros métodos personalizados
addClassTransitioned y
removeClassTransitioned. Antes se añadían como extensiones de jQuery. Ahora se han trasladado a un nuevo espacio de nombres
XF.Transition y requieren que se pase un elemento como primer argumento.
JavaScript:
XF.Transition.addClassTransitioned(this.errorElement, 'is-active')
Cambios en la librería de proveedores
Esta sección resume los cambios en las librerías de proveedores que pueden afectar a sus complementos actuales.
Select2
Desafortunadamente, Select2 todavía está escrito con jQuery como dependencia, por lo que ya no se incluirá a partir de XenForo 2.3. Sólo utilizamos Select2 para nuestro sistema de "token input" que se utiliza como entrada de etiquetado y para la selección de múltiples usuarios (como conversaciones). Para mantener esta funcionalidad ahora estamos incluyendo una librería llamada
Tagify.
Esto tiene más o menos la misma funcionalidad a la que estás acostumbrado pero, ooh, mira, avatares para la entrada de múltiples usuarios:
Generación de códigos QR
Incluimos una librería de generación de códigos QR principalmente para ayudar a la configuración de TOTP como método de autenticación de dos factores. La versión anterior de esta librería dependía de jQuery pero las nuevas versiones han sido reescritas sin dependencias específicas. Si estás utilizando códigos QR en alguno de tus complementos, esto es algo que querrás tener en cuenta. La versión específica de esta biblioteca que estamos utilizando ahora se puede encontrar
aquí.
Calificación por estrellas
Las calificaciones por estrellas, como puedes ver tanto en la Galería multimedia de XenForo como en el Gestor de recursos de XenForo, dependían anteriormente de una libreria de terceros. No existía un reemplazo directo, así que lo convertimos nosotros mismos a JavaScript. Ahora es una nueva clase llamada
XF.BarRating que puedes encontrar en
rating.js.
.