使用带有requirejs和jquery的同位素

Question

我已经阅读了有关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文档(上面链接)中,它说我需要在Require中引用'jquery.bridget'以使其工作,但我发现的所有示例都以不同的方式设置,并且似乎包含了函数直接在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();
});