requireJS在同一个HTML/JSP页面,加载不同版本的jquery
2014-11-19 21:53
453 查看
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编写如下代码:
通过这种多context的方式,能够实现多版本的模块共存。但是随之而来也导致了2个问题:
1、如果不同context加载的模块相同,版本相同(同一个js文件),会怎么样呢?这个js文件会下载多次吗?
结论:通过httpwatch观察,如果不同的context加载同1个js文件,那么这个js文件会下载多次。显然这很浪费。
2、如果2个context都是需要jquery-1.10.1版本,那么怎么保证只js只下载一次呢?
结论:我们可以定义一个类似父类的context,存放公共的模块,各个context都可以访问该rootContext。
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只会下载一次,这很好的解决了同个文件多次下载的问题。
相关文章推荐
- 在同一个页面中加载多个不同的jQuery版本
- 解决一个html 或jsp 引入多个不同版本的jquery 解决方案
- 在同一个页面使用多个不同的jQuery版本而不冲突的方法
- jQuery怎么加载一个html页面到我指定的div里面
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 一个页面中引用多个不同版本的jquery
- html页面加载一个jsp页面或者html页面 用<!--#include virtual=""--> 这样的标签
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- jQuery加载一个html页面到指定的div里
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 多种方法实现当jsp页面完全加载完成后执行一个js函数