requireJS在同一个HTML/JSP页面,加载不同版本的jquery_html/css

test.html

require.js

main.js

scripts/

demo1.js

demo2.js

libs/

jquery-1.10.2.js

jquery-2.1.1.js

我们在main.js编写如下代码:

//创建1个contextvar reqOne = requirejs.config({	baseUrl: 'scripts/libs/',	context:"context1",	paths:{	jquery: 'jquery-1.10.2'	}});	reqOne(['jquery'],	function($) {	console.log("v1=" + $().jquery);	});//创建1个context	var reqTwo = requirejs.config({	baseUrl: 'scripts/libs/',	context:"context2",	paths:{	jquery: 'jquery-2.1.1'	}});	reqTwo(['require','jquery'],	function(require,$) {	console.log("v1=" + $().jquery);	});

通过这种多context的方式，能够实现多版本的模块共存。但是随之而来也导致了2个问题：

1、如果不同context加载的模块相同，版本相同(同一个js文件)，会怎么样呢?这个js文件会下载多次吗？

结论：通过httpwatch观察，如果不同的context加载同1个js文件，那么这个js文件会下载多次。显然这很浪费。

2、如果2个context都是需要jquery-1.10.1版本，那么怎么保证只js只下载一次呢?

结论：我们可以定义一个类似父类的context，存放公共的模块，各个context都可以访问该rootContext。

//定义rootContextvar rootContext = require.config({ baseUrl: 'scripts/'});var reqOne = requirejs.config({ baseUrl: 'scripts/libs/', context:"context1", paths:{ jquery: 'jquery-1.10.2' }});reqOne(['jquery'], function($) { console.log("v1=" + $().jquery); // 访问rootContext中的JS模块 rootContext(['demo1'],function(m){ console.log("require1=" + m.name); }); }); var reqTwo = requirejs.config({ baseUrl: 'scripts/libs/', context:"context2", paths:{ jquery: 'jquery-2.1.1' }}); reqTwo(['require','jquery'], function(require,$) { console.log("v1=" + $().jquery); // 访问rootContext中的JS模块 rootContext(['demo1'],function(m){ console.log("require1=" + m.name); }); });