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下