本文主要是介绍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()的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!