我编写了一个小部件,它使用最新版本的 jQuery、Bootstrap 和 Dojo for AMD。问题是它将嵌入到具有旧版本 jQuery 的页面中。 (客户端页面,我无法控制)
我正在尝试使用 jQuery 的 noConflict 选项,但当我尝试加载 Bootstrap 时无法使其工作。
简单的无冲突工作:
require(["jquery"], function (jQueryForPlugin) {
// create local scope var and resets the global $ and jQuery
// to their previous values, so we don't mess up client's page
var jQuery = jQueryForPlugin.noConflict(true);
var $ = jQuery;
// Now I can use $ like normal, and it will use my widget's jQuery version.
$('.some-class').hide();
问题出在其他库上,特别是 Twitter Bootstrap,当我加载它们时,它们看不到新的作用域 jQuery 变量。
Bootstrap 无法看到本地 noConflict $ 和 jQuery : JSFiddle of problem
require(["jquery"], function (jQueryForPlugin) {
// Resets the global $ and jQuery to their previous values.
var jQuery = jQueryForPlugin.noConflict(true);
var $ = jQuery;
require([ 'bootstrap'], function ( bootstrap) {
// ERR: Bootstrap load throws error because it can't find 'jQuery' in its scope.
最佳答案
Vanilla Bootstrap 不兼容 AMD。您必须稍微编辑一下 Bootstrap 的 JS,以便自己添加到 AMD 模块样板中,这样它就可以 require()
jQuery。
另请参阅https://github.com/twbs/bootstrap/pull/12909
[ 编辑:Bootstrap v3.2.0 应该与 AMD 兼容!请参阅https://github.com/twbs/bootstrap/pull/13772 ]
关于javascript - 如何将 jQuery noConflict 与 Bootstrap 和 Dojo 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24045961/