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下