当加载两个jquery文件时，如何处理Uncaught TypeError:$(...).popover不是函数? [英] How to handle Uncaught TypeError: $(...).popover is not a function when two jquery files got loaded?
问题描述
通用场景
<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不是函数.
This will throw Uncaught TypeError: $(...).popover is not a function.
我的场景
我有使用其他应用程序的应用程序，而该应用程序由其他应用程序使用.
I have application which consumes other application and it is consumed bye somother application.
i.e)A ="my_app"
A通过在 app A
A被C消耗
- 我在应用A 中具有jquery和bootstrap. 应用C 可以使用jquery和bootstrap作为可选请求.
- 应用A 使用应用B ，其中应用B 具有另一个不可选择的jquery.当我在HTML中添加脚本时，应用B 效果很好.
- 但是当我延迟加载 app B脚本时，动态导致未捕获 TypeError:$(...).popover不是函数.因为 app B jQuery是在Bootstrap之后加载的.
- I have jquery and bootstrap in app A. The app C can make request with jquery and bootstrap as optional.
- app A consumes app B where app B is having another jquery which is not optional. The app B works well when I add the scripts in HTML.
- But when I lazyload app B script dynamically cause Uncaught TypeError: $(...).popover is not a function. Because the app B jquery Loaded after Bootstrap.
尝试过的解决方案:
- 在应用A 中使用了jquery.noConflict.当同时使用延迟加载添加应用B 时，效果很好.
- 当 app C 消耗 app A 时出现问题.它会抛出 $不是其应用程序中的功能
- Used jquery.noConflict in app A. Works well when app B added using Lazy load also.
- The problem arises when app C consumes app A. it throws $ is not a function in thier app
面临的问题: 我不能要求 app B 和 app C 小组更改代码.我该如何处理?
Problem facing: I cant ask the app B and app C team to change code. How can i handle this?
推荐答案
封装您的函数.这样，在封装函数的范围内，$对象将始终是相同版本的jQuery，并定义了相同的插件.
encapsulate your functions. That way in the scope of your encapsulated function the $ object will always be the same version of jQuery, with the same plugins defined.
逃避作用域的那一刻(就像我在使用doStuff的示例中所做的那样，事情默认为全局对象，并且出于所有意图和目的，您已经失去了对旧jquery对象的引用.
The moment you escape your scope(as I do in my example with doStuff things default to the global object, and for all intents and purposes you've lost the reference to the old jquery object.
如果要在两个jquery对象上都使用插件，我建议在第二个jquery加载后通过$ .getScript()重新加载插件脚本.这不会造成额外的开销，因为浏览器将缓存那些文件.
If you want plugins on both jquery objects I advice to load the plugin scripts via $.getScript() anew when the second jquery has loaded. This should not cause extra overhead as the browser will have those files cached.
这样，您就可以在一个页面上同时拥有多个版本的jquery，angular，无论是哪个版本，每个版本都在自己的作用域内，在这里，我们非常了解$，jQuery或任何变量的状态:-)
This way you can have multiple versions of jquery, angular, whatever together on one page, each in it's own scope where it's blissfully unaware of the state of $, jQuery or whatever variable :-)
有趣的是，您可以安排脚本的加载时间.一起编译您特定的一组库，因为getScript具有一个回调，该回调将告诉您完成的时间. 完成所有脚本后，触发一个函数以执行其余代码，传递相关对象等.
The nice thing is about this is you can time the loading of the scripts. Compile together your specific set of libaries, since getScript has a callback that'll tell you when they are done. When all scripts are done, trigger a function to execute the rest of the code, pass along the relevant objects, etc..
这样，您就始终知道对象具有什么并且可以做什么:-)
That way you always know what object has and can do what :-)
(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%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这篇关于当加载两个jquery文件时，如何处理Uncaught TypeError:$(...).popover不是函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
