如何避免Durandal 2中的全局变量

时间:2013-11-11 12:49:34

标签: javascript jquery requirejs durandal

据我所知,Durandal 2.x假定没有全局库。以下是从文档中定义全局模块的代码:

define('jquery', function () { return jQuery; });
define('knockout', function () { return ko; });

如果我理解目的正确,那么这些依赖项应该在模块中以下一种方式使用:

define(['jquery', 'ko'],
    function (jquery, ko) {
         debugger;
    });

但是这些依赖项(jquery, ko)都没有在模块的范围内定义。你能帮我弄清楚我在这里缺少什么吗?

1 个答案:

答案 0 :(得分:1)

有两种方法可以在Durandal中加载knockout和jQuery(以及其他第三方库)。

通过脚本标签

<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>

e.g。请参阅Microsoft .NET示例 https://github.com/BlueSpire/Durandal/blob/master/platforms/Microsoft.NET/Samples/Durandal.Samples/Views/Home/Index.cshtml#L31

在这种情况下,您将使用上述语法使requirejs知道这些库已经加载,因为Durandal会将它们用作AMD模块。在您自己的模块中,您可以省略此声明为“ko”,并且“$”可全局访问。

对于某些人来说,这是务实的方式,因为它更容易处理不兼容AMD的第三方库。

如果避免全局变量是最重要的,那么requirejs也可以这样配置。

通过requierejs加载所有内容。只需要一个脚本标记

<script src="lib/require/require.js" data-main="app/main"></script>

e.g。请参阅HTML示例https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/index.html#L43

在main.js中有一个requirejs.config对象,其中包含路径和填充程序配置。有关完整的可用选项,请参阅http://requirejs.org/docs/api.html

main.js

requirejs.config({
    paths: {
        'text': '../lib/require/text',
        'durandal':'../lib/durandal/js',
        'plugins' : '../lib/durandal/js/plugins',
        'transitions' : '../lib/durandal/js/transitions',
        'knockout': '../lib/knockout/knockout-2.3.0',
        'bootstrap': '../lib/bootstrap/js/bootstrap',
        'jquery': '../lib/jquery/jquery-1.9.1'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        }
    }
});

e.g。 https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/Samples/app/main.js

这次在你自己的模块中你必须声明'knockout'和'jquery'作为依赖(如果你使用它们),否则requirejs会抛出错误。