Question

我已经阅读documentation有关Isotope支持RequireJs的信息，但我继承了一个使用RequireJS的网站，该网站设置方式略有不同，我很难获得我的头脑如何让Isotope和RequireJS一起工作。这是我第一次遇到RequireJS。

设置如下：

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav'
    },
    shim: {
        'booking': ['waypoints']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav'], function($, jqueryUI, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

每次向网站添加新功能时，都会创建一个新的自包含JavaScript文件。在我的情况下，我需要一个使用Isotope进行布局的新模块，所以我创建了一个像这样的js文件：

define(['jquery'], function () {
    'use strict';
    $('#container').isotope();
});

然后我修改了上面的Require配置，现在它看起来像这样：

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        isotope: 'plugins/isotope.pkgd',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav'
    },
    shim: {
        'booking': ['waypoints'],
        'isotope': ['jquery']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav', 'isotope'], function($, jqueryUI, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

但是，这仍然无法正常工作 - 它只是在网站上引发了一个例外情况，即undefined is not a function返回.isotope。

在Isotope文档（上面链接）中，它说我需要引用＆＃39; jquery.bridget＆＃39;在要求让这个工作，但我发现的所有示例都以不同的方式设置，似乎包括直接在RequireJS配置中实例化同位素的功能，而不是设置它准备好调用来自我单独的模块脚本。

有人可以建议如何使这个工作吗？

非常感谢。

Answer 1

让我失望的主要原因是为了让Isotope使用jQuery，它依赖于jquery.bridget插件。这与Isotope捆绑在一起，但我无法正确引用它。最后，我将插件作为独立的javascript文件下载并在RequireJS配置中引用了该文件，并解决了所有问题。

所以工作代码是：

require.config({
    paths: {
        jquery: 'libs/jquery-1.11.0',
        jqueryUI: 'libs/jquery-ui-1.11.1',
        datepickerModule: 'modules/datepicker-module',
        gridsetModule: 'plugins/gridset-overlay',
        waypoints: 'plugins/waypoints',
        isotope: 'plugins/isotope.pkgd',
        booking: 'modules/book-widget',
        mobileNav: 'modules/mobile-nav',
        bridget: 'plugins/jquery.bridget'
    },
    shim: {
        'booking': ['waypoints'],
        'isotope': ['jquery']
    }

});

/* -------------------------------------------------------------------------- */
/* ---------- Initialize app ------------------------------------------------ */
/* -------------------------------------------------------------------------- */

require(['jquery', 'jqueryUI', 'base', 'waypoints', 'booking', 'datepickerModule', 'gridsetModule', 'mobileNav', 'isotope', 'bridget'], function($, jqueryUI, isotope, base) {
    'use strict';

    /* ---------- Global modules -------------------------------------------- */
    base.init();

});

然后在我单独的JavaScript模块文件中，我可以按照正常情况实例化Isotope：

define(['jquery', 'isotope'], function () {
    'use strict';
    $('#container').isotope();
});

使用带有requirejs和jquery的同位素

1 个答案: