¿Cuáles son las precauciones para actualizar la versión de jQuery?
Antecedentes
-
JQuery debe ser familiar para todos los ingenieros web, pero muchos sitios web todavía utilizan una versión muy antigua de JQuery. De hecho, DOMXSS puede tener vulnerabilidades si las versiones anteriores se utilizan incorrectamente. Se recomienda encarecidamente actualizar a jQuery 1.9.x o superior. Hace algún tiempo, tomé la iniciativa en hacer esto y actualicé la versión jQuery del proyecto del que era responsable nuestro equipo de 1.4.2 a jQuery 1.11.3. JQuery también proporciona oficialmente el complemento jQuery Migrate para trabajos de actualización similares.
Volver al negocio.
¿De dónde viene el hoyo?
-
JQuery 1.11.3 es la última versión de la era 1.x (actualización del autor: 2016 1.12.0 está en línea, JQuery 1.11.3 ya no es la 1. x era última versión). En los primeros días, muchos métodos de escritura de jQuery se abandonaron en la nueva versión, o la versión anterior admitía algunos métodos de escritura irregulares, pero ahora ya no son compatibles. ¿Lo peor es que la nueva versión todavía es compatible, pero las funciones son diferentes a las anteriores? En este caso, ni siquiera se informará ningún error y deberá profundizar en la lógica del código para verlo.
jQuery recomienda oficialmente la biblioteca de migración jQuery para resolver el problema de actualización de JQuery. Sin embargo, utilizar esta biblioteca todo el tiempo no es una solución a largo plazo. Se recomienda utilizar la versión de desarrollo de jQuery Migrate durante el desarrollo, que puede imprimir detalles de incompatibilidad en la consola del navegador. Cabe señalar que debe utilizar la versión de desarrollo de jQuery Migrate al desarrollar, porque la versión comprimida no dará ninguna advertencia en la consola. Simplemente haga referencia a la biblioteca de migración jQuery inmediatamente después de la biblioteca jQuery:
<script src = "<path>/<to>/jquery-1.11.3.js">< /script>
& ltscript src = "<path>/<to>/jquery-migrate-1.2.1.js"></script> Una vez completada la actualización y confirmado que no hay problemas, elimine la biblioteca de migración jQuery. Según mi experiencia personal, divido los hoyos en dos categorías: hoyos ordinarios y hoyos raros.
Public Pit
-
1. Se utiliza el método jQuery.fn.live abandonado.
Para este error, la biblioteca de migración jQuery también tiene una advertencia correspondiente en la consola:
JQMIGRATE: jQuery.fn.live() ha quedado obsoleto
live La función original del método es configurar el delegado del evento. Este método quedó obsoleto después de jQuery 1.7 y será reemplazado por la función jQuery.fn.on. Su interfaz es:
$(selector). live('click ', function(){/*parte del código*/});
$(selector). on('click ', [selector,] function(){/*cierto código*/}); a primera vista, los parámetros entre paréntesis se pueden omitir. ¿No son las dos funciones exactamente iguales? Así que ingenuamente cambié el nombre de la función live a on y la mayoría de las veces no pareció causar ninguna excepción. Sin embargo, si el $(selector) anterior no coincide con ningún elemento de la página web actual cuando se llama a la función on (el elemento solo puede agregarse al DOM después del código), la vinculación no se realizará correctamente. De hecho, la función en vivo delega $(selector) al elemento del documento, que definitivamente existe, por lo que no ocurrirá una situación similar. El método de reemplazo correcto debería ser:
$(selector).
live('click ', function(){/*parte del código*/}); reemplaza
$(document) con.... on('click ', selector, function(){/*cierto código*/}); 2. Utilice el método jQuery.fn.die abandonado.
La advertencia de JQuery Migrate para este error es:
Jqmigrate: jquery.fn.die() ha quedado obsoleto. Este método es exactamente lo opuesto al anterior en vivo, desvinculando el controlador de eventos. En la nueva versión, se debe utilizar la función de apagado y el método de reemplazo es similar.
3. Utilice la función jQuery.fn.toggle obsoleta.
La advertencia de JQuery Migrate para este error es:
Jqmigrate: jQuery.fn.toggle(handler, handler...) está en desuso. Había dos en jquery anterior. Hay una función. llamado toggle. Uno se usa para controlar la visualización y ocultación de elementos. Actualmente hay funciones para este propósito en jQuery. El otro es la función de alternancia abandonada mencionada anteriormente, que se usa para vincular al menos dos funciones. , estas dos funciones se ejecutan alternativamente cuando se hace clic en el elemento. Las funciones de estas dos funciones con el mismo nombre son muy diferentes y su uso ya no se recomienda en jQuery 1.8. Otro enfoque sería combinar las dos funciones en dos partes if-else de una función y luego establecer una variable booleana para controlar qué parte debe ejecutarse con cada clic.
4. Utilice la propiedad jQuery.browser en desuso.
La advertencia de JQuery Migrate sobre este error es:
Jq migrar: jQuery.browser está obsoleto en el desarrollo front-end. A menudo tenemos que realizar diferentes cambios según las diferentes versiones del navegador. con. Jquery.browser inicialmente extrae información relacionada con el navegador a través del campo userAgent del navegador. Se abandonó en la nueva versión, pero se recomienda utilizar el método de detección de características para juzgar, y se recomienda una biblioteca Modernizr. Sin embargo, cambiar esta biblioteca puede tener un pequeño coste. Si aún desea seguir la idea de jQuery.browser, puede implementarla usted mismo. Por ejemplo, para determinar si es Internet Explorer, utilice
/msie/. test(navigator . user agent . tolowercase());
Es decir, obtenga manualmente el campo userAgent y realice una coincidencia de expresiones regulares. Otros navegadores tienen una idea similar y todos coinciden con navigator.userAgent con regularidad.
Error de escritura en formato 5.$ (HTML)
En jQuery Migrate, cualquiera de las siguientes tres advertencias es un error:
JQMIGRATE: $(html ) La cadena HTML debe comenzar con el carácter '<'; letra
JQMIGRATE: $(html) Ignora el texto html después de la última etiqueta
Jqmigrate: Es bastante notable que el html La cadena no puede comenzar con el carácter ' # ', porque la vulnerabilidad XSS en versiones inferiores de jQuery mencionada al principio de nuestro artículo en realidad está relacionada con este error. En javascript, a menudo escribimos cadenas en formato html directamente en referencias de jQuery, como $('
$("<p></p>);//error, carácter Hay un espacio al principio de la cadena, no el signo menor que '
$(" & lt; p & gt& lt/p & gt; test" // No es estándar, hay una "prueba" adicional después del html tag ”, se ignorará.
$(" # & lt; p & gt& lt/p & gt;);//Error, comenzando con un signo de almohadilla, seguido de ningún selector CSS, puede El tercer error es en realidad más que una advertencia.
jQuery arrojará directamente un error y detendrá la ejecución continua del código javascript. Generalmente, comienza con un signo de libra, como $("# test"), que en realidad es un selector normal, pero en el ejemplo anterior, va seguido de una cadena html, que jQuery considerará como un XSS potencial. ataque.
6. El método jquery.fn.attr se usa incorrectamente (¡este es un error muy fácil!)
En jQuery Migrate, la advertencia sobre el método attr es la siguiente:
JQMIGRATE: jquery . attr(' valor ', val) ya no establece atributos
JQMIGRATE: jquery fn . >
JQMIGRATE: jquery . fn . attr ('checked') puede usar atributos en lugar de atributos
Jqmigrate: jquery.fn.attr (props, pass) está en desuso. En la práctica, descubrí cómo obtener el valor de un formulario de entrada en el código anterior. $('entrada'). attr('valor');¿Cómo se configura? $('entrada'). attr('value', 'helloworld'). ¡Esto es incorrecto en la nueva versión! El enfoque correcto debería ser
$('input'). val(); //Obtiene el valor ingresado actualmente en el formulario de entrada.
$('entrada'). val(' hola mundo '); //Establece el valor ingresado en el formulario de entrada.
Si es un get o un set depende sólo de si el método val se llama con parámetros.
Si desea configurar el cuadro del botón de opción manualmente (por ejemplo
$('input').prop('checked', true); //Establezca el cuadro del botón de opción al estado marcado.
$('input').prop('checked'); //Obtiene si el botón de opción está marcado, devuelve verdadero o falso. Este es el método utilizado desde jQuery 1.6. Los atributos deshabilitados y seleccionados también usarán el método prop. Entonces, ¿cuándo usar el método attr? La diferencia entre ellos es que prop establece los atributos inherentes del elemento, mientras que attr establece los atributos personalizados escritos en la etiqueta html. p>& ltinput type = " casilla de verificación " marcada = " marcada " jaja = " hola " & gt>
var v1 = $('input ') prop("marcada"). Devuelve verdadero/falso, si está seleccionado cambiará con el cambio de estado.
var v2 = $('input '). en la etiqueta y no cambiará
var v3 = $('input '). attr("jaja"); // Devuelve el atributo personalizado "hola". ('input '). props("jaja"); // Devuelve indefinido, no existe dicha propiedad inherente. El cuarto error mencionado anteriormente, jQuery.fn.attr (props, pass) está en desuso y nunca se ha visto en la realidad. proyectos Después de leer el código fuente, la escritura de jquery que activa esta advertencia se puede ignorar
7. Los parámetros ilegales se pasan a $.parseJSON /p>
En jQuery Migrate, se genera este error. la siguiente advertencia
JQMIGRATE: jQuery.parseJSON requiere una cadena JSON válida
La razón por la que jQuery cambió esta interfaz es para ser coherente con la interfaz JSON.parse que viene con. navegador, y es efectivo a partir de jQuery 1.9.
Este problema es común cuando AJAX recibe valores de retorno del servidor. El servidor puede devolver una cadena vacía y llamar a esta interfaz generará un error. Se debe pasar una cadena JSON válida a $.parseJSON. El método de corrección es el siguiente:
var v1 = $. analizar JSON(str);reemplazar con
var v1 = $. parseJSON(str? str: "null"); 8. Se utiliza la cadena de evento "hover" abandonada.
En jQuery Migrate, este error genera la siguiente advertencia.
jq migrar: El pseudoevento "hover" ha quedado obsoleto, al registrar un controlador de eventos usando "mouse enter mouselive", "hover" solía ser tratado como el otro de los dos eventos "mouse enter nombre de mouselive. El apodo ha sido eliminado, reemplácelo con 'mouseenter mouseleave' en el código.
9.jQuery.fn.andSelf ha sido reemplazado y ya no se puede utilizar.
La advertencia en jQuery Migrate es:
jqmigrate: La función de reemplazar jquery.fn.andself() con jquery.fn.addback() es exactamente la misma y puede ser directamente reemplazado.
Los anteriores son problemas comunes en la actualización de jQuery. Por supuesto, en aras de la excelencia, todavía tenemos que estudiar cómo son los problemas inusuales. Cabe señalar que los siguientes problemas nunca se han encontrado en mis proyectos reales y son relativamente raros, pero no hay garantía de que no aparezcan en su proyecto. Solo como referencia para programadores interesados.
Jianjiankeng
-
1.jQuery no es compatible con el modo extraño del navegador.
El método para desencadenar este error es muy simple, simplemente
La advertencia de error que muestra jQuery Migrate es la siguiente:
2. estar vinculado al nodo del documento.
La advertencia en la migración de jQuery es la siguiente:
JQMIGRATE: los eventos AJAX deben adjuntarse al documento: ajaxStart
Los eventos globales de Ajax en jQuery incluyen la siguiente interfaz : Inicio de Ajax, Ajax detenido, Ajax enviado, Ajax completado, error de Ajax, AJAX exitoso. Debido a que estos eventos rara vez se utilizan, también se clasifican como pozos raros. A partir de jQuery 1.9, estos eventos solo se pueden vincular a $(documento). El método de corrección es el siguiente (del sitio web oficial de jQuery):
$("#status "). ajaxStart(function(){ $(this). text(" Ajax inició "); }); modificado a
$(document). Ajax start(function(){ $(" # status "). text(" Ajax comenzó "); }); 3. Los navegadores IE6/7/8 no admiten la modificación del atributo de tipo del formulario de entrada.
En la migración de jQuery, la advertencia es esta:
Jq migrar: No se puede cambiar el "tipo" de entradas o botones en IE 6/7/8. Puede cambiar directamente el cuadro de texto a un botón de opción, cuadro de selección múltiple, etc. Aunque creo que este no es un comportamiento elegante, muchos navegadores lo admiten, excepto IE6/7/8. Se recomienda utilizar esta función con moderación en la práctica.
Propiedades y métodos de eliminación de 4.$. Limpio, dólar. evento.manejar, $. atrfn, $. Utilice fn.data ('eventos ') y jquery.event.trigger.
En las migraciones de jQuery, la advertencia es esta:
JQMIGRATE: jQuery.clean() ha quedado obsoleto
JQMIGRATE: jQuery.event.handle no está documentado En el archivo, en desuso
JQMIGRATE: jQuery.attrFn ha quedado en desuso
JQMIGRATE: jQuery.fn.data('events ') está en desuso
Jq migrar: Los eventos globales no tienen documentación y no se recomiendan. Si ha utilizado estas cinco interfaces en su propio código, es realmente un experto que ha estudiado cuidadosamente el código fuente de jQuery. Debido a que estas cinco interfaces nunca aparecieron en la documentación oficial de jQuery, y algunas de ellas se eliminaron en versiones posteriores, se puede decir que aparecieron y desaparecieron sin dejar rastro. Si observa el código fuente, existe la posibilidad de encontrarlos en versiones anteriores, pero no se recomienda. Se recomienda utilizar otros métodos para lograr las funciones correspondientes. ¿Qué? ¿No sabes cuáles son estas cinco funciones? Muy bien. ¿No necesitas saberlo ahora?
5. El dólar obsoleto. Utilice el método sub().
La advertencia para este problema en jQuery Migrate es la siguiente:
Jqmigrate: jquery.sub() ha quedado obsoleto. Esta interfaz es muy sencilla y no acepta ningún parámetro. Se utiliza para crear una copia de jQuery. Este método ya no se utiliza a partir de jQuery 1.7.
6. Utilice el método jQuery.fn.error obsoleto.
La advertencia para este problema en jQuery Migrate es la siguiente:
Jqmigrate: jQuery.fn.error() ha quedado obsoleto. En jquery, el error es el mismo evento que el clic. Registre un controlador para este evento, anteriormente $(selector). error(function(){}), ha sido abandonado y puede ser reemplazado por $ (selector). en ('error ', función () {}).
Código de muestra
-
Dado que este artículo se autodenomina "Enciclopedia XX", debe ser lo más completo posible. Para comprender cómo entrar en estos pozos, finalmente escribimos un código js que requiere la menor cantidad de código para superar todos los pozos en la biblioteca de migración jQuery. Es decir, dejar que la biblioteca de migración jQuery imprima todo el código que pueda imprimir. El código final es el siguiente (el parque de blogs no tiene forma de cargar archivos adjuntos, solo código), que es muy simple y fácil de entender.
Abra el archivo index.html y presione F12 para abrir la consola. Puede ver la magnífica advertencia de la consola_
& lt! -Nombre del archivo: index.html-><! -<! DOCTYPE html & gt-& gt;//keng0 modo extraño
& lthtml & gt
& lthead & gt
& ltmeta charset = " utf-8 "/& gt;
& lttitle & gtJQuery Upgrade Trampling Encyclopedia
& ltscript type = " text/JavaScript " src = "/jquery-2.1.4 min . gt；& lt/script & gt;
& ltscript type = " text/JavaScript " src = "/jquery-migrate-1 . 2 . 1 . js " & gt; ;
& lt/head & gt;
& ltbody & gt
& ltp class="test" id="a " >a & lt/ p>；
& ltinput type = " radio " id = " b " valor = " b "/& gt;
& ltinput type = " radio " id = " c " valor = " c "/& gt;
& ltp id="d" value="d " >Prueba& lt/p & gt;
& ltscript type = " texto/JavaScript "& gt;
//Empieza a entrar en la trampa
//Usa el $. método attrFn.
var keng1 = $. attr fn | | { };
//Esta función se llama internamente en jQuery y nunca se ha visto en proyectos reales y puede ignorarse. Esto es sólo para activar una advertencia de error.
var keng2 = $. attr($("#a"), "class", "xxx", true);
//Cambiar el tipo del cuadro de entrada no es compatible con //IE6, IE7 e IE8.
var keng3 = $("Ingrese #b"). attr("type", "text");
//Attr se usa donde se debe usar prop.
var keng4 = $("Ingrese #c"). attr("checked", true);
//Utilice attr para obtener el valor del atributo. Si es correcto, debe usarse. valor().
Definir variables