同一页面中引入多个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库会引起错误,具体的原因是什么?
同一页面中引入多个JS库产生的冲突解决方案(转)的更多相关文章
- 页面中引入js的几种方法
通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了
原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...
- JSP页面中引入另一个JSP页面
一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...
- Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- 通过node.js读取html页面及其页面中引入的css样式
Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...
- Thymeleaf模版--子页面单独引入CSS、JS文件
https://blog.csdn.net/u010392801/article/details/80465800 ****************************************** ...
- 由js文件中引入另外的js文件想到的
1. html中,使用<script src="../static/js/xxx.js"></script>引入js文件. 2. 在js文件中,引入js ...
- jsp页面中引入文件路径问题的解决方案(使用request获取项目路径)【原创】
在项目页面中,总会引入一些js和css,相对路径or绝对路径的选择就显得至关重要了!下面是项目中遇到的问题和解决方案,做一下记录! 环境: myEclipse创建工程,使用jsp+css+js,项目目 ...
随机推荐
- react 事件绑定的2种常用方式
方式一:传统 import React, { Component } from 'react'; class App extends Component { handleSubmit (e, args ...
- linux下man手册简介
Linux提供了丰富的帮助手册,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可.Linux 的man手册共有以下几个章节: 1.Standard commands (标准命令)2.S ...
- 批处理学习笔记3 - 变量声明和goto代替while循环
批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...
- 【Android】11.0 第11章 活动和片段--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-21 一.简介 这一章我们学习activity和fragment,深入理解activity和fragment的生命周期是如何工作的 ...
- VS2012 WIN7下使用DotNetBar 使用Office2007Form皮肤 窗体运行不显示问题解决方法
在窗体属性中有个EnableGlass属性,设置为False即可.
- 终端模拟工具:Xshell 4
终端模拟工具:Xshell 4 2016-09-20 目录 1 安装 2 配置 3 命令 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Window ...
- 将ASCII字符串转换为UNICODE字符串
写在前面的话:在MFC的网络编程中,由于现在项目都是使用UNICODE编码,但是网络API的许多函数却只能接受const char*的参数,所以经常会遇到需要将char*转换为TCHAR*的时候,有一 ...
- poj1564-Sum It Up(经典DFS)
给出一个n,k,再给出的n个数中,输出所有的可能使几个数的和等于k Sample Input 4 6 4 3 2 2 1 15 3 2 1 1400 12 50 50 50 50 50 50 25 2 ...
- JAVA-JSP指令元素之page指令
相关资料:<21天学通Java Web开发> 结果总结:1.page设定JSP页面全局属性,作用于整个JSP页面,包括静态包含的文件2.<%@ page 属性1="属性值1 ...
- upupw phpmyadmin写shell
废话: upupw给我的感觉是一个充当了waf毁三观的垃圾程序.然而,我讨厌的程序,管理员都特别喜欢用. 你会发现直接用之前那套写shell的建表然后在值里添加shell代码写到一个路径不可以了. C ...