jQuery鏈式調用與show知識淺析_jquery

jQuery使用許久了，但是有一些API的實現實在想不通。下面將使用簡化的代碼來介紹，主要關注jQuery的實現思想。

相較于上一篇，代碼更新了：21~78

先拿hide函數熱身一下。如上篇提到的，jQuery會將獲取到的nodeList處理成數組，所以一上來，我們用forEach處理數組里的每一個node節點。

接下來，我們只需要將每一個節點的style.display置為'none'即可隱藏。很簡單，對吧？(⊙０⊙) 。oldDisplay和return this先不管╰(￣▽￣)╮

其中isHidden是判斷該元素是否隱藏：已經隱藏的元素就沒必要再去處理了，直接跳過

--------------------------

接下來，來個稍繁瑣的show。先拋出一個問題來引發一系列問題：

hide某個元素只需要將display:none，那么show呢？

display:block不就行了嗎？這樣確實可以將元素顯示出來。但是萬一元素原來的值是display:inline呢？

那在hide處保存原來的值不就行了嗎？就像以下的代碼：

要是執行show前沒有不執行hide呢？比如下面這種情況，不就沒有oldDisplay了嗎(⊙０⊙)

好，關鍵的地方到了：我們獲取元素display的默認值就可以了吧？比如div默認是block，span默認是inline。

思路有了，那么接下來的問題是：如何獲取元素display的默認值？

嘿嘿嘿，想不到吧？這里需要用點小技巧，大體思路如下：通過nodeName創建一個新的標簽，再獲取。

有個地方可以再優化一下，getDisplay獲取到元素display默認值后，可以使用jQuery的cache機制存起來（實際上jQuery也是這么做了）。

然后，綜合這兩種情況：

以為這樣就結束了？NO,show函數的情況還是挺復雜的，我們大致要應對這幾種情況：

最終,show函數變成了這鬼樣ψ(╰_╯)。大致思路如下：

--------------------------

鏈式調用就是類似這種情況：

實現起來非常簡單，只要在每個函數后面return this即可

--------------------------

有同學說：喂！這個show,hide不對吧？是不是漏了時間參數？ 用setTimeOut自己實現吧~>_<~+。

本節最主要是讓大家知道jQuery需要考慮的情況非常多（很多臟活）。即時簡化了代碼，依然還是這么長。

寫完后，發現show還有一種情況沒考慮：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com