前言:
看 jQuery 源码的一个痛点就是调用一个函数时,里面会调用 N 个其他函数,然后这 N 个函数里面又会调用 M 个其他其他函数。。
本篇文章主要是对detach()/empty()/remove()/unwrap()]()
中两个函数 getAll和cleanData() 进行解析。
一、getAll(context, tag)
作用:
用来获取 context 上的 tag 标签,或者是将 context 和 context 里的 tag 标签的元素合并
源码:
//一般是传的node,'script' //应该是用来获取context上的tag标签,或者是将context和context里的tag标签的元素合并 //源码4893行 function getAll( context, tag ) { // Support: IE <=9 - 11 only // Use typeof to avoid zero-argument method invocation on host objects (#15151) var ret; console.log(context,typeof context.getElementsByTagName,typeof context.querySelectorAll,'context4894') //如果context存在getElementsByTagName的方法的话 if ( typeof context.getElementsByTagName !== "undefined" ) { //tag:script //从context中获取script标签的节点 ret = context.getElementsByTagName( tag || "*" ) console.log(tag,ret,'ret4897') } //DocumentFragment没有getElementsByTagName方法,但有querySelectorAll方法 else if ( typeof context.querySelectorAll !== "undefined" ) { ret = context.querySelectorAll( tag || "*" ); } else { ret = []; } console.log(nodeName( context, tag ),'nodeName4909') //nodeName() 判断两个参数的nodename是否相等 if ( tag === undefined || tag && nodeName( context, tag ) ) { return jQuery.merge( [ context ], ret ); } return ret; }
注意:DocumentFragment 没有getElementsByTagName方法,但有querySelectorAll方法!
二、$.merge()
作用:
合并两个数组内容到第一个数组
源码:
// Support: Android <=4.0 only, PhantomJS 1 only // push.apply(_, arraylike) throws on ancient WebKit //源码461行 //将second合并到first后面 merge: function( first, second ) { var len = +second.length, j = 0, i = first.length; //依次将second的item添加到first后面 for ( ; j < len; j++ ) { first[ i++ ] = second[ j ]; } //first可能是类数组,所以需要更新下length属性 first.length = i; return first; },
需要注意的是最后的 first.length = i
三、cleanData()
作用:
清除元素节点上的事件和数据
源码:
//清除elems上的数据和事件 //源码6146行 cleanData: function( elems ) { var data, elem, type, //beforeunload/blur/click/focus/focusin/focusout/ //load/mouseenter/mouseleave/pointerenter/pointerleave special = jQuery.event.special, i = 0; for ( ; ( elem = elems[ i ] ) !== undefined; i++ ) { //允许的节点类型 if ( acceptData( elem ) ) { //当有事件绑定到elem后,jQuery会给elem一个属性dataPriv.expando //该属性上面就绑定了事件和数据 if ( ( data = elem[ dataPriv.expando ] ) ) { //如果data上有事件的话 if ( data.events ) { //逐个列举data上的事件,比如click for ( type in data.events ) { // 如果special中有data.events上的事件 if ( special[ type ] ) { //调用jQuery.event.remove方法,移除elem上的event类型 jQuery.event.remove( elem, type ); // This is a shortcut to avoid jQuery.event.remove's overhead } //应该是自定义的事件 else { //本质即elem.removeEventListener(type,handle) jQuery.removeEvent( elem, type, data.handle ); } } } // Support: Chrome <=35 - 45+ // Assign undefined instead of using delete, see Data#remove //最后将元素的dataPriv.expando属性置为undefined elem[ dataPriv.expando ] = undefined; } //dataUser应该是用户绑定的事件 if ( elem[ dataUser.expando ] ) { // 将元素的dataUser.expando属性置为undefined // Support: Chrome <=35 - 45+ // Assign undefined instead of using delete, see Data#remove elem[ dataUser.expando ] = undefined; } } } }
解析:
① 依次判断 elems[i] 是否是元素节点/文档节点/对象
② 再判断 elem 的 dataPriv.expando 属性是否有 events 属性
③ 当 events 里有 jQuery.event.special 指定的 事件类型时,
使用jQuery.event.remove(elem,type)移除事件和数据
④ 反之,则使用jQuery.removeEvent(elem,type,data.handle)移除事件和数据
⑤ 将 elem[dataPriv.expando]置为 undefined
⑥ 将 elem[dataUser.expando]置为 undefined
四、acceptData()
作用:
判断是否是指定的节点类型,返回 true/false
源码:
//判断是否是指定的节点类型 //只接受元素节点1,文档节点9,任意对象 //返回true/false //源码4178行 var acceptData = function( owner ) { // Accepts only: // - Node // - Node.ELEMENT_NODE // - Node.DOCUMENT_NODE // - Object // - Any return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType ); }
注意:
Object 类型的 nodeType 是 undefined
五、$.removeEvent()
作用:
移除 elem 上的自定义监听事件
源码:
//移除elem上的自定义监听事件 //源码5599行 //jQuery.removeEvent(elem,type,data.handle) jQuery.removeEvent = function( elem, type, handle ) { // This "if" is needed for plain objects if ( elem.removeEventListener ) { elem.removeEventListener( type, handle ); } }
本质即调用原生JS的removeEventListener()方法
总结
以上所述是小编给大家介绍的jQuery中的getAll()和cleanData(),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]