Novedades de jQuery 3 - 10 mejores características
jQuery 3.0, el nuevo lanzamiento principal de jQuery finalmente fue lanzado. La comunidad de desarrolladores web esperó este importante paso desde octubre de 2014, cuando el equipo de jQuery comenzó a trabajar en la nueva versión principal hasta junio de 2016, cuando lanzamiento final Está fuera.
La nota de lanzamiento promete un más delgado y más rápido jQuery, con compatibilidad al revés en mente. En esta publicación, echamos un vistazo a algunas de las nuevas características de jQuery 3.0 para ofrecerle una visión general de cómo cambia el panorama de JavaScript..
Donde empezar
Si desea descargar jQuery 3.0 para experimentar por sí mismo, vaya directamente a la página de descargas. También vale la pena echar un vistazo a la Guía de actualización, o al código fuente.
Si desea probar cómo funciona su proyecto existente con jQuery 3.0, puede probar el complemento jQuery Migrate que identifica los problemas de compatibilidad en su código. También puedes echar un vistazo a los hitos futuros..
Este artículo no cubre todos Las nuevas características de jQuery 3.0, solo las más interesantes: mejor calidad de código, integración de las nuevas características de ECMAScript 6, una nueva API para animaciones, un nuevo método para escapar cadenas, mayor compatibilidad con SVG, mejores devoluciones de llamadas asíncronas, mejor compatibilidad con sitios sensibles. , y mayor seguridad.
1. Antiguas soluciones provisionales de IE se eliminaron
Uno de los objetivos principales del nuevo lanzamiento principal fue lograr que más rápido y más elegante, Por lo tanto, los viejos hacks y soluciones relacionadas con IE9- fue removido. Esto significa que si desea o necesita compatibilidad con IE6-8, tendrá que seguir usando la última versión. 1.12 liberar, como incluso el 2.x La serie no tiene soporte completo para los Internet Explorer más antiguos (IE9-). Echa un vistazo a las notas sobre el soporte del navegador en los documentos.
Tenga en cuenta que también hay muchas características en desuso en jQuery 3. Una gran deficiencia de la Guía de actualización es que las funciones obsoletas, a partir de junio de 2016, no están agrupadas, por lo que si está interesado en ellas, deberá buscarlas en la herramienta de búsqueda de su navegador ( Ctrl + F).
2. jQuery 3.0 se ejecuta en modo estricto
Como la mayoría de los navegadores compatibles con jQuery 3 admiten el modo estricto, la nueva versión principal se ha creado teniendo en cuenta esta directiva.
Aunque jQuery 3 se ha escrito en modo estricto, es importante saber que No se requiere que su código se ejecute en modo estricto, vos tambien no es necesario volver a escribir su código jQuery existente si desea migrar a jQuery 3. Modo estricto y no estricto de JavaScript felizmente puede coexistir.
Hay una excepción: Algunas versiones de ASP.NET que - debido al modo estricto - son no es compatible con jQuery 3. Si está involucrado con ASP.NET, puede ver los detalles aquí en la documentación..
3. Se introduce For ... of Loops.
jQuery 3 es compatible con el for ... of statement, un nuevo tipo de para bucle, introducido en ECMAScript 6. Da una forma más directa de bucle sobre objetos iterables, tales como matrices, mapas y conjuntos.
En jQuery, la para ... de bucle puede reemplazar el anterior $. cada (...) sintaxis, y puede hacer que sea más fácil recorrer los elementos de una colección jQuery.
Tenga en cuenta que el para ... de bucle hará Sólo trabajo ya sea en un entorno que apoya ECMAScript 6, o si tu usar un compilador de JavaScript como Babel.
4. Las animaciones tienen una nueva API
jQuery 3 usa la API requestAnimationFrame () para realizar animaciones, hacer animaciones corre más suave y más rápido. La nueva API solo se utiliza en los navegadores que la admiten; para navegadores más antiguos (es decir, IE9) jQuery utiliza su API anterior como método alternativo para mostrar animaciones.
RequestAnimationFrame ha estado fuera por un tiempo, si estás interesado en lo que sabe o por qué debes usarlo, CSS Tricks tiene una buena publicación al respecto.
5. Nuevo método para escapar cadenas con significado especial
El nuevo jQuery.escapeSelector () método le permite escapar cadenas o caracteres que significa algo más en CSS para poder utilízalo en un selector de jQuery; Sin escapar, el intérprete de JavaScript no puede entenderlo correctamente..
Los documentos nos ayudan a entender mejor este método con el siguiente ejemplo:
“Por ejemplo, si un elemento en la página tiene un ID de “a B C D e F” no se puede seleccionar con $ ("# abc.def") porque el selector se analiza como “un elemento con id 'a B C' que tambien tiene una clase 'def'. Sin embargo, se puede seleccionar con $ ("#" + $ .escapeSelector ("abc.def")).”
No estoy seguro de la frecuencia con la que ocurre un caso así, pero si te topas con un problema como este, ahora tienes una manera fácil de solucionarlo rápidamente..
6. Los métodos de manipulación de clases soportan SVG
Desafortunadamente, jQuery 3 todavía no es totalmente compatible con SVG, pero los métodos jQuery que manipulan los nombres de clase CSS, como .addClass () y .hasClass (), ahora se puede utilizar para documentos SVG de destino también. Esto significa que puede modificar (agregar, eliminar, alternar) o encontrar clases con jQuery en gráficos vectoriales escalables, luego estiliza las clases con CSS.
7. Los objetos diferidos ahora son compatibles con JS Promises
Promesas de JavaScript - objetos utilizados para cómputos asíncronos - Se han estandarizado en ECMAScript 6; Su comportamiento y características se especifican en los estándares de Promesas / A +..
En jQuery 3, Objetos diferidos Se han hecho compatibles con los nuevos estándares de Promises / A +. Los diferidos son objetos caninables que hacen posible crear colas de devolución de llamada.
La nueva característica cambia. Cómo se ejecutan las funciones de devolución de llamada asíncronas.; Promesas Permitir a los desarrolladores escribir código asíncrono que esté más cerca de la lógica al código síncrono.
Vea ejemplos de código en la Guía de actualización o, vea este excelente tutorial de Scotch.io sobre los conceptos básicos de las promesas de JavaScript.
8. jQuery.when () interpreta los argumentos múltiples de manera diferente
los $ .cuando () método proporciona una manera de ejecutar funciones de devolución de llamada. Es parte de jQuery desde la versión 1.5. Es un método flexible; también funciona con cero argumentos, y puede aceptar uno o más objetos como argumentos también.
jQuery 3 cambia la forma en que los argumentos de $ .cuando () son interpretados cuando contienen el $ .then () método con el que puede pasar devoluciones de llamada adicionales como argumentos a la $ .cuando () método.
En jQuery 3, si agrega un argumento de entrada con el entonces() método para $ .cuando (), el argumento será interpretado como un compatible "Promesa" de Promise.
Esto significa que el $ .cuando método será capaz de aceptar una gama de entradas de boarder, como las promesas nativas de ES6 y las promesas de Bluebird, que permiten escribir devoluciones de llamadas asíncronas más sofisticadas.
9. Nuevo Show / Hide Logic
Para aumentar Compatibilidad con diseño responsivo., el código relacionado con mostrando y escondiendo elementos ha sido actualizado en jQuery 3.
De ahora en adelante, el .espectáculo(), .esconder(), y .palanca() los métodos se centrarán en estilos en línea, En lugar de estilos computados, así lo harán. mejor respeto cambios de hojas de estilo.
El nuevo código respeta el monitor valores de hojas de estilo siempre que sea posible, lo que significa que las reglas CSS pueden cambiar dinámicamente En eventos como la reorientación de dispositivos y el tamaño de la ventana.
La documentación afirma que el resultado más importante será:
"Como resultado, los elementos desconectados son ya no se considera oculto a menos que tengan en línea pantalla: ninguna;, y por lo tanto .palanca() será ya no los diferenciamos desde elementos conectados a partir de jQuery 3.0 ".
Si quieres entender mejor el resultados de la nueva lógica de mostrar / ocultar, Aquí hay una interesante discusión de Github al respecto..
Los desarrolladores de jQuery también publicaron una tabla de Google Docs sobre cómo funcionará el nuevo comportamiento. en diferentes casos de uso.
10. Protección adicional contra los ataques XSS
jQuery 3 agregado una capa de seguridad extra contra los ataques de secuencias de comandos entre sitios (XSS) al requerir que los desarrolladores especifiquen dataType: "script" en las opciones del $ .ajax () y el $ .get () metodos.
En otras palabras, si desea ejecutar solicitudes de script de dominio cruzado, debe declarar esto En la configuración de estos métodos..
De acuerdo con los documentos, el nuevo requisito es útil cuando un "sitio remoto entrega contenido sin script pero luego decide Servir un script que tenga intenciones maliciosas.". El cambio no afecta a la $ .getScript () método, ya que establece el dataType: "script" opción explícitamente.
