如何处理未捕获的类型错误：加载两个 jquery 文件时 $(...).popover 不是函数？答案

【问题标题】：How to handle Uncaught TypeError: $(...).popover is not a function when two jquery files got loaded?如何处理未捕获的类型错误：加载两个 jquery 文件时 $(...).popover 不是函数？
【发布时间】：2016-02-11 07:05:27
【问题描述】：

一般场景

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>.

这将抛出 Uncaught TypeError: $(...).popover is not a function。

我的情景

我有一个消耗其他应用程序的应用程序，它被其他应用程序消耗。

即）A = "my_app"

A消耗B(angular app)，在app A中添加app B的脚本文件

A被C消费通过api调用

我在 app A 中有 jquery 和 bootstrap。 app C 可以使用 jquery 和 bootstrap 作为可选的请求。
app A 使用 app B，其中 app B 有另一个 jquery，这不是可选的。当我在 HTML 中添加脚本时，app B 运行良好。
但是当我延迟加载 app B 脚本 动态导致 未捕获 TypeError: $(...).popover 不是函数。因为 app B jquery 在 Bootstrap 之后加载。

已尝试的解决方案：

在 应用 A 中使用了 jquery.noConflict。当应用 B 也使用延迟加载添加时效果很好。
app C 使用 app A 时会出现问题。它抛出 $ 不是他们的应用程序中的功能

面临的问题：我不能要求 app B 和 app C 团队更改代码。我该如何处理？

【问题讨论】：

你能告诉我们你可以执行的代码吗？
分散在几个可以执行的地方

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我以前遇到过类似的问题，这是我的解决方案：

var j = jQuery.noConflict();

// Do something with jQuery
j( "div p" ).hide();

// Do something with another library's $()
$( "content" ).style.display = "none";

如果您可以发布代码，这将有所帮助。我不确定我是否完全了解所有内容。

【讨论】：

现在你已经声明了 var j = jQuery.noConflict();在您的应用程序中。如果有人在他们的代码中使用你的应用程序，它会抛出 $ is not a function

【解决方案2】：

封装你的函数。这样，在封装函数的范围内，$ 对象将始终是相同版本的 jQuery，并定义了相同的插件。

当你逃离你的范围时（就像我在 doStuff 的例子中所做的那样，默认为全局对象，并且出于所有意图和目的，你已经失去了对旧 jquery 对象的引用。

如果您想要两个 jquery 对象上的插件，我建议在第二个 jquery 加载后通过 $.getScript() 重新加载插件脚本。这不会造成额外的开销，因为浏览器会缓存这些文件。

通过这种方式，您可以在一个页面上同时拥有多个版本的 jquery、angular 等，每个版本都在其自己的范围内，完全不知道 $、jQuery 或任何变量的状态 :-)

这样做的好处是您可以为脚本的加载计时。一起编译您的特定库集，因为 getScript 有一个回调会告诉您何时完成。完成所有脚本后，触发一个函数来执行其余代码，传递相关对象等。

这样你总是知道什么对象有什么可以做什么:-)

(function($) {
    $(document.body).append('<img src="http://weknowyourdreamz.com/images/happy/happy-03.jpg">');
  
    $.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",function() {
        doStuff();
    });
  
    console.log("JQuery version encapsulated",$.fn.jquery);
  
    
})(jQuery)

function doStuff() {
  console.log("JQuery version global",$.fn.jquery);
}

img {width:100%;height:100%;}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：