我没有填充所有的jquery插件,因为有很多.相反,我正在使用单独的requirejs调用加载jquery.然后,在回调中,我加载其余的东西.这样我就不必维护所有jquery插件的填充程序列表.
对于jquery-ui,我使用垫片使其依赖于jquery.然后我使用小部件工厂的所有自定义模块在其依赖项列表中都有“jquery-ui”.
在我的模板中……
requirejs.config({ baseUrl: ATHLETE.siteConfig.jsBaseUrl,paths: { 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min','jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min' },shim: { "jquery-ui": ['jquery'] },waitSeconds: 15 }); requirejs(['jquery'],function($) { requirejs(['site'],function() { requirejs(['mypage']); }); });
请注意,我在mypage.js之前加载site.js.他们有一些共享依赖.在我的构建配置中,我从mypage.js中排除了site.js,因此共享依赖项被编译到site.js而不是mypage.js.因此,我需要在加载mypage.js之前完全加载site.js,否则require可能会尝试单独加载这些共享依赖项.
这是我的一个示例自定义模块,它依赖于jquery-ui.
define([ 'jquery','jquery-ui' ],function($) { $.widget('ui.viewAllSponsorsWidget',$.ui.dialog,{ options: { autoOpen: false,dialogClass: 'view-all-sponsor-dialog-wrap',draggable: false,modal: true,resizable: false,width: 370,height: 400 } }); });
错误$.widget未定义是由我和我的类似自定义模块的第5行引起的.再次,它真的不一致,很难再现.通常情况下,即使清除缓存,我也不会收到错误.任何人都可以想到在jquery-ui完全加载之前第5行可能会被执行的方式吗?
更新2013年8月16日
我已经能够跟踪这一点了.
我创建了一个依赖于jquery和jquery-ui的简单模块.
define([ 'jquery',function($) { console.log('$.widget is defined? ' + Boolean($.widget)); console.log('jQuery.widget is defined? ' + Boolean(jQuery.widget)); });
输出如下:
LOG: $.widget is defined? false LOG: jQuery.widget is defined? true
所以不知何故全局jQuery对象定义了widget,但requirejs提供给我的副本却没有.
解决方法
bower install jquery-ui
然后在requirejs.config中只需将jquery_ui添加到paths {}部分.不再需要垫片了.
如果你只想加载你需要的小部分jquery-ui,那么bower安装jquery-ui然后使用requirejs提供的构建工具来创建一个包.否则,如果你只尝试导入一个单独的文件,那么每个jquery-ui文件都会尝试加载它们的依赖项,你会得到“widget not defined”或“找不到文件widget.js”等内容.
我在这里写了一篇快速的文章:https://hendrixski.wordpress.com/2015/04/17/adding-only-the-parts-of-jquery-ui-that-you-need-into-your-requirejs-project/
希望有所帮助.