之前在客户的网站上遇到一个关于同时使用多个版本jQuery的问题。客户是澳洲Top3的保险公司之一。客户的所有branding的官网都是基于Drupal的CMS系统,Drupal本身以及Drupal的某些老plugin会使用1.3x低版本的jQuery,但是Devs在开发过程中有使用高版本jQuery的需求。
终于有一天,在一个新迭代上线后网站挂了。原来的hack方法失效的原因在于客户的开发关闭了某个drupal模块,而该模块引入了高版本的jQuery。
最原始的方法
来看一下,客户最早使用的最原始的方法:
查阅jQuery的源码,会发现这么一段。
if ( typeof noGlobal === strundefined ) {
window.jQuery = window.$ = jQuery;
}
而客户的hack非常简单,直接这样:
if ( typeof noGlobal === strundefined ) {
window.jQueryLatest = jQuery;
}
这种直接对jQuery源代码进行更改的方法显得简单粗暴。设想如果jQuery是取用部署在jQuery官方cdn上的jQuery,这种hack就无能为力了。
noConflict方法
jQuery对象有一个noConflict方法。这个方法本身的目的很简单,就是恢复jQuery被引入之前window上的jQuery和$变量的原有值,代码也非常简单:
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
相信通过阅读代码,noConflict的用法已经非常明了了,使用jQuery.noConflict(false)将会复原window.$变量,而jQuery.noConflict(true)将会同时复原window.jQuery变量。
使用低版本jQuery动态引入高版本的jQuery
回忆一下我们平时是怎样动态加载js的? 最简单的方法是使用jQuery.getScript(url)。 jQuery的getScript方法是jQeury.ajax方法的一个简写,所以通过jQuery的getScript方法我们可以这样做来引入多个版本的jQuery:
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
jQuery.getScript("http://libs.baidu.com/jquery/1.10.0/jquery.js").success(
function() {
console.log(jQuery.fn.jquery);
window.jQueryLatest = jQuery;
jQuery.noConflict(true);
});
});
</script>
注意一下我这里引入的“老版本”jQuery是1.5.0之后的版本,因此ajax返回的是一个deffered对象。所以我使用了promise的链式调用。如果是1.5.0之前的版本,请使用老的XHR对象操作。
使用原生javascript动态引入js文件
如果两个版本的jQuery你都希望是动态引入,那么可以使用原生javascript来引入:
var scriptTag = document.createElement('script');
scriptTag.text = JSData;
document.body.appendChild(scriptTag);
var script = document.createElement('script');
script.src = "http://libs.baidu.com/jquery/1.9.0/jquery.js";
script.onload = function() {
console.log(jQuery.fn.jquery);
};
document.body.appendChild(script);
至于noConflict的处理方法则同上。
来自 http://chenzhihao.github.io/blog/contain-multiple-version-jquery-in-one-page/