博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
同一页面中引入多个JS库产生的冲突解决方案(转)
阅读量:5853 次
发布时间:2019-06-19

本文共 2307 字,大约阅读时间需要 7 分钟。

  发生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对‘$’标识符的控制,把它(‘$’)让位给第一个实现它的库。

  例如:

                                                                              

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

                                                                             

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

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

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

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

                                                                              

  那么这里有一个疑问:为什么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://ixsjx.baihongyu.com/

你可能感兴趣的文章
NodeJS的底层通信
查看>>
IOS---加急审核
查看>>
windows10 chrome 调试 ios safari 方法
查看>>
Java 免费!亚马逊开源 Java SE 发行版的直接替代品 Corretto
查看>>
在WPF中实现图片一边下载一边显示
查看>>
如何处理JavaScript 中的货币值?
查看>>
Hello , Ruby!
查看>>
iOS开发之AFNetWorking初次使用会报错的坑
查看>>
ChainDesk-Beego之ORM模型Model介绍
查看>>
navigator 应用
查看>>
Netty 4.1.35.Final 发布,经典开源 Java 网络服务框架
查看>>
Linux Centos服务器宝塔一键安装配置LNMP/LAMP网站环境——宝塔建站可视化(无需敲命令)...
查看>>
详解Microsoft.AspNetCore.CookiePolicy
查看>>
go与c互相调用
查看>>
idea配置SpringBoot热部署之自动Build
查看>>
如何优雅地用Redis实现分布式锁
查看>>
程序员的4条忠告,你做到了几条
查看>>
SpringBoot 2.0.0新版和SpringBoot1.5.2版本中Tomcat配置的差别(坑)
查看>>
分布式文件系统 go-fastdfs v1.2.7 发布,增加 Nginx 配置模版
查看>>
VRCORE开发者大赛圆满落幕,中国虚拟现实内容大集结
查看>>