【前端】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，而是簡單選擇器，目的就是定義范圍，提高速度。