6

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 行，我会得到：

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

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

谢谢！

更新：

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

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

5 回答 5

2

尝试为 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'
    }
}
于 2013-09-01T20:35:49.803 回答
0

试试这个：

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

});

});
于 2013-08-18T04:14:03.147 回答
0

尝试使用 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 (with masonry)，因此您可能需要进行一些不同的配置，但希望能给您一些想法。

于 2014-01-11T20:55:36.460 回答
0

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

如果您要安装托管在 github 上的版本，您可能安装的是“vanilla”版本，而不是 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

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

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

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

希望有帮助。

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

于 2013-10-13T06:06:09.203 回答
0

在我们的特殊情况下，我们在主模板中包含并配置了 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'
                });
            });
        });
    }
);

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

于 2019-03-15T18:31:00.417 回答