这里是 RequireJS 新手。尝试将一些我以前工作正常的 JQuery 代码转换为使用 RequireJS 工作。
我的页面标题通过脚本标签加载三个 JS 文件—— require.js 本身、我的 require.cfg.js 和具有站点特定功能的 boot/main.js。
相关 require.cfg.js 摘录:
,paths: {
'boot': 'src/boot'
,'jquery': 'lib/jquery.min'
,'jquery.masonry': 'lib/plugins/masonry.pkgd.min'
,'jquery.imagesloaded': 'lib/plugins/imagesloaded.pkgd.min'
}
,shim: {
'jquery': {
exports: 'jQuery'
}
,'jquery.masonry': ['jquery']
,'jquery.imagesloaded': ['jquery']
}
启动/main.js:
require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($) {
// The following code worked just fine when I included it in the header of the page as-is
$(function() {
var $container = $('#container');
// This doesn't work
$container.imagesLoaded(function() {
// Neither does this
$('#container').masonry({itemSelector : '.item',});
});
});
});
我可以确认浏览器正在找到并加载所有这些 JS 文件。我确认如果我这样做:
require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {
Masonry 和 ImagesLoaded 变量设置正确......但我不想在没有 jQuery 的情况下继续
但是当我尝试在 JQuery 容器对象上调用 .imagesLoaded() 和 .masonry() 时,我得到:
未捕获的类型错误:对象 [object Object] 没有方法“imagesLoaded”
如果我注释掉 imagesLoaded 行,我会得到:
未捕获的类型错误:对象 [object Object] 没有方法“masonry”
不确定我在这里做错了什么......?从我在其他 StackOverflow 问题中读到的内容来看,代码对我来说看起来是正确的......?
Thanks!
Update:
如果我像这样以非 JQuery 方式使用此代码,它会起作用:
var container = document.querySelector('#container');
imagesLoaded(container, function() {
var msnry = new Masonry( container, {
itemSelector: '.item',
});
});