一、问题概述:

1、随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时,那么此时,就会产生冲突。

2、由于jQuery的更新速度过快,所以插件更不上,导致不同版本的jQuery对插件支持的不一样,而刚好我们此时需要用一个高版本的jQuery进行开发,我们用的z-tree则是低版本的jQuery,所以在这种场景下,则会产生$和jQuery命名空间冲突的问题

3、这里jQuery解决多库共存的问题的绝决方案只用于单文件js类库框架,如果是多文件就不行了像EXT这种

二、解决方法

1、通过jQuery自带的noConflict函数将$或者jQuery映射回给之前使用过$和jQuery对象的js类库

简介:jQuery.noConflict()的具体实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

   jQuery={};//模拟jQuery对象

   //将$和jQuery两个对象(命名空间)存入到临时变量中去,应为这两个变量可能会和其他库的变量冲突

   var _$=window.$,_jQuery=window.jQuery;

   //上面定义的_$和_jQuery的变量值可能会存在三种情况

   //第一种当jQuery文件位于最顶端时,那么里面存储的就是js全局变量的默认值

   //第二种当jQuery文件位于其他js文件之下,且前面的库库有使用到window.$和window.jQuery中的任意一个,
   //那么当调用下面的noConflict方法之后,jQuery就会将对应的window.$和window.jQuery控制权返还给之前使用到他们的js库

   //实际交还$对象和jQuery对象的方法

   jQuery.noConflict=function(deep){

       //交还$对象的控制权

      //因为jQuery会做window.$=window.jQuery=jQuery这个操作,

      //将window.$和window.jQuery对象都托管给jQuery对象,所以当

      //加载完jQuery文件之后,执行jQuery.noConflict()如果window.$

      //对象已经脱管给了jQuery对象的话,那么就通过将原来的

      //window.$的值覆盖现在window.$的形式,完成$对象控制权的交

      //换,  所以覆盖之后的$对象的值就是在jQuery之前使用到$对象的js

      //库中定义的值,而我们也不能使用$符来使用选择器,只能通过jQuery对象

      if(window.$===jQuery)

      {

          window.$=_$;//将原先缓存的window.$(之前加载完成的js库的$对象)覆盖在执行jQuery文件之后重新定义的jQuery自带的$对象

      }

      //交换jQuery对象的控制权

      //jQuery对象不能轻易的交还控制权,所以这里加了一个deep参数,只有当这个参数为true时,才会交还

      if(deep && window.jQuery===jQuery)

      {

          window.jQuery=_jQuery;//将原先缓存的window.jQuery(之前加载完成的js库的jQuery对象)覆盖在执行jQuery文件之后重新定义的jQuery自带的jQuery对象

      }
      return jQuery;//返回jQuery对象,这样的话我们就可以给jQuery对象重新定义一个个性化的名字

   }

</script>

</body>

</html>

(1)通过jQuery.noConflict()交还$和jQuery对象的控制权,解决命名控件冲突的问题

当jQuery文件第一个加载时,调用jQuery.noConflict()交换$的控制权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    console.log(window.$);//打印function (e,t){return new b.fn.init(e,t,r)} jQuery中定义的$对象

    jQuery.noConflict();

    console.log(window.$);//打印出undefined

</script>

</body>

</html>

当jQuery文件在其他js库加载完之后加载,且这些库已经使用了$对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/prototype.js"></script>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    console.log(window.$);//打印出:function (e,t){return new b.fn.init(e,t,r)} jQuery中定义的$对象

    jQuery.noConflict();

    console.log(window.$);//打印出prototype中定义的$对象

</script>

</body>

</html>

(2)通过jQuery.noConflict()来给jQuery对象重新命名的方式解决冲突问题

这实际上也是交换$对象给前面的js类库后,通过返回的jQuery对象自定义的给jQuery对象命名的方式,解决的方式其实和上面的是一样的,但是区别是我们可以定义一个个性化的名字(前提是不要和前面的对象冲突)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    var zc=jQuery.noConflict();

    alert(zc("body").length);//输出:1

</script>

</body>

</html>

(3)听过jQuery.noConflict()方法返还$对象的控制权,通过匿名执行函数(闭包)的方式重新恢复对$对象的使用,只不过,$对象只在闭包范围内有效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    jQuery.noConflict();//交还$对象的控制权给前面使用过$对象的js库

    (function($){

        alert($("body").length);//输出:1;

    })(jQuery)//将jQuery对象作为实参传递给形参$,这样$还是代表jQuery对象

</script>

</body>

</html>

(4)通过jQuery.noConflict()同时去除$对象和jQuery对象的控制权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    jQuery.noConflict(true);

    alert($);//输出:undefined

    alert(jQuery);//输出:undefined

</script>

</body>

</html>

(5)下面是终极的解决方案,使用这个方案你可以把jQuery集成到你自己定义的js类库中区,同时,去除$和jQuery对象的控制,也就是说,$和jQuery不再适用,而把jQuery对象的所有的属性和方法,都转移到你的对象下面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../common/jquery-1.9.1.min.js"></script>

