[筆記] 跟著JQuery原始碼一起學習程式設計

在這篇筆記中，我們會要進入jQuery的原始碼中。

雖然這堂課老師一直希望我們可以自己多透過這些開源的程式碼來學習程式設計，但是說真的，直接進入原始碼的時候，還真的是看不太懂阿...，好險有老師一步一步點出重點來，就讓我們從中發掘一些可以學習或應用的部分，趕快看下去吧！

看一下JQuery這個物件

我們可以先輸入以下的HTML架構：

  <nav>
    <ul class = 'people'>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

然後我們可以在js檔中，輸入以下jQuery語法：

  var q = $("ul.people li");
  console.log(q);

如此，我們就可以檢視看看jQuery物件的樣子。在console視窗中我們可以看到它是一個array-like的東西，名稱是 jQuery.fn.init ，先稍微對這個名稱有個印象，等等我們在去原始碼中看看這個東西：

另外，我們可以在 __proto__ 裡面，看到一大堆的jQuery方法：

接著，就讓我們正式進入jQuery原始碼啦！

說實話，要我自己看這個原始碼，還真的不知道要從何看起...，不過透過老師的引導，幾乎是把這堂課所學到的重要內容再次複習了一次。

IIFEs的使用

一打開jQuery原始碼，我們就會看到一個IIFEs，記得我們有提過在IIFEs中所建立的變數，都不會影響到Global Execution Context所建立的變數，也就是說，透過IIFEs，它避免了我們的變數間可能會互相干擾覆蓋的情況 ，而jQuery同樣是使用了IIFEs的方式來撰寫這個library。

IIFEs開頭

接著，我們可以往下看到IIFEs的結尾，其中有一串是 typeof window !== "undefiend" ? window : this ，這個意思是如果window的類型不是undefiend的話，則global object就是window，否則是this（根據當時的環境所決定）。

IIFEs結尾

複習：
[筆記] 談談JavaScript中的IIFEs(Immediately Invoked Functions Expressions)
[筆記] 為什麼我們要用IIFEs(Immediately Invoked Functions Expressions)

為什麼在jQuery中不需要輸入 new 來建立物件

我們知道在jQuery中，我們只需要寫 $( ) 或 jQuery( ) 就可以建立jQuery的物件了，而不需要使用關鍵字 new ，為什麼可以這樣呢？

原因在於它用了 return new ... 這樣的用法，等於當我輸入jQuery時，它就會直接幫我帶入 new 這個關鍵字，讓我們不用每次用new這個關鍵字。

從這裡，我們也可以知道 jQuery.fn.init 是一個function constructor，我們應該可以在後面的地方找到它。

在jQuery中為什麼可以使用方法鍊（method chaining）?

在jQuery中，我們可以在一個方法之後直接接著另一個方法使用，像是這樣：

  var q = $("nav ul.people").addClass("newClass").removeClass("people");
  console.log(q);

我們可以直接針對ul這個元素，去添加class，同時直接在後面移除class，而不用重複打兩次。這種一個方法接著一個方法，而且每個方法都可以影響到父層物件的情形，我們就稱為方法鍊（method chaining）。

這是一個很有趣的情形，因為我們知道第一個 addClass 因為接在 jQuery 物件之後，所以它會是 jQuery 物件裡面的一個方法，同時可以對 jQuery 物件產生影響；但是，對於 removeClass 這個方法來說，它是放在另一個方法後面，為什麼可以找到這個方法，而且仍可對我們的 jQuery 物件有作用呢？

為了要解答這樣的問題，我們要進入到 jQuery 原始碼中一探究竟。

搜尋 addClass 這個方法的地方，我們會發現到，這個方法的最後有一個關鍵，也就是它 return this ，而這裡的 this 指的也就是我們的 jQuery 物件，因此透過這個 return this，它可以先針對物件進行欲要進行的方法後，最後再次將它回傳成一個物件，於是，它就可以繼續在接著下一個方法，形成一個方法鍊的作法。

也就是說，addClass 這個方法執行完後，會回傳原本的 jQuery 物件，因此變得就像這樣子：

  var q = $("nav ul.people").removeClass("people")

在原始碼中，我們可以看到，在 removeClass 或其他許多的方法中，最後都會加上 return this 。

為什麼在jQuery中可以使用 $ 或者 jQuery 來建立物件？

接下來我們想要來看，為什麼在jQuery中，我可以透過 $( ) 或者 jQuery( )這兩種方式來建立物件都不會有問題呢？

我們在程式最下方的地方可以看到這個，而這也就說明了，為什麼我們可以使用 jQuery 或 $ 的方式來建立物件，因為他最後都是指稱到 IIFEs 裡面的這個 jQuery 函式。

→回到此系列文章目錄

資料來源：[Udemy] Understanding the weird part of JavaScript: Examining Famous Frameworks and Libraries