当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解jQuery中的getAll()和cleanData()

详解jQuery中的getAll()和cleanData()

2019年07月24日  | 移动技术网IT编程  | 我要评论

前言：

看 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(),希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网