requirejs jquery jquery-ui和jqGrid等多重依賴非模塊jQuery插件

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> 

在不同的運行我得到不同的錯誤：

有時：

未捕獲的ReferenceError： jQuery沒有定義..... jquery.jqGrid.src.js：3589

當然這並不會導致錯誤。但它看起來像一些黑客，因爲requirejs不支持順序。嵌套的需求調用也不太優雅。可能是如果有一個requirejs被延遲，如when（）。那麼（）像鏈可以使它看起來更好。

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

Answer 1

這sample fiddle當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知道這兩個jqgrid和jqgridlocale需要jqueryui（因此jquery）已經裝載第一。

我也明確地提出了require() jQuery，因爲您直接使用它。閱讀代碼以查看jQuery是否直接使用時，它會提供更多信息。

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