我正在开发的环境正在使用jQuery 1.7.1,而我需要专门使用jQuery 2.1.3。但是当我确实使用2.1.3时,一些遗留代码中断(如使用1.7.1一样),因此我不得不在2.1.3上使用jQuery.noconflict
jquery-private.js:
define(["jquery"], function(jQuery){
return jQuery.noConflict(true);
});
所以在我的requirejs配置文件中,我有这个:
config.js:
requirejs.config({
baseUrl: '../',
paths: {
'jquery': 'js/jquery/jquery',
'jqueryui': 'js/jquery-ui/jquery-ui',
'bootstrap': 'js/bootstrap',
},
map: {
// '*' means all modules will get 'jquery-private'
// for their 'jquery' dependency.
'*': {
'jquery': 'jquery-private'
},
// 'jquery-private' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'jquery-private': {
'jquery': 'jquery'
}
},
shim: {
'bootstrap': {
deps: ['jquery']
}
}
});
所以当我需要引导时
widget.js:
require([
"jquery",
"bootstrap"
], function(jqr){
// SOME CODE
});
我收到一个错误:
未捕获的错误:Bootstrap的JavaScript需要jQuery 1.9.1或更高版本
因此,引导程序将启动1.7.1。
在不更改bootstrap.js文件的情况下,如何使它拾取2.1.3?
您当前的尝试无法正常进行,因为您的jquery-private
设置确保将jQuery作为RequireJS模块加载后立即noConflict()
进行调用。只要RequireJS加载的代码通过define
调用(例如define(['jquery'], function ($) {
)引用jQuery ,就没有问题。但是,填充的任何代码都将引用$
或jQuery
全局变量,因此将引用版本1.7.1。
在没有任何其他约束的情况下,首选解决方案是使整个代码库使用相同的jQuery版本。将1.7.1升级到1.x系列中的最新版本,然后使用它。根据下载页面,2.x与1.x系列中相对较新的版本(我会说1.9.x及更高版本)之间没有API差异。当然,这意味着依赖于1.7.1的代码可能必须进行更新才能与1.x系列中的最新jQuery一起使用。
我本来建议升级到2.x系列,但是您在注释中提到需要与IE 6和7兼容。请注意:如果您确实设法为同一页面加载了1.7.1和2.1.3,则该部分使用2.1.3的代码将与IE 6和7不兼容,因此该页面实际上不再与IE 6和7兼容。
要使用此解决方案,除了必须进行的升级更改外,还必须:
确保jQuery在RequireJS之前加载。否则,它将检测RequireJS并进行调用,define
但随后将无法可靠地将其用于未随RequireJS一起加载的代码。(我说它不会“可靠地可用”,因为尽管一旦jquery
模块被加载,则jQuery
and$
全局变量将存在,问题在于未与RequireJS一起加载的代码无法等待RequireJS加载jQuery。因此,除非您努力编写自己的同步代码,它将无法可靠地运行。)
创建一个RequireJS模块,该模块仅使jQuery可以在RequireJS可用之前作为模块来加载jQuery,因此:
define('jquery', function () { return jQuery; });
可以将其放置在您致电之前require.config
。这将创建一个“假”jquery
模块,该模块仅返回全局jQuery
符号。(它也可以返回$
。)
我看不到上述解决方案的可靠替代方案。提出可以证明另一种方法的概念证明并不难。但是,一旦您尝试在实际项目中使用它,它就会失败。问题在于RequireJS本质上是异步的,因此您无法开始与$
andjQuery
全局变量打交道以将其设置为所需的方式,并确保您想要发生的一切都会在您希望发生的时刻发生。此外,任何在RequireJS之前加载的代码可能会启动异步操作,而这些操作可能与RequireJS的模块加载交错发生,这会给整个操作带来麻烦。我宁愿不要提出一旦从概念验证到实际应用就会失败的解决方案。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句