欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-17 12:05:36
...
requireJS支持JS模块化,也能够实现在同一个HTML/JSP页面加载不同版本的模块。这个特性太棒了,下面我们看下如何加载多个版本的jquery。假设在HTML页面中,data-main属性入口文件是main.js,文件存放的目录结构如下:

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);   });               });
通过httpwatch观察,可以看到demo1.js只会下载一次,这很好的解决了同个文件多次下载的问题。