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

Question

我无法使用 shim 配置订购非 AMD 模块。

我的垫片配置是这样的。即使我想使用 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>   

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

有时：

Uncaught ReferenceError: jQuery is not defined ..... jquery.jqGrid.src.js:3589

当然这不会出错。但它看起来像一些黑客，因为 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"
    })
});