上一篇返本求源中,我們從dom基礎的角度出發,總結了特性與屬性的關系。本文中,我們來看看dojo架構是如何處理特性與屬性的。dojo架構中特性的處理位于dojo/dom-attr子產品屬性的處理為與dojo/dom-prop子產品中。
attr.set()
方法的函數簽名為:
“someattr”代表特性名稱,但有時候也可以是一些特殊的屬性名,如:‘textcontent’:

可以看到上圖中使用attr設定innertext隻會在html标簽中增加innertext這個自定義特性,而無法改變文本,使用textcontent卻能夠達到改變文本的目的。其中緣由就是因為在attr子產品建立了forceprops字典,在此字典中的key全部使用prop子產品來設定:
set()方法中主要處理以下幾件事:
“someattr”除了可以是字元串外,還可以是key-value對象,是以對于key-value對象我們首先要進行參數分解。
如果someattr等于style,就交給dojo/dom-style子產品來處理
上篇文章中我們說過,特性值隻能是字元串,是以對于函數,預設是作為事件綁定到元素上,這部分交給dojo/dom-prop來處理;另外對于disabled、checked等無狀态的屬性,在通過屬性設定時,隻能傳遞布爾值,是以這部分也交給prop來處理
剩下的交給原生api,setattribute來處理,這個方法會自動調用value的tostring方法
attr.get()
為了解釋友善,我們要先看一下get方法的源碼:
先得到的是三個變量:propname、forceprop、value,
如果attrname屬于forceprops集合,直接傳回dom節點的屬性
textcontent明顯位于forceprops中,為什麼還要單獨拿出來做判斷?因為有的低版本的浏覽器不支援textcontent,我們需要利用深度優先算法,利用文本的節點的nodevalue由父到子依次拼接文本,這一點jquery與dojo的思路都是一緻的:
dojo:
jquery:
set方法中提到過,對于布爾跟函數,交給prop來設定,那麼取值時當然也要從prop中來取;至于為什麼要單獨拿出href,在“返本求源”中已經說過,通過屬性得到的href屬性跟getattribute方法得到的值并不一定相同,尤其是非英文字元:
由prop子產品該做的都做完了,是以這裡判斷node中是否存在該特性時,無需理會forceprops字典;如果存在則調用getattribute方法。
attr.has
既然可以使用attr來set這些屬性,那在attr.has方法中,位于此字典中屬性當然也要傳回true,是以attr.has(node, attrname)方法主要判斷兩個方面:
attrname是否是forceprops中的key
attrname是否是一個特性節點。特性節點為與元素的attributes屬性中,可以通過:attributes[attrname] && attributes[attrname].specified 來判斷
attr.remove
這個方法比較簡單,直接調用了removeattribute方法
如果您覺得這篇文章對您有幫助,請不吝點選右下方“推薦”,謝謝~