Question

我正在创建一个ASP.NET单页面应用程序，并且有一个require.js配置文件，它在应用程序启动时运行，引用jQuery，Sammy.js和knockout.js。我为三个第三方库创建了填充程序，以允许我在全局级别访问它们：

require.config({
    paths: {
        "jquery": "/Scripts/jquery-2.1.4.min",
        "sammy": "/Scripts/sammy-0.7.5.min",
        "knockout": "/Scripts/knockout-3.3.0",
        "text": "/Scripts/text",
        "appVm": "/Scripts/app/appViewModel"
    },
    shim: {
        "jquery": {
            exports: "$"
        },
        "sammy": {
            deps: ["jquery"],
            exports: "Sammy"
        },
        "knockout": {
            deps: ["jquery"],
            exports: "ko"
        }
    },
    priority: ["text", "app"],
});

define(["knockout", "appVm", "sammy"], function(ko, appVm, sammy) {
    var vm = new appVm();
    ko.applyBindings(vm);

    var app = sammy(function() {
        this.get("#Dashboard", function() {
            //Dashboard-related logic here
        });
    });
    app.run("#Dashboard");
});

我能够实例化我的knockout viewmodel并将其绑定到页面。但是，当我尝试访问全局变量＆＃34; ko＆＃34;要在Chrome Developer控制台中进行淘汰调试，不会定义任何内容。

我如何获得＆＃34; ko＆＃34;用于在Chrome中调试的对象？

Answer 1

首先，传递给RequireJS的配置是错误的。

priority是RequireJS 1.x选项，RequireJS 2.x无法识别。 shim是RequireJS 2.x选项，RequireJS 1.x无法识别。很可能你正在运行2.x而priority什么也没做。

此外，jQuery和Knockout都不需要shim配置。如果对需要它的模块使用shim，则会得到未定义的行为。未定义的行为就是“未定义”。也许它今天有效，也许它没有。也许它今天有效，但是从现在起3个星期，当你向项目中添加一个新库时它就不再起作用了。

至于获取对模块的全局引用，您可以执行Anish Patel推荐的操作。它将工作，但我几乎从不这样做。如果我正在调试某些东西并且我必须获得对模块的引用，那么：

如果我想要的模块已经加载，那么我利用了RequireJS为CommonJS兼容性提供的伪同步require，并在控制台上使用：
```
foo = require('foo')
```
否则，我这样做：
```
require(['foo'], function (foo_) { foo = foo_; });
```
这是一个异步调用，但我从来没有必要等待它完成。如果您希望获得分配已完成的可视指示，则始终可以在分配后添加console.log语句。

我不想进入我的代码并添加一个语句来将模块泄漏到全局空间中，我可能会忘记稍后删除。即使我确信我不会忘记，这意味着进入代码，重建应用程序并重新加载页面。

Answer 2

您可以将ko对象从主函数中公开为全局，如下所示：

define(["knockout", "appVm", "sammy"], function(ko, appVm, sammy) {
    // expose ko as global
    window.ko = ko;

    var vm = new appVm();
    ko.applyBindings(vm);

    var app = sammy(function() {
        this.get("#Dashboard", function() {
            //Dashboard-related logic here
        });
    });
    app.run("#Dashboard");
});

另外，您可能想要查看框架DurandalJS它是一个非常好的框架，它使用requirejs，KnockoutJS和JQuery。它有自己的路由功能和良好的应用程序生命周期。

从Chrome Developer Console中的Require.js访问全局变量

2 个答案: