【前端】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，而是简单选择器，目的就是定义范围，提升速度。
转载于猿2048:➼《【前端】jQuery选择器$()的实现原理》