requirejs jquery多个依赖的非模块jquery插件，例如jquery-ui和jqGrid [英] requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid

问题描述

我无法使用shim config订购非AMD模块.

I am not able to order the non AMD modules with shim config.

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

My shim config is like this. Even if I wanted to use require-jquery.js but still two non AMD modules will be jquery ui and jqGrid. jqGrid itself has a few plugins which must be loaded only when jqGrid has been loaded.

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>   

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

In different runs I am getting different errors:

有时:

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

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

这当然不会出错.但这看起来有些骇人听闻，因为requirejs不支持命令.嵌套的require调用也不太优雅.可能是因为有一个requirejs像when()那样被延迟了.then()这样的链可以使它看起来更好.

An ofcourse this does not give an erro. But it looks like some hack because requirejs does not support order. Nested require calls are also less elegant. May be if there is a requirejs deferred like when().then() like chain can make it look better.

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

推荐答案

此样本小提琴没有RequireJS加载JS文件时出现错误.

This sample fiddle has no errors when the JS files are loaded by RequireJS.

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

I think the crux of the problem is the '../js/plugins/jquery.jqGrid.src.js' file is loaded by RequireJS, but RequireJS does not know that this file itself has dependencies. And so when this file is loaded, its dependencies have not been loaded yet.

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

So you might need to be completely explicit with RequireJS as to which modules are dependent on which other modules. For example add more paths and more shims:

路径:

    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).

Now RequireJS knows that both jqgrid and jqgridlocale need jqueryui (and thus jquery) to have been loaded first.

当您直接使用jQuery时，我也会明确使用require() jQuery.阅读代码以查看直接使用jQuery时，它的信息量更大.

I would also explicitly require() jQuery, as you are using it directly. It is more informative when reading the code to see that jQuery is being used directly.

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

这篇关于requirejs jquery多个依赖的非模块jquery插件，例如jquery-ui和jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！