欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

在一个页面中同时使用多个版本的jQuery

shiping1 的头像

在一个页面中同时使用多个版本的jQuery

之前在客户的网站上遇到一个关于同时使用多个版本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/


普通分类: