zepto源碼--核心方法3（屬性相關）--學習筆記

繼續$.fn方法

今天主要介紹幾個跟屬性操做相關的方法attr, removeAttr, prop, data

attr

讀取或設置dom的屬性。若是沒有給定value參數，則讀取對象集合中第一個元素的屬性值。當給定了value參數。則設置對象集合中全部元素的該屬性的值。當value參數爲null，那麼這個屬性將被移除(相似removeAttr)，多個屬性能夠經過對象鍵值對的方式進行設置。

首先對參數進行條件判斷，若是傳入的參數name是字符串，而且value參數沒傳，則表示用戶指望的行爲是獲取name屬性：

　　若是選取的zepto對象集合存在，而且對象集合中的第一個元素是元素節點，則使用JavaScript原生方法getAttribute獲取第一個元素節點的屬性，若是值不爲null，直接返回，若是值爲null，則返回undefined。

若是不符合第一種狀況的話，則表示用戶指望行爲是設置屬性：

　　首先遍歷選取的zepto對象集合，對集合中的每個元素進行單獨的處理。

　　若是集合中的元素不是元素節點，直接返回，將控制權轉交給主調函數繼續執行。

　　若是傳入的參數name是以對象{}形式傳入的，則表示用戶指望設置多個屬性，則對name使用for in循環遍歷，分別調用setAttribute單獨處理。

　　普通默認狀況，傳入一個name，一個vaue，則直接調用setAttribute，須要考慮到value是以函數的形式傳入的狀況。

 

removeAttr

移除當前對象集合中全部元素的指定屬性。

比較簡單，沒有什麼可說的，name.split(' ')，表示以空格分割name字符串組成數組，setAttribute函數在前面定義，不傳第三個參數value，表示刪除屬性。

 

prop

讀取或設置dom元素的屬性值。它在讀取屬性值的狀況下優先於 attr，由於這些屬性值會由於用戶的交互發生改變，如checked 和 selected。

從字面理解的話，與attr其實沒有太大區別，可是從元素的屬性和特性的區別上來講，prop主要是設置屬性值，attr更多針對的是特性值。在一些涉及到保留關鍵字的屬性的時候，作了屬性值的映射propMap。簡寫或小寫名稱，好比for, class, readonly及相似的屬性，將被映射到實際的屬性上，好比htmlFor, className, readOnly, 等等。

 

removeProp

也比較簡單，因爲是元素屬性，因此能夠直接使用delete方法刪除元素屬性。

 

data

讀取或寫入dom的 data-* 屬性。行爲有點像 attr ，可是屬性名稱前面加上 data-。

當讀取屬性值時，會有下列轉換：

• 「true」, 「false」, and 「null」 被轉換爲相應的類型；
• 數字值轉換爲實際的數字類型；
• JSON值將會被解析，若是它是有效的JSON；
• 其它的一切做爲字符串返回。

 Zepto 基本實現`data()`只能存儲字符串。若是你要存儲任意對象，請引入可選的「data」模塊到你構建的Zepto中。

函數內部是經過調用attr方法實現的，因此其實主要功能與attr相似，封裝data的主要目的是爲了對一些自定義屬性的操做，以區分DOM屬性。