带有JQuery、Mashise和；ImagesLoaded:Object[Object Object]没有方法'；图像标记'；

这里是RequireJS新手。尝试将我用的一些JQuery代码转换为使用RequireJS的旧方式工作良好的代码

我的页面的页眉通过脚本标签加载三个JS文件——require.JS本身、my 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) {

砌体和ImagesLoaded变量设置正确。。。。但是我不想在没有jQuery的情况下继续

但是，当我尝试在JQuery容器对象上调用.imagesLoaded（）和.mashise（）时，我得到：

未捕获类型错误：对象[Object Object]没有方法“imagesLoaded”

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

未捕获类型错误：对象[Object Object]没有方法“砌体”

不知道我做错了什么。。。？从我在其他StackOverflow问题中读到的内容来看，代码在我看来是正确的

谢谢

更新：

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

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

请尝试以下方法：

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

});

});

---

尝试为垫片中的每个插件定义导出

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

---

好的，我想我已经找到了你（和我）问题的答案

如果您安装的是github上托管的版本，那么您可能安装的是“香草”版本，而不是jquery插件。这就是你将要做的，如果你安装通过鲍尔，例如，这是我正在做的

以下是我在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-massy

、

$.massy

和

jquery.massy

都指向同一个源（在两个不同的位置），它不是jquery插件，只是“普通”版本的massy

相反，只需从下载并提取文件

jquery.massy.js

，但它位于您的资产路径中，并为它添加一个垫片，该垫片依赖于

jquery

在你做了所有这些之后，它应该会起作用。当然，因为它不是通过bower安装的，所以您不能像管理其他bower软件包那样管理依赖项。老实说，我不明白到底发生了什么，但这似乎是软件包维护人员的问题

希望有帮助

更新：尽管上述方法可行，但请注意，从meta.metafizzy.co下载的版本非常旧，并且依赖于过时的jquery版本。我想我将使用香草版本，似乎插件没有得到维护。

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

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

---

这是为我的应用程序使用角度和角度砌体（与砌体），所以你可能需要配置有点不同，但希望能给你一些想法

在我们的特定案例中，我们在主模板中包含并配置了RequireJS，但希望在一个特定页面上包含Mashise/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>

---

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

是否有运行此功能的测试位置？嗯，本地。：-）我会把一些东西放在一起……请看。我试着去掉所有无关的东西。。。可能我在这样做时引入了一些其他错误。。。谢谢你看！你找到解决办法了吗？同样的问题！唉，没有。我最终重写了代码以使用非JQuery的方式。我会更新我的问题来展示我做了什么。谢谢你的想法——我也试过了。如果你看看我原始问题的第三个灰色方框，我确实试过了。砌石和ImagesLoaded似乎设置正确，但我不能用它们做任何事情，除非我重写原始代码以使用非JQuery风格…有趣的想法。。。不幸的是，这给我带来了同样的错误。（我不得不对您的代码进行一些修改……原来问题的一部分是我没有为requireJS添加正确版本的Mashise&imagesLoaded。因此，在路径中，我现在有了“Mashise”：“bower_components/Mashise”和“imagesLoaded”：“bower_components/imagesLoaded”，因此我将您的导出更改为“Mashise”和“imagesLoaded”exports属性是模块公开给其他代码使用的对象。一个很好的例子是下划线js库，它导出“\u1”。我已经编辑了我的答案，以便使用您的新路径变量。如果您可以为它创建一个JSFIDLE，那么它可能是最容易调试的？这个技巧非常有用！让它发挥作用。然而，我不得不做一个修改并添加到mashise-config.js中：Bridget（'imagesLoaded'，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'
                });
            });
        });
    }
);