【前端】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選擇器$()的實現原理》