js模块化开发——require.js的实战写法1

时间:2024-01-14 09:51:14

关于在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下