requirejs一个页面加载不同版本的jquery和多次下载问题

转载：http://blog.csdn.net/aitangyong/article/details/41286171?utm_source=tuicool

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编写如下代码:

[javascript] view plaincopy

1. //创建1个context  
2. var reqOne = requirejs.config({  
3.     baseUrl: 'scripts/libs/',  
4.     context:"context1",  
5.     paths:{  
6.         jquery: 'jquery-1.10.2'  
7.     }  
8. });  
9.           
10. reqOne(['jquery'],  
11.         function($) {  
12.             console.log("v1=" + $().jquery);                                      
13.         });  
14.   
15. //创建1个context         
16. var reqTwo  = requirejs.config({  
17.     baseUrl: 'scripts/libs/',  
18.     context:"context2",  
19.     paths:{  
20.         jquery: 'jquery-2.1.1'  
21.     }  
22. });  
23.       
24. reqTwo(['require','jquery'],  
25.         function(require,$) {         
26.             console.log("v1=" + $().jquery);                                          
27.         });  

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

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

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

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

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

[javascript] view plaincopy

1. //定义rootContext  
2. var rootContext = require.config({  
3.  baseUrl: 'scripts/'  
4. });  
5.   
6.   
7. var reqOne = requirejs.config({  
8.  baseUrl: 'scripts/libs/',  
9.  context:"context1",  
10.  paths:{  
11.   jquery: 'jquery-1.10.2'  
12.  }  
13. });  
14.   
15.   
16. reqOne(['jquery'],  
17.   function($) {  
18.   
19.    console.log("v1=" + $().jquery);  
20.      
21.    // 访问rootContext中的JS模块  
22.    rootContext(['demo1'],function(m){  
23.     console.log("require1=" + m.name);  
24.    });  
25.      
26.           
27.   });  
28.     
29. var reqTwo  = requirejs.config({  
30.  baseUrl: 'scripts/libs/',  
31.  context:"context2",  
32.  paths:{  
33.   jquery: 'jquery-2.1.1'  
34.  }  
35. });  
36.   
37.   
38.     
39. reqTwo(['require','jquery'],  
40.   function(require,$) {  
41.      
42.    console.log("v1=" + $().jquery);  
43.      
44.    // 访问rootContext中的JS模块  
45.    rootContext(['demo1'],function(m){  
46.     console.log("require1=" + m.name);  
47.    });    
48.      
49.           
50.   });  

通过httpwatch观察，可以看到demo1.js只会下载一次，这很好的解决了同个文件多次下载的问题。