带有 JQuery、Masonry 和 ImagesLoaded 的 requireJS：Object [object Object] 没有方法“imagesLoaded”

Question

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']
}

boot/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() 时，我得到：

Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'

如果我注释掉 imagesLoaded 行，我会得到：

Uncaught TypeError: Object [object Object] has no method 'masonry'

不确定我在这里做错了什么......？从我在其他 StackOverflow 问题中读到的内容来看，代码对我来说看起来是正确的......？

谢谢！

更新：

如果我像这样以非 JQuery 方式使用此代码，它可以工作：

        var container = document.querySelector('#container');
        imagesLoaded(container, function() {
            var msnry = new Masonry( container, {
                itemSelector: '.item',
            });
        });

Answer 1

也尝试为 shim 中的每个插件定义导出...

, paths: {
    boot: 'src/boot'
    , jquery: 'bower_components/jquery'
    , masonry: 'bower_components/masonry',
    , imagesloaded: 'bower_components/imagesloaded'
}
, shim: {
    jquery: {
        exports: 'jQuery'
    }
    , masonry: {
        deps : ['jquery'],
        exports : 'jQuery.masonry'
    }
    , imagesloaded: {
        deps : ['jquery'],
        exports : 'jQuery.imagesLoaded'
    }
}

Answer 2

试试这个：

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {

    // 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',});
        });

});

});

Answer 3

好的，我想我有你的问题（和我的问题！）的答案。

如果您要安装托管在 github 上的版本，您可能安装的是“vanilla”版本，而不是 jquery 插件。例如，如果您通过 bower 安装，这就是您将要做的事情，这就是我正在做的事情。

这是我在 bower 上搜索的结果：

% bower search masonry
# jquery-masonry git://github.com/desandro/masonry
# masonry git://github.com/desandro/masonry.git
# $.masonry git://github.com/tysoncadenhead/masonry
# angular-masonry git://github.com/passy/angular-masonry.git
# jquery.masonry git://github.com/tysoncadenhead/masonry.git

AFAICT、jquery-masonry、$.masonry 和 jquery.masonry 都指向同一个源（在两个不同的位置），它不是 jquery 插件，它只是砌体的“香草”版本。

相反，只需从 here 下载并解压缩文件 jquery.masonry.js，但它位于您的资产路径中，并为其添加一个依赖于 jquery 的 shim。

完成所有这些之后，它应该可以工作。当然，由于它不是通过 bower 安装的，因此您无法像使用其他 bower 包一样管理依赖项。老实说，我不明白发生了什么，但它看起来像是包维护者方面的问题。

希望对您有所帮助。

更新：虽然上述方法有效，但请注意，从 meta.metafizzy.co 下载的版本相当旧，并且依赖于过时的 jquery 版本。我想我只是打算用香草版本，插件似乎没有维护。

Answer 4

尝试使用 jquery-bridget:https://github.com/desandro/jquery-bridget 将砌体转换为 jquery 插件。我创建了一个由 requirejs 加载的新 js 文件，以确保在应用程序开始运行之前对其进行转换：

//masonry-config.js:
'use strict'

define(['jquery-bridget', 'masonry'], function(Bridget, Masonry){
    Bridget('masonry', Masonry );
});   

然后在我的requirejs文件中

//main.js
require.config({
   paths: {
       'masonry-config': 'masonry-config'
       .....
   },
   shim: {  
       'angular-masonry': ['angular', 'masonry'],
       'angular' : {
         deps: ['imagesloaded', 'masonry-config'],
         exports: 'angular'
       },
       'masonry': ['imagesloaded'],
   } 
}

这适用于我的应用程序，它使用 angular 和 angular-masonry（带砖石），因此您可能需要进行一些不同的配置，但希望能给您一些想法。

Answer 5

在我们的特定案例中，我们在主模板中包含并配置了 RequireJS，但希望在一个特定页面上包含 Masonry/ImagesLoaded。

我们将代码保存在模板中：

<script type="text/javascript" src="/path/to/require.min.js"></script>
<script type="text/javascript">
    require.config({
        waitSeconds: 0,
        paths: {
            'jquery': "/path/to/jquery.min",
            // ...
        },
        shim: {
            // ...
        }
    });
    require(["jquery", /* ... */], function ($) {
        // ...
    });
</script>

然后我们在使用 Masonry 的页面上添加了一个 JavaScript 文件，该文件触发了 Masonry/ImagesLoaded：

requirejs(['jquery', 'https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js', 'https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js'],
    function ($, Masonry, ImagesLoaded) {
        $(document).ready(function () {
            ImagesLoaded('.js-masonry', function () {
                new Masonry('.js-masonry', {
                    // This was required for us, but from what I can tell shouldn't need to be/may need to be updated per-usage.
                    itemSelector: '.item'
                });
            });
        });
    }
);

我确信这可以进一步优化，但它解决了错误并且不需要包含任何新包。