require.js错误地加载依赖项

时间:2012-02-01 16:02:37

标签: javascript jquery requirejs

所以这是设置,我的基本文件是main.js,它定义了我正在构建的站点的所有页面上所需的脚本。它看起来像这样:

define([
        '/javascript/requirePlugins/require-order.js!http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
        '/javascript/requirePlugins/require-order.js!/javascript/jquery-global-plugins.js',
        '/javascript/requirePlugins/require-order.js!/javascript/globals.js'
    ], function () {
        loadFonts();
    }
);

它加载jQuery,一些插件和全局脚本文件。在一个页面上,我正在尝试加载jQuery插件,但插件尝试在加载jQuery之前加载。它看起来像这样:

    require(['/javascript/requirePlugins/require-order.js!/main','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

该功能似乎没有遵循请求的顺序。我不确定我是否可以嵌套这样的有序函数。我也尝试过将jQuery作为依赖项应用,但这也失败了:

    require(['/javascript/requirePlugins/require-order.js!/jquery','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

对于我做错了这些错误的任何建议表示赞赏,谢谢

3 个答案:

答案 0 :(得分:8)

订单插件已删除,您可以尝试使用shim config按顺序加载插件

requirejs.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
        'bootstrap': '../bootstrap/js/bootstrap.min',
        'select2': 'vendor/select2',
        'jshashtable': 'vendor/jshashtable-2.1',
        'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min',
        'jq-datepicker': 'vendor/bootstrap-datepicker',
        'jq-datepicker.da': 'vendor/bootstrap-datepicker.da'
    }, 

    // Use shim for plugins that does not support ADM
    shim: {
        'bootstrap': ['jquery'],
        'select2': ['jquery'],
        'jq-datepicker': ['jquery'],
        'jshashtable': ['jquery'],
        'jquery.numberformatter': ['jquery', 'jshashtable']
    },
    enforceDefine: true
});

编辑:

require-jquery也不再需要维护。

答案 1 :(得分:4)

如果您只想按顺序加载一些顶级脚本,并且这些脚本不使用requirejs支持的模块API,那么订单插件非常有用。如果将它混合/使用它来加载使用define()模块API的模块,它就不能很好地工作。

特别是,顺序只是确保首先加载脚本。但是,define()API指定要加载的其他脚本,并且订单插件不知道等待加载这些脚本。

对于这个特殊问题,我建议使用require-jquery.js作为sinsedrix建议。那,或者包装你在define()调用中使用的脚本。 volo可以使用amdify命令帮助您完成此操作:

volo.js amdify path/to/lemon-slider-0.2.js depends=jquery

另外,我会设置baseUrl并使用“模块命名”作为依赖项而不是完整路径。这将允许优化器正常工作。您还可以将'order'映射到requirePlugins路径,这有助于减少一些线路噪音。我还会创建一个'jquery'路径条目,这样如果你将其他插件包装在define调用中,它将映射回main.js文件中加载的jquery。因此,在页面的顶级脚本中:

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        order: 'requirePlugins/require-order',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
    }
});

然后你的main.js就像这样写:

define([
        'order!jquery',
        'order!jquery-global-plugins',
        'order!globals'
    ], function () {
        loadFonts();
    }
);

请注意,这里的订单使用情况很好,只要这些依赖关系不会自己调用define()。

但是如果你要包装你在定义调用中使用的脚本,那么你可以摆脱它的顺序!以上用法。保持jquery路径配置。

答案 2 :(得分:0)

也许你应该尝试使用require-jquery:http://requirejs.org/docs/jquery.html

然后你不必担心加载jquery的时间。