Red de conocimiento informático - Material del sitio web - Cómo utilizar múltiples jQuery en una página

Cómo utilizar múltiples jQuery en una página

El método consiste en utilizar noConflict() de jQuery para permitir la captura de varias versiones.

Cuando importamos jQuery, jQuery solo inyecta dos variables en el espacio global de la ventana:

window.$ = window.jQuery = { jQuery object }; >Al mismo tiempo, jQuery conserva las referencias originales a los objetos window.$ y window.jQuery internamente. Cuando llamamos:

var $jq = $.noConflict();

window.$ se restaura, pero window.jQuery sigue siendo jQuery.

Cuando llamamos:

var $jq = $.noConflict(true);

window.$ y window.jQuery se restauran.

Entonces, permitir que existan versiones antiguas y nuevas de jQuery **** se puede hacer de esta manera:

En myscript.js, use $jq para acceder a la versión 1.11 de jQuery.

En este punto el problema está solucionado.

Sin embargo, introducir dos versiones de jQuery arruinará la página. ¿Qué pasa si alguien no entiende el código y elimina var $jq = jQuery.noConflict(true);? O, si intercambias las dos líneas que importan jQuery, no obtendrás la versión correcta de jQuery.

La mejor manera es mantener la página sin cambios y simplemente hacer referencia al nuevo archivo js que escribimos:

De esta manera, hacemos referencia a la última versión de jQuery en myscript.js, y A la página no le importa si tiene jQuery o qué versión de jQuery tiene.

Empiece a escribir una solución nueva y mejor. Primero, determine el cuerpo de myscript.js:

// myscript.js (function () { // BEGIN // TODO: código javascript aquí...// END })();

El uso de funciones anónimas es una buena práctica ya que no contamina las variables globales y elimina el acceso al código externo.

El siguiente paso es incrustar el código jQuery 1.11 directamente:

// myscript.js (function () { // BEGIN !function(a,b){"object" ==tipo de móduloamp;amp; "objeto"== tipo de módulo.exportaciones?... if(kamp;amp;j[k]amp;amp;(e||j[k].data)||void 0! ==d |||"cadena"! =tipo de b)return k||(k=...}, cur: function(){var a=Zb.propHooks[this.prop]; return aamp;amp;a .get? a.get(thi... var $ = jQuery.noConflict(true); // TODO: código javascript aquí...// END })(

Por supuesto, el La versión incrustada es código comprimido, ***3 líneas y luego agrega una oración:

var $ = jQuery.noConflict(true);

Tenga en cuenta que $ es una variable local; , puede ser Cada vez que se haga referencia al código subyacente, es igual que cualquier otra versión en la página.

El paso final es verificar si el protocolo jQuery nos permite incrustar el código fuente de jQuery. directamente en nuestro propio código JavaScript

.