js模塊化開發——require.js的實戰寫法1

關於在Require.js使用一個JS插件的問題

我須要在項目中引用一個js控件,這個控件依賴於a.js,b.js,c.js,.....n.js N多個js以及jquery及jquery-ui，各js之間相互還有依賴關係，也就是說必須先加載某一部分才能加載另外一部分，最終才能加載整個控件。我 想使用require.js來引用他，以免在head部分書寫過多的script標籤，可是require.js是異步的，各js會在同一時間加載致使 瀏覽器報錯，我應該如何處理這個問題？以下是個人配置代碼，歡迎你們指正。

require.config({

     baseUrl: "../../js/jsPlumb/" ,

     paths:{

         "jquery" : "http://cdn.bootcss.com/jquery/1.9.1/jquery.min" ,

         "jquery-ui" : "http://cdn.bootcss.com/jqueryui/1.10.2/jquery-ui.min" ,

         "jsBezier" : "lib/jsBezier-0.6-min" ,

         "mottle" : "lib/mottle-0.3" ,

         "biltong" : "lib/biltong-0.2" ,

         "katavorio" : "lib/katavorio-0.2" ,

         "util" : "src/util" ,

         "dom-adapter" : "src/dom-adapter" ,

         "jsPlumb" : "src/jsPlumb" ,

         "endpoint" : "src/endpoint" ,

         "connection" : "src/connection" ,

         "anchors" : "src/anchors" ,

         "defaults" : "src/defaults" ,

         "connectors-bezier" : "src/connectors-bezier" ,

         "connectors-statemachine" : "src/connectors-statemachine" ,

         "connectors-flowchart" : "src/connectors-flowchart" ,

         "renderers-svg" : "src/renderers-svg" ,

         "renderers-vml" : "src/renderers-vml" ,

         "connector-editors" : "src/connector-editors" ,

         "domPlumb" : "src/dom.jsPlumb"

     },

     shim:{

         "jquery-ui" :{

             deps:[ 'jquery' ],

             exports: "jquery-ui"

         },

         

         "jsPlumb" :{

             deps:[

                 "jquery" ,

                 "jquery-ui" ,

                 "jsBezier" ,

                 "mottle" ,

                 "biltong" ,

                 "katavorio" ,

                 "util" ,

                 "dom-adapter" ,

                 "endpoint" ,

                 "connection" ,

                 "anchors" ,

                 "defaults" ,

                 "connectors-bezier" ,

                 "connectors-statemachine" ,

                 "connectors-flowchart" ,

                 "renderers-svg" ,

                 "renderers-vml" ,

                 "connector-editors" ,

                 "domPlumb"

             ],

             exports: "jsPlumb"

         }

     }

});

 

require([ "jquery" , "jquery-ui" , "jsPlumb" ], function ($,ui){

     var GHandler = jsPlumb.getInstance();

     GHandler.draggable($( "#btn" ));

})

這個控件的名稱叫作jsplumb用於圖形拖拽及連線的。jquery及jquery-ui使用cdn，jsplumb放在本地目錄js/jsplumb下