requireJS在同一个HTML/JSP页面,加载不同版本的jquery

最新推荐文章于 2021-04-21 20:49:15 发布
原创 最新推荐文章于 2021-04-21 20:49:15 发布 · 4.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#requirejs加载多版本模块 #多版本模块共存

本文介绍了使用requireJS在HTML页面中加载不同版本的jQuery，通过多context方式实现模块共存。然而，这种方式可能导致同一JS文件被多次下载，造成资源浪费。为解决这个问题，提出了利用一个公共的context存放共享模块，确保资源只下载一次。

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/
最低0.47元/天 解锁文章
RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
dengzeyuan的博客
08-23 1649
RequireJS 是一个JavaScript模块加载器，使用RequireJS加载模块化脚本将提高代码的加载速度和质量。而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路由等。不受网络情况影响一直是在angular或者jquery加载之后才加载依赖相关联的模块。 r.js为requireJs自带的一个可以对js和css等进行压缩打包的插件，打包之后可以将所有模块输出
requireJS 嵌套加载模块开发demo（带html模板）
08-10
目录结构采用模块化开发模式进行划分。 支持html模板、css样式表，动态加载。在main中加载a，我们可以把a视为摸个大模块。在a中加载b，我们可以把b视为大模块a中的一个子模块。由于main在加载a的时候已经加载了$，所以在a加载b的时候$还存在作用于，无需再次加载。
CQ5-RequireJS:JJSP代码可基于CQ5页面模板中放置的组件来动态创建requireJS调用
04-27
CQ5-RequireJS JSP代码可基于CQ5页面模板中放置的组件来动态创建requireJS调用。 将此代码放在页面模板组件的head或headlibs.jsp文件中。 向具有requireJS配置的组件中添加一个名为“ requireJS”的String[] （多）属性。 例如（通过.content.xml模板文件）： < jcr : root xmlns : sling = " http://sling.apache.org/jcr/sling/1.0 " xmlns : cq = " http://www.day.com/jcr/cq/1.0 " xmlns : jcr = " http://www.jcp.org/jcr/1.0 " jcr : primaryType = " cq:Componen
require.js的用法
传奇的菜鸟
06-25 2149
阮一峰的网络日志 » 首页 » 档案 上一篇：Javascript模 下一篇：高斯模糊的算法     分类：   JavaScript Javascript模块化编程（三）：require.js的用法 作者： 阮一峰 日期： 201
jsp中动态加载多个js文件
HQqHQhqqhq的博客
03-04 484
<% boolean onlineStatus = "1".equals(request.getParameter("tileOnline")) ? true : false; %> <% if (onlineStatus) {%> <script type="text/javascript" src="../baiduMapLib/bmap_api_v3.0.js"></script> <% } else {%> <script .
require.js的使用
曹立禄的个人博客
09-21 511
简介：     是一个JavaScript模块加载器，它非常适合在浏览器中使用，但它也可以用在其他脚本环境,使用RequireJS加载模块化脚本将提高代码的加载速度和质量。     它使用了不同于传统标签的脚本加载步骤，鼓励在使用脚本时以module ID替代URL地址。 RequireJS 优点: 1.防止js加载阻塞页面渲染 2.使用程序调用的方式加载JS，防止批量丑陋方式加载JS
vue中tab切换前端实现_vue 实现tab切换动态加载不同的组件
weixin_30806145的博客
01-30 1252
使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码：主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。vue 动态组件实现tab切换加载不同的小模块第一项第二项第三项// 导入子组件im...
RequireJS入门一之实现第一个例子
11-22
在 `main.js` 中，我们加载了 `jquery` 并在回调函数中执行了一个简单的测试，弹出一个包含 jQuery 版本号的警告框，证明 jQuery 已经成功加载并可用了。 对于不支持 AMD 的普通 JavaScript 代码，RequireJS 提供了...
jQuery 重复加载错误以及修复方法
12-10
5. **封装动态加载**：创建一个函数来处理动态加载，确保不会重复加载jQuery和其他依赖库。 修复此类问题的关键在于理解和监控JavaScript的加载流程，以及正确管理页面和组件间的依赖关系。通过合理规划和优化，...
轻松引用最新版jQuery 3.0.0进行高效开发
此外，对于大型项目，应该考虑使用模块化加载工具（如RequireJS或Webpack）来按需加载jQuery及其插件，减少页面加载时间，优化整体性能。 9. 推荐的实践： 开发者在应用jQuery时，应当遵循一些最佳实践，如合理...
引入jquery时多个js库的冲突解决
morxiyee
10-30 1277
当一个项目中引入多个第三方库的时候，由于没有命名空间的约束（命名空间就好比同 一个目录下的文件夹一样，名字相同就会产生冲突），库与库之间发生冲突在所难免。 那么，既然有冲突的问题，为什么要使用多个库呢？原因是jQuery 只不过是DOM 操 作为主的库，方便我们日常Web 开发。但有时，我们的项目有更多特殊的功能需要引入其 他的库，比如用户界面UI 方面的库，游戏引擎方面的
JS中的require和import
githubcurry，985cs博士在读
04-21 1876
背景 node编程中最重要的思想之一就是模块，正是这个思想，让JS的大规模工程成为可能。模块化编程在js界流行。 也是基于此，随后在浏览器端，requirejs和seajs之类的工具包也出现了，可以说在对应规范下，require统治了ES6之前的所有模块化编程，即使现在，在ES6 module被完全实现之前，还是这样。 ES6标准发布后，module（模块）成为标准，标准的使用是以export指令导出接口，以import引入模块； 但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用r.
js模块化加载（requirejs）
小鱼儿
06-22 3694
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
requirejs在jQuery中使用详解
热门推荐
OceanSky的专栏
02-28 1万+
1.充分利用requirejs模块化工具优化代码，强烈的建议将html内联脚本放入到外部的js文件中通过requirejs来引用。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;My Sample Project&amp;lt;/title&amp;gt;
requireJS多页面应用实例
weixin_34310369的博客
06-29 204
本文是requireJS的一些知识点的总结，配上多页面应用中的实例分析。 本案例的目录结构如下： requireJS API的三个主要函数：define（创建模块），require（加载模块），config（配置） 1、HTML文件中加载JS文件 page1.html内容如下： 1 <!DOCTYPE html> 2 <html...
AMD和RequireJS----优化Web应用前端(按需动态加载JS)
hsany330的专栏
03-12 1530
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。 一、AMD 介绍 前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些
RequireJs初步了解和使用
键盘哥的博客
04-20 761
RequireJs的作用： 1.防止js加载阻塞页面渲染 2.使用程序调用的方式加载js，防止书写过多的.js文件 require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块，并执行加载完后的回调函数
RequireJS的动态加载技术与jQuery应用示例分析
与传统的将所有JavaScript代码放在一个文件中的做法不同，RequireJS允许开发者将代码分割成多个小的模块，各自具有自己的依赖关系，仅在需要时才加载。 2. **异步加载**：RequireJS强调的异步加载特性意味着它不...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值