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

//创建1个context
var 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。

//定义rootContext
var 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只会下载一次，这很好的解决了同个文件多次下载的问题。