同一页面中引入多个JS库产生的冲突解决方案(转)

  发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号。因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原因就必须深入到jQuery的源码中去分析了,因此本文暂不深入讨论)。

  解决方案:

  解决JS库冲突总共可以分为以下几种方法:

    ①让渡‘$’标示符,使用jQuery作为jQuery对象的标示符(别名)。

    ②使用别名替代‘$’和jQuery标识符,如下面的$j(名字可以任取)。

var $j=jQuery.noConflict();
$j("#div").hide();

    ③使用匿名函数

jQuery.noConflict();                                                                                                      
(function($) { $(function() {// 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);                                                                                                      
... // 其他用 $ 作为别名的库的代码

  情况一:如果jQuery库在其他库之后导入

  方法:这种情况下,如何要使用‘$’作为其他库的标识符,则要使用jQuery.noConflict()释放jQuery对‘$’标识符的控制,把它(‘$’)让位给第一个实现它的库。

  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script><script type="text/javascript">$.noConflict();    //让渡$给第一个实现它的库。
                                                                          jQuery("#div").hide();    //使用jQuery作为jQuery库的标识符
                                                                          $("#div").hide();   // 使用另一个库的 $ 的代码
</script>

  也可以使用第二种方法,即使用别名。  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>                                                                             
<script type="text/javascript">var $j=$.noConflict();    //让渡$给第一个实现它的库。                                                                         $j("#div").hide();    //使用$j作为jQuery库的标识符                                                                         $("#div").hide();   // 使用另一个库的 $ 的代码
</script>

  或者用第三种方法,即使用匿名函数  例如:

jQuery.noConflict();(function($) {   //匿名函数中用‘$’作为形参$(function() {// 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);    //传入jQuery作为形参的值
                                                                   
... // 其他用 $ 作为别名的库的代码

  情况二:如果jQuery在其他库之前导入

  方法:在这种情况下,不必使用jQuery.noConflict()方法让渡‘$’标识符。 例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script><script type="text/javascript">jQuery("#div").hide();    //使用jQuery作为jQuery库的标识符
                                                                          $("#div").hide();   // 使用另一个库的 $ 的代码
</script>

  那么这里有一个疑问:为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?

  此外,jQuery.noConflict()方法还可以带有一个boolean类型的参数。这个参数的作用是:完全将 jQuery 移到一个新的命名空间(Completely move jQuery to a new namespace in another object.)

  这个参数主要是用于在同一页面需要导入不同版本的jQuery时使用的,即创建一个全新的空间指向jQuery。(这个不怎么明白。

  例如:

var dom = {};
dom.query = jQuery.noConflict(true);结果:
dom.query("div p").hide();  // 新 jQuery 的代码                                                           
$("content").style.display = "none";    // 另一个库 $() 的代码                                                           
jQuery("div > p").hide();    // 另一个版本 jQuery 的代码

  总结:对于jQuery的JS库冲突,我只知道了如何去解决。而并不知道具体的细节原因,而且具体的技术知识还不清晰,因此在接下来要努力地去寻找解决的方法。对于jQuery中的库冲突,我还残留的问题有:

  ①为什么jQuery在其他库之前导入不必使用jQuery.noConflict(),而在其他库之后导入则要使用jQuery.noConflict()?

  ②关于解决在同一页面中引入不同版本的jQuery库,使用jQuery.noConflict(true)解决的细节?(如:库引入顺序是否会导致不同的解决方式?等)

  ③为什么在同一页面引入多个JS库会引起错误,具体的原因是什么?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不用安装Oracle Client如何使用PLSQL Developer

1. 下载oracle的客户端程序包&#xff08;30M&#xff09;只需要在Oracle下载一个叫Instant Client Package的软件就可以了&#xff0c;这个软件不需要安装&#xff0c;只要解压就可以用了&#xff0c;很方便&#xff0c;就算重装了系统还是可以用的。下载地址&#xff1a;http…

input file的默认value清空与赋值方法

转载链接&#xff1a;http://www.jb51.net/article/24872.htm出于安全性考虑&#xff0c;JS是不能直接设置File的value值的&#xff0c;下面是我总结出来的方法第1个方法是大多人传统做法&#xff0c;替换HTML代码&#xff0c;楼上的已经用到了&#xff0c;我不过是用正则优化一…

python中o_Python I/O与进程的详细讲解

I/Owith语句with context_expression [as target(s)]:with-bodycontext_expression返回值遵从上下文管理协议&#xff0c;包含__enter__()与__exit__()方法&#xff0c;as语句的target(s)得到的是__enter__()返回值&#xff0c;执行with-body后会调用上下文管理器的__exit__()方…

千层套路 - Vue 3.0 初始化源码探秘

关注若川视野, 回复"pdf" 领取资料&#xff0c;回复"1"&#xff0c;可加群长期交流学习刘崇桢&#xff0c;微医云服务团队前端工程师&#xff0c;左手抱娃、右手持家的非典型码农。9 月初 Vue.js 3.0 正式发布&#xff0c;代号 "One Piece"。大秘…

css网页布局兼容性有哪些要点与诀窍

IE vs FFCSS 兼容要点&#xff1a;DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和…

js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例

转载链接&#xff1a;http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法&#xff0c;那来看看配合jsonp是如何实现的吧&#xff0c;小菜总结记录之用&#xff0c;高手勿喷。 当然本例子采用的是jquery库&…

python并行for循环_Python并行执行for循环

简介在介绍如何最简单地利用 python 实现并行前&#xff0c;我们先来看一个简单的代码。words [apple, bananan, cake, dumpling]for word in words:print word上面的例子中&#xff0c;我们用一个 for 循环打印出 words 列表中的每个单词。问题来了&#xff0c;这里我们打印完…

C语言之指针与数组总结

和指针相关的问题口诀1&#xff1a; 1. 地址变量得地址&#xff0c;得谁地址指向谁 和指针相关的问题要画图: 内容变量画房子&#xff0c;指针画箭头 ---->口 ---------------------------------------------------- 和指针相关的两个特殊运算符&#xff1a; 一、"&…

2020年大前端技术趋势解读

导Lead语如今的前端早已不再拘泥于满足页面展示&#xff0c;而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业&#xff0c;继而影响商业结果。这种表象的改变背后是本质的转变&#xff0c;从更为宏观的角度来说&#xff0c;前端正在通过持续的技术革新…

HTML默认样式表CSS属性

转载链接&#xff1a;http://www.xiao-a.com/index.php/archives/440.html 开始的时候 *{margin:0;padding:0;}&#xff0c;当需要使用边距的时候&#xff0c;就需要还原HTML默认CSS值了。以前一直在找这份 文档&#xff0c;今天偶然在w3上看到了。除了inline和block的定义&…

第六集 MSF构思阶段项目团队的组建

第六集 MSF构思阶段项目团队的组建__Note转载于:https://www.cnblogs.com/zencorn/archive/2009/10/18/1585495.html

lc滤波器是利用电感的感抗_你对LC谐振电路你都了解吗

根据在电路中电感器L和电容C的连接方式不同&#xff0c;可以有两种LC谐振电路&#xff0c;LC并联谐振电路和LC串联谐振电路。LC并联、串联谐振电路在应用中的变化较多&#xff0c;是电路中分析的一个难点&#xff0c;只有掌握LC并联、串联电路的阻抗特性等基本概念&#xff0c;…

给小程序再减重 30% 的秘密​(京喜小程序首页瘦身实践)

前言—在 web 开发场景&#xff0c;减少代码体积虽然是性能优化的一个方向&#xff0c;还没到锱铢必较的程度。但是在小程序场景&#xff0c;由于代码包上传阶段限制了主包 2M 和总包 16M&#xff08;近期微信官方正在内测将总包上限调整至 20M &#xff09;的尺寸&#xff0c;…

rfc mail content-type

转载链接&#xff1a;http://www.w3.org/Protocols/rfc1341/0_TableOfContents.html RFC 邮件正文类型列表&#xff1a; Note: this is a hypertext versionof RFC1341 which has been obsoletedby RFC1521, of which no hypertextversion currently exists. Text …

Coolite Toolkit入门指南

Coolite Toolkit 简介 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的&#xff0c;并且简化了开发步骤&#xff0c;包含有丰富的Ajax运用Coolite Toolkit和ExtJS 都是开源的可能通过SVN直接获取Coolite 的代码简单的说,就…

本周ASP.NET英文技术文章推荐[10/21 – 10/27]

这一篇是《本周ASP.NET英文技术文章推荐》系列的第一篇&#xff0c;在这个系列中&#xff0c;我将介绍5-10篇比较有价值的、本周发布的、与ASP.NET相关的英文技术文章&#xff0c;帮助各位朋友从良莠不齐的大量文章中挑出一些我认为非常有价值阅读的&#xff0c;在进行一段简要…

vim 离线安装_VIM学习笔记 插件列表(Plugin)

由于zhihu的垃圾编辑器不支持表格&#xff0c;请查看以下完整格式&#xff1a;http://yyq123.github.io/learn-vim/learn-vim-plugin.html说明&#xff1a;本列表完全基于作者的主观体验&#xff0c;既不客观也不完整&#xff1b;建议使用vim-plug或Vundle等插件管理器&#xf…

3 年前端面经和他在创业公司的成长历程

在掘金上当了几年的伸手党&#xff0c;最近也准备输出一些自己的东西。关于我首先介绍一下我自己&#xff0c;17 年毕业于一所 211 学校&#xff0c;但是由于大学四年驰骋在召唤师峡谷&#xff0c;毕业时也没有找到一份大厂的工作&#xff0c;随便找了一家创业公司签了三方就去…

Spring.NET学习笔记9——打造简易的依赖注入框架(练习篇) Level 100

我们在第三篇中学习里一个简易的IoC框架。今天我们接着上次的程序&#xff0c;实现带参数构造函数对象的实例和属性的注入 。  我们知道可以通过反射获取类的构造函数及参数(GetConstructors方法)&#xff1b;可以获取属性和属性的类型(GetProperties方法)。通过Activator的C…