如何通过jQuery noConflict让qTip2调用新版jQuery（Drupal场景）

我之前也碰到过类似的Drupal旧版本+多jQuery共存的棘手问题，核心其实就是让qTip2在加载时能识别到你的新版jQuery实例，而不是默认的旧版全局jQuery。结合你的引入顺序，给你几个靠谱的解决方案：

方案一：临时切换全局jQuery（最推荐，无需修改插件） #

这个方法不用动qTip的代码，只要调整加载前后的全局变量，就能让qTip绑定到新版jQuery上：

1. 先把旧版jQuery的引用存起来，避免后续覆盖后丢失
2. 引入新版jQuery后用noConflict释放全局变量，把jQuery和$还给旧版
3. 临时把全局jQuery和$指向新版，加载qTip
4. 恢复全局变量为旧版，保证Drupal原有脚本正常运行

具体代码如下：

<!-- 旧版jQuery 1.2.6 -->
<script src="path/to/jquery-1.2.6.js"></script>
<script>
// 先缓存旧版jQuery和$，后面要恢复
var $oldJQuery = jQuery;
var $old$ = $;
</script>

<!-- 新版jQuery 3.3.1 -->
<script src="path/to/jquery-3.3.1.js"></script>
<script>
// 释放全局jQuery/$，还原为旧版，同时把新版存在自定义变量里
var $jq = jQuery.noConflict(true);
</script>

<!-- 临时切换全局变量为新版jQuery -->
<script>
window.jQuery = $jq;
window.$ = $jq;
</script>

<!-- 加载qTip2，此时它会绑定到全局的新版jQuery上 -->
<script src="path/to/jquery.qtip.min.js"></script>

<!-- 恢复全局变量为旧版，确保Drupal原有功能不受影响 -->
<script>
window.jQuery = $oldJQuery;
window.$ = $old$;
</script>

之后你就可以用$jq('.target').qtip({...})来调用新版jQuery下的qTip功能了。

方案二：修改qTip2的绑定代码（适合能编辑插件文件的情况） #

qTip2的源码（包括压缩版）本质是一个自执行闭包，它会接收全局的jQuery作为参数。你可以直接修改压缩版的最后一行：

找到qTip2压缩文件的末尾，类似这样的代码：

!function(e){...}(jQuery);

把括号里的jQuery改成你保存新版jQuery的变量名（比如$jq），变成：

!function(e){...}($jq);

这样qTip2就会直接绑定到你的新版jQuery实例上，无需切换全局变量。

方案三：手动挂载qTip到新版jQuery（应急方案） #

如果上面两种方法都没法用，你可以在加载完qTip后，把它从旧版jQuery上复制到新版上：

// 加载完qTip后执行
$jq.fn.qtip = jQuery.fn.qtip;
// 如果qTip还有全局工具方法，也要同步复制
if (jQuery.qtip) {
  $jq.qtip = jQuery.qtip;
}

不过这个方法有一定风险，因为部分插件内部可能依赖旧版jQuery的私有属性，所以优先用前两种方案。

内容的提问来源于stack exchange，提问作者user5858