使用isotope与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();

});

然而，这仍然不起作用 - 它只是在网站上抛出了一个异常，在我调用.isotope时返回undefined is not a function。

在Isotope文档（链接如上）中，它说我需要在Require中引用'jquery.bridget'才能让它工作，但我找到的所有示例都是以不同的方式设置的，并且似乎直接在RequireJS配置中包含实例化isotope的函数，而不是准备好从我的单独模块脚本调用它。

有人能指导如何使其工作吗？

非常感谢。

- Dan

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

- Dan

---

先生，您救了我的一天。我已经快抓狂了，但是没想到问题出在 Bridget 上，只有在我单独加载它后才能正常工作。 - CatalinBerta