关于在Require.js使用一个JS插件的问题

Kent_Chen 发布于 2014/07/04 09:30
阅读 3K+
收藏 0

大家好~

      我需要在项目中引用一个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下

补充错误信息截图:

文件目录截图:

加载中
0
Arrowing
Arrowing

自己看下控制台报什么错

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

注意这个,是否引起了报错,基本路径,说明后面引用的js都会经过这个路径。。。

Kent_Chen
Kent_Chen
回复 @arrowing : 关键也不知道他这个插件内部的依赖是怎么样的
Kent_Chen
Kent_Chen
回复 @arrowing : 图补充在问题里了,看看
Arrowing
Arrowing
回复 @Kent_Chen : 那你把报错信息发出来看看
Kent_Chen
Kent_Chen
这个没问题,引用路径肯定是正确的。不会犯这么低级的错误。
0
Arrowing
Arrowing
require(["jquery","jquery-ui","jsPlumb"],function($,ui/** 加入 **/,jsPlumb/** 加入 **/){
	var GHandler = jsPlumb.getInstance();
	GHandler.draggable($("#btn"));
})



Kent_Chen
Kent_Chen
回复 @arrowing : 那其他模块依赖jsplumb这个要怎么写?
Arrowing
Arrowing
回复 @Kent_Chen : 其他js文件依赖于jsPlumb,不是jsPlumb依赖其他文件吧,你自己得先知道依赖关系
Kent_Chen
Kent_Chen
回复 @arrowing : 引入只去掉了最后一个getInstance的错误,其他的是依赖的问题啊
Kent_Chen
Kent_Chen
回复 @arrowing : 奥,确实忘了引入,但是引入了也还是错啊
Arrowing
Arrowing
回复 @Kent_Chen : 你没引入啊,你jquery和jqueryUI都引入了,没看到吗?这个是requirejs的使用方法,可以查看文档
下一页
0
Arrowing
Arrowing
"jquery-ui":{
	deps:['jquery'],
	exports:"jquery-ui"
},

这里是jqueryUi依赖jquery

你不知道?按这个格式写不就好了。。。


Kent_Chen
Kent_Chen
知道啊,总之就是试了各种方法,都报错。最后我发现他的官方文档有require.js的实现。。。总之非常感谢你的帮忙:)
返回顶部
顶部