jQuery源码阅读(三)--解决冲突noConflict()

2024-05-04 14:18

本文主要是介绍jQuery源码阅读(三)--解决冲突noConflict(),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今天一行行看jQuery代码,大体看下来,jQuery源码的顺序大概是这些内容:

  • 一些变量和函数,包括jQuery对象的创建
  • jQuery.extend和jQuery.fn.extend
  • jQuery.extend扩展的一些工具方法
  • 回调函数Callbacks,包括有add方法和fire方法
  • 延迟对象Deferred
  • jQuery.support , jQuery功能检测
  • jQuery 数据缓存,包括jQuery挂载的静态方法data(), acceptData()等,以及在jQuery对象上的方法data();
  • 队列管理,出队入队queue(),dequeue(),主要在动画中用的比较多
  • 元素的属性操作,比如attr(), removeAttr(); addClass(), removeClass(), toggleClass(); hasClass(); val()等等
  • jQuery事件jQuery.event; 有add,remove方法;还有bind, one, trigger等
  • Sizzle选择器,用来处理各种复杂的选择器,得到选中的jQuery对象或者jQuery对象集合
  • DOM元素遍历,DOM的增删改,以及包裹等等操作
  • 对DOM样式的操作,即css()方法
  • aJax功能,ajax(), getJSON(), getScript()等等
  • 动画方法,show(), hide(), toggle(), fadeTo(), animate(), stop()等等
  • 各种offset, 即获取尺寸和位置方法
  • jQuery对模块化的支持,AMD,COMMONJS等,我看的jQuery1.7.2只有对AMD的支持,后面高版本对COMMONJS也支持。

下来先看一些变量:

//在创建jQuery对象之后
rootjQuery = jQuery(document);
//这样做的主要目的是后面用的时候既能保持语义,又可以减少代码量
readyList      //与DOM加载有关;可以在ready函数中看到对readyList的使用
location = window.location;
document = window.document;
navigator = window.navigator_$ = window.$;
_jQuery = window.jQuery;  /这两个变量主要是用于解决冲突的

下来我主要想跟大家分享一下解决冲突实现原理及源码:
我们知道,在使用jQuery的时候,如果先引用了别的库,然后再引用jQuery库,为了跟别的库在使用 jQuery 的使用权。
直接调

jQuery.noConflict();
$()      //利用的是别的库;
jQuery.noConflict(true);    //不仅释放掉$的使用权,也释放掉jQuery的使用权
jQuery();  //再调jQuery时,是上一个引入的jQuery库了;或者没有

那么jQuery中的noConflict是如何实现的?

_$ = window.$;
_jQuery = window.jQuery;jQuery.extend({noConflict: function(deep){if(window.$ === jQuery){window.$ = _$;}if(deep && window.jQuery === jQuery){window.jQuery = _jQuery;}return jQuery;}
})

跟着源码缕一下思路:
假设我们在html文件中,先引入了一个其他的库,比如说prototype.js, 引入之后, 此时的window.$是prototype.js库中的。而如果后面再引入jQuery.js库,这个时候window.$和window.jQuery都是jQuery方法,相当于覆盖了原来的prototype.js库中的$

那么在noConflict函数中,就先判断window.$与jQuery是否相等,如果相等,说明这时候jQuery库中的$被覆盖掉了,这时候重置window.$,即将window.$让给之前的库。 如何得到之前库的$, 这个值是保存在 _$中的。有点绕,不过比较容易理解。
当参数deep为true时,把jQuery的使用权也让出去,逻辑跟上面是类似的。

这篇关于jQuery源码阅读(三)--解决冲突noConflict()的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/959391

相关文章

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括:关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一:点击还原VM

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

mysql关联查询速度慢的问题及解决

《mysql关联查询速度慢的问题及解决》:本文主要介绍mysql关联查询速度慢的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql关联查询速度慢1. 记录原因1.1 在一次线上的服务中1.2 最终发现2. 解决方案3. 具体操作总结mysql

Python中Windows和macOS文件路径格式不一致的解决方法

《Python中Windows和macOS文件路径格式不一致的解决方法》在Python中,Windows和macOS的文件路径字符串格式不一致主要体现在路径分隔符上,这种差异可能导致跨平台代码在处理文... 目录方法 1:使用 os.path 模块方法 2:使用 pathlib 模块(推荐)方法 3:统一使

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...