</head>

<body>

<script>

    var zc={};//自定义的对象

    zc.query=jQuery.noConflict(true);

    alert(zc.query("body").length);//输出:1

    alert(jQuery);//输出:undefined

    alert($);//输出:undefined

</script>

</body>

</html>

通过上面的输出发现:此时$和jQuery对象均无法使用,而自定义的zc.query怎可以使用jQuery对象所有的属性和方法

jQuery多库共存问题解决方法的更多相关文章

  1. jQuery多库共存处理

    jQuery多库共存处理(来自慕课网) 多库共存换句话说可以叫无冲突处理. 总的来说会有2种情况会遇到: 1.$太火热,jQuery采用$作为命名空间,不免会与别的库框架或者插件相冲突. 2.jQue ...

  2. jQuery——多库共存

    多库共存:jQuery占用了$ 和jQuery这两个变量.当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要 ...

  3. jQuery 多库共存

    多库共存 问题概述         jQuery使用$作为标识符,随着jQuery的流行,其他js的库也会用$作为标识符,这样就会引起冲突         需要一个解决方案 让jQuery和其他的JS ...

  4. jQuery 跨域访问问题解决方法（转）

    转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...

  5. jQuery多库共存处理$.noConflict()

    如果我们需要同时使用jQuery和其他JavaScript库,我们可以使用 $.noConflict()把$的控制权交给其他库.旧引用的$ 被保存在jQuery的初始化; noConflict() 简 ...

  6. Cocos2d-x extensions库使用问题解决方法

    需要在加入头文件#include "cocos-ext.h" 1>e:\cocos\cocos2d-x\cocos2d-x-3.10\extensions\gui\cccon ...

  7. jQuery与其他JS库共存

    * 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$&qu ...

  8. jquery 之事件 多库共存(noConflict)

    /*jquery 之 简单事件jquery 与其它库共存,提供了 .noConflict() 方法,用法如下<script src="jquery 库"><scr ...

  9. 怎样让jQuery和其它js库共存

    怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于 ...

随机推荐

  1. C++中static修饰的静态成员函数、静态数据成员

    1.静态成员函数.静态数据成员 在类中,用static修饰的成员函数被称为静态成员函数,而用static修饰的数据成员就称为静态数据成员:与普通的成员函数和数据成员不同, 静态成员函数和静态数据成员有 ...

  2. Ubuntu的常识使用了解2

    1. 在linux系统中,所有的目录(分区)都是挂靠在/跟目录下. 使用「cd」这个指令来切換目录.切换目录的方式:(1)绝对路径,以根目录做开头/, (2)相对目录, 没有以根目录开头. 注意:插补 ...

  3. StringFormate使用

    1常规类型的格式化 1.1显示不同转换符实现不同数据类型到字符串的转换 转换符   说明 示例 %s     字符串类型 “mingrisof” %c     字符类型 'm' %b 布尔类型 tru ...

  4. C#基础入门 六

    C#基础入门 六 静态类进阶 静态构造方法 用于初始化任何静态数据,或用于执行仅需执行一次的特定操作,在创建第一个实例或引用任何静态成员之前,将自动调用静态构造函数,静态构造方法是无参数的. publ ...

  5. php数组转成php编程代码

    将php数组转成可以在php上面运行的编程代码,支持一维及多维数组 <?php //一维数组 $test1 = array(1,2,3); //二维数组 $test2[0] = array( ' ...

  6. 安装TestNG在eclipse中的插件

    两种方法可以安装TestNG Eclipse插件: 第一种,离线安装 TestNG Eclipse插件下载地址http://testng.org/doc/download.html. 下载下来以后,放 ...

  7. 在Visual Studio 2013中修改远程Git服务器的地址

    在Visual Studio 2013中克隆了远程Git服务器的代码后,可以通过下图的方式修改Git服务器的地址:

  8. hbase zookeeper独立搭建

    一.zk单独搭建 1.修改配置文件:conf/zoo.cfg tickTime=2000 dataDir=/home/hadoop/data/zookeeper clientPort=2181 ini ...

  9. c#设计模式之策略者模式(Strategy Pattern)

    场景出发 假设存在如下游戏场景: 1:角色可以装备木剑,铁剑,魔剑3种装备,分别对怪物造成20HP,50HP,100HP伤害(未佩戴装备则无法攻击); 2角色可以向怪物攻击,一次攻击后损失角色所佩戴装 ...

  10. 用MVC5+EF6+WebApi 做一个小功能（一）开场挖坑，在线答题系统

    从哪开始说呢,这几年微软的技术一直在变,像是牟足了劲要累死所有的NET程序员,从WebForm到MVC到现在MPA.SPA .Razor单页,从net2.0一直走到现在.net4.6.2,后面还有一个 ...