javascript - requirejs jquery 多个依赖的非模块 jquery 插件，如 jquery-ui 和 jqGrid

Question

我无法订购带有 shim 配置的非 AMD 模块。

我的 shim 配置是这样的。即使我想使用 require-jquery.js，但仍然有两个非 AMD 模块是 jquery ui 和 jqGrid。 jqGrid 本身有一些插件，只有在加载 jqGrid 时才必须加载。

requireconfig.js

require.config({
    baseUrl: '../jsp',
    paths: {
        app: '../js/app',
        jquerygrid: 'http://view.jqueryui.com/grid',
        lib: '../js/lib',
        plugins: '../js/plugins',
        jquery: '../js/lib/jquery-1.9.1',
        jqueryui: [ 'http://ajax.googleapis.com/ajax/libs/jqueryui/'+
            '1.9.2/jquery-ui'],
        canjs:  'http://canjs.us/release/latest/can.view.mustache',
        uigrid:'../js/plugins/mydataview',
        jqgrid: '../js/plugins/grid.locale-en'
    },
    shim: {
        jqueryui: {
            exports: "$",
            deps: ['jquery']
        },
        uigrid: {

            deps:[
             'jqueryui',    
             'http://view.jqueryui.com/grid/ui/jquery.ui.dataview.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.grid.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.observable.js',
             'http://view.jqueryui.com/grid/ui/jquery.ui.dataviewlocal.js',
             'http://view.jqueryui.com/grid/grid-spf/pager.js',
             'http://view.jqueryui.com/grid/grid-editing/grid.selectable.js',
             'http://view.jqueryui.com/grid/grid-editing/navigator.js',
             'http://view.jqueryui.com/grid/grid-editing/localstore.js',
             'http://view.jqueryui.com/grid/grid-editing/helpers.js',
             'http://view.jqueryui.com/grid/external/jquery.tmpl.js',
             'http://view.jqueryui.com/grid/grid-spf/grid-filter.js',
             'http://view.jqueryui.com/grid/grid-spf/grid-sort.js'
            ]
        },
        canjs:{
            deps: ['jquery','http://canjs.us/release/1.1.4/can.jquery.js']
        },
        jqgrid:['jqueryui','../js/plugins/jquery.jqGrid.src.js']
    }
});

我调用的 HTML 是

<script type="text/javascript" src="../js/require.js"></script>
<script type="text/javascript" src="../js/requireconfig.js"></script>

<script type="text/javascript">
require(['jqgrid'], function($){
    $("#mygrid").jqGrid({
        pager: "#mygridpager"
    })
});
</script>   

在不同的运行中我得到不同的错误:

有时:

未捕获的 ReferenceError:未定义 jQuery ..... jquery.jqGrid.src.js:3589

当然这不会出错。但它看起来像一些 hack，因为 requirejs 不支持顺序。嵌套的 require 调用也不那么优雅。可能如果有像 when().then() 这样的 requirejs 延迟链可以使它看起来更好。

<script type="text/javascript">
require(['jquery'], function(){
    require(['jqgrid'], function(){
        $("#mygrid").jqGrid({
            pager: "#mygridpager"
        });
    });
});
</script>

Answer 1

这sample fiddle RequireJS 加载 JS 文件时没有错误。

我认为问题的症结在于'../js/plugins/jquery.jqGrid.src.js'文件是由RequireJS加载的，但是RequireJS并不知道这个文件本身有依赖关系。因此，当加载此文件时，其依赖项尚未加载。

因此，您可能需要使用 RequireJS 完全明确哪些模块依赖于哪些其他模块。例如添加更多路径和更多垫片:

路径:

    jqgridlocale: 'http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en',
    jqgrid: 'http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min'

垫片:

    jqgrid:{
        deps:['jqueryui','jqgridlocale']
    },
    jqgridlocale:{
        deps:['jqueryui']
    }

现在 RequireJS 知道 jqgrid 和 jqgridlocale 都需要加载 jqueryui(因此 jquery)首先。

我还会明确地 require() jQuery，因为您正在直接使用它。阅读代码时直接使用 jQuery 更能提供信息。

require(['jquery','jqgrid'], function($){
    $("#mygrid").jqGrid({
        pager: "#mygridpager"
    })
});