使用RequireJS在JavaScript中实现AMD

Question

我是RequireJS的新手,所以我仍然试图找到它的方法.我有一个工作得非常好的项目,然后我决定使用RequireJS,所以我搞砸了:)

有了这个,我有一些关于RequireJS的问题以及它如何计算出一切.我在scripts文件夹中有文件层次结构:

我的_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模块的实际文件jquery.pubsub.js位于该/Scripts/utils文件夹中.其他模块也是如此.

更新:

好的,我现在更新了我的bootstrap文件,我想我明白什么是垫片,为什么我应该使用它.但它仍然不适合我,虽然我也宣布了所有的路径,我认为这会给我带来麻烦,让他们正确.问题是它甚至没有进入我require在bootstrap文件中的回调,所以我想我在配置或定义模块的方式上仍有问题？

Answer 1

好吧，首先，如果您要使用非 amd 库（例如 jQuery）和 require 并将 jQuery 函数传递给回调，则需要在 require 配置中指定一个带有导出的填充程序，如下所示：

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

除此之外，我不确定我到底理解你的问题是什么。