requireJS loads different versions of jquery_html/css_WEB-ITnose in the same HTML/JSP page

requireJS supports JS modularization and can also load different versions of modules on the same HTML/JSP page. This feature is great, let’s see how to load multiple versions of jquery. Assume that in the HTML page, the data-main attribute entry file is main.js, and the directory structure where the file is stored is as follows:

test.html

require.js

main. js

scripts/

demo1.js

demo2.js

libs/

jquery-1.10.2.js

jquery-2.1.1.js

We write the following code in 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);												});

Through this multi-context approach, we can Implement multi-version module coexistence. But it also leads to two problems:

1. What happens if the modules loaded in different contexts are the same and have the same version (the same js file)? Will this js file be downloaded multiple times? ?

Conclusion: Through httpwatch observation, if different contexts load the same js file, then this js file will be downloaded multiple times. Obviously this is wasteful.

2. If both contexts require jquery-1.10.1 version, then how to ensure that only js is downloaded once?

Conclusion: We can define a context similar to the parent class, Store public modules, and each context can access the 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);   });               });

Through httpwatch observation, you can see that demo1.js will only be downloaded once, which solves the problem of multiple downloads of the same file.