javascript - 使用 RequireJS 在 JavaScript 中实现 AMD

Question

我是 RequireJS 的新手，所以我仍在努力寻找解决方法。我有一个运行良好的项目，然后我决定使用 RequireJS，所以我把它搞砸了 :)

除此之外，我还有一些关于 RequireJS 的问题，以及它是如何解决所有问题的。我在脚本文件夹中有文件层次结构:

我的 _Layout.cshtml 文件中有以下行:

<script data-main="@Url.Content("~/Scripts/bootstrap.js")" src="@Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>

这是我的 bootstrap.js 文件:

require.config({
    shim: {
        'jQuery': {
            exports: 'jQuery'
        },
        'Knockout': {
            exports: 'ko'
        },
        'Sammy': {
            exports: 'Sammy'
        },
        'MD': {
            exports: 'MD'
        }
    },
    paths: {
        'jQuery': 'jquery-1.8.1.min.js',
        'Knockout': 'knockout-2.1.0.js',
        'Sammy': 'sammy/sammy.js',
        'MD': 'metro/md.core.js',
        'pubsub': 'utils/jquery.pubsub.js',
        'waitHandle': 'utils/bsynchro.jquery.utils.js',
        'viewModelBase': 'app/metro.core.js',
        'bindingHandlers': 'app/bindingHandlers.js',
        'groupingViewModel': 'app/grouping-page.js',
        'pagingViewModel': 'app/paging-page.js'
    }
});

require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
    BindingHandlers.init();

    $(window).resize(function () {
        waitHandle.waitForFinalEvent(function () {
            MD.UI.recalculateAll();
        }, 500, "WINDOW_RESIZING");
    });

    var viewModelBase = Object.create(ViewModelBase);
    ko.applyBindings(viewModelBase);
    viewModelBase.initialize();
});

    require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
        BindingHandlers.init();

        var viewModelBase = new ViewModelBase();
        ko.applyBindings(viewModelBase);
        viewModelBase.initialize();
    });

然后我使用 define 函数实现了我的模块。 pubsub 模块就是一个例子:

define(['jQuery'], function ($) {
    var 
        publish = function(eventName) {
            //implementation
        },
        subscribe = function(eventName, fn) {
            //implementation
        }
    return {
        publish: publish,
        subscribe: subscribe
    }
});

我基本上对我所有的 javascript 文件都做了同样的事情。请注意，包含 pubsub 模块的实际文件是 /Scripts/utils 文件夹中的 jquery.pubsub.js。其他模块也是如此。

更新:

好吧，我现在更新了我的 Bootstrap 文件，因为我认为我明白什么是 shim 以及为什么我应该使用它。但它仍然不适合我，尽管我也声明了所有我认为会给我带来麻烦的路径。问题是它甚至没有进入 Bootstrap 文件中的 require 回调，所以我想我在配置或定义模块的方式上仍然有问题？

Answer 1

好吧，首先，如果你打算使用一个非 amd 库，比如 jQuery，带有 require 并将 jQuery 函数传递给回调，你需要在你的 require 配置中指定一个带导出的填充程序，就像这样:

require.config({
    shim: {
        jQuery: {
            exports: '$'
        }
    },
    paths: {
        jQuery: 'jquery-1.8.1.min.js',
    }
});

除此之外，我不确定我是否完全理解您的问题。