requirejs jquery的多个从属非模块jQuery插件像jQuery-UI和的jqGrid

2019-10-17 22:49发布

我不能够订购与垫片配置非AMD模块。

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

一个ofcourse这不会给一个埃罗。 但它看起来像一些黑客,因为requirejs不支持秩序。 嵌套调用要求也不太优雅。 可如果有像递延当(a requirejs)。然后,(),如链可以使它更好看。

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

Answer 1:

该样品小提琴时,JS文件被加载RequireJS没有错误。

我认为,问题的症结是'../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知道这两个jqgridjqgridlocale需要jqueryui (因此jquery )已先加载。

我也明确require() jQuery的,因为你是直接使用它。 阅读代码的时候看到jQuery是直接使用它提供更多的信息。

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


文章来源: requirejs jquery multiple dependent non module jquery plugins like jquery-ui and jqGrid