【前端】jQuery选择器$()的实现原理

今天三七互娱技术面试的时候面试官问了我这个问题，当时一脸懵逼，于是好好总结一下。

　　当我们使用jquery选择器的时候，$(s).回默认去执行jquery内部封装好的一个init的构造函数每次申明一个jQuery对象的时候，返回的是jQuery.prototype.init对象。这个init不是jquery.fn上的方法，而是内部源码的一个函数。

　　这个函数是干什么用的呢？

　　当我们使用选择器的时候$(selector,content)，就会执行init(selectot,content)，我们看看inti中是怎样执行的：

if ( typeof selector == "string" ) 
{
 //正则匹配，看是不是HTML代码或者是#id
    var match = quickExpr.exec( selector );
    //没有作为待查找的 DOM 元素集、文档或 jQuery 对象。
 //selector是#id的形式
 if ( match && (match[1] || !context) ) 
 {
  // HANDLE: $(html) -> $(array)
  //HTML代码,调用clean补全HTML代码
  if ( match[1] ){
   selector = jQuery.clean( [ match[1] ], context );
  }
  // 是: $("#id")
  else {
   //判断id的Dom是不是加载完成
   var elem = document.getElementById( match[3] );
   if ( elem ){
    if ( elem.id != match[3] )
    return jQuery().find( selector );
    return jQuery( elem );//执行完毕return
   }
   selector = [];
  }
  //非id的形式.在context中或者是全文查找
 } 
 else{
  return jQuery( context ).find( selector );
 }
}

　　这里就说明只有选择器写成$('#id')的时候最快，相当于执行了一次getElementById，后边的程序就不用再执行了。但是如果我们的选择器更加复杂的话，比如我们需要id下的CSS为className， 有这样的写法$('#id.className')和$('#id').find('.className');这两种写法的执行结果都是一样的。都是先去查找执行init,找到id了，立刻返回return。 然后再去执行find（）函数方法。find也就是到当前dom对象下去查找选择器。但是如果直接$('.className'）的话， 这样的是去执行init函数，然后到全局全文里，全部的dom对象一个个查找遍历。效率相比前面的低很多。就是说第一层选择最好是ID，而是简单选择器，目的就是定义范围，提高速度。