Question

这里需要新手。试图转换一些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变量设置正确....但我不想继续w / o jQuery

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

未捕获TypeError：对象[object Object]没有方法'imagesLoaded'

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

未捕获TypeError：对象[object Object]没有方法'masonry'

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

谢谢！

更新

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

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

Answer 1

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

, 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 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插件，它只是“vanilla”版本的砖石。

相反，只需从here下载并解压缩文件jquery.masonry.js，但要在资源路径中提取，并为其添加垫片，并依赖jquery。

完成所有这些后，它应该有效。当然，因为它不是通过bower安装的，所以你无法像使用其他bower包一样管理依赖关系。老实说，我不明白发生了什么，但它看起来像是包维护者的问题。

希望有所帮助。

更新：虽然上述工作正常，但请注意从meta.metafizzy.co下载的版本相当陈旧，并且依赖于过时的jquery版本。我想我会选择使用vanilla版本，似乎插件没有被维护。

Answer 4

尝试使用jquery-bridget：https://github.com/desandro/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'],
   } 
}

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

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

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

requireJS与JQuery，Masonry，＆amp; ImagesLoaded：Object [object Object]没有方法'imagesLoaded'

5 个答案: