使用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模块的实际文件是/Scripts/utils文件夹中的jquery.pubsub.js 。 其他模块也是如此。

更新：

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

Answer 1

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

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

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

Answer 2

如果您使用的是ASP.NET MVC，请查看RequireJS for .NET

RequireJS for .NET项目使用xml配置文件，动作过滤器属性，继承的基本控制器和帮助程序类，在服务器端平滑地集成RequireJS框架和ASP.NET MVC。

Answer 3

我并不完全明白问题所在。 但如果它与要加载require.js的JS库有关，那么这个启动文件对我有用：

require.config({
    paths: {
        "jquery": "/scripts/jquery-1.8.2",
        "sammy": "/scripts/sammy-0.7.1"
    },
    shim: {
        "sammy": {
            deps: ["jquery"],
            exports: "Sammy"
        }
    }
});

require(["jquery", "sammy"], function ($) {
    $(document).ready(function () {
        alert("DOM ready");
    });
});

请注意，路径中没有'.js'。

顺便说一句，如果你使用MVC 4，你不再需要'href'和'src'中的@ Url.Content。