avalon源碼閱讀（1）

來源

 

寫angularJS源碼閱讀系列的時候，寫的太垃圾了。

一個月後看，真心不忍直視，之後有機會的話得重寫。

此次寫avalonJS，但願能在代碼架構層面多些一點，少上源碼、多寫思路。

 

avalon暴露句柄方式  、、已經不是這樣了

(function(DOC){
...
avalon=...//沒有var
...
})(document)

 

具體暴露句柄方式的講解，在這裏。

avalon Dom遍歷

 

源碼的末尾執行了這麼avalon.ready(function(){...})一個函數,

而這個函數的末尾爲avalon.scan(DOC.body)

因而乎，avalon開始了讀body旅程。

在這旅程中，

 

有scanNodes、scanTag、scanAttr、scanText、scanExpr、scanTemplate須要來回流轉運用。

在講解讀取dom以前，咱們先了解下dom的組成，節點類型（document.nodeType）：

 

節點類型(nodeType) 元素類型

元素element
屬性attr
文本text

註釋comments
文檔document

 

咱們能夠經過節點類型和

具體的元素標籤

來斷定將要解析的 和 不會去解析的。

scanNodes

咱們先看scanNodes(parentElement,vmodels)函數，

他的做用是經過parentElement.firstChild``child.nextSibling 遍歷當前dom下 的子節點，

而且經過節點類型的斷定，各自調用scanTag(nodeType==1)

和scanText(NodeType==8 && 存在{{...}})函數。

 

scanTag

scanTag(elem, vmodels, node),這個函數蠻有意思的，

第三個參數node是做者不想進行var聲明，直接寫在參數裏的。

這個函數的做用是斷定avalon執行做用域的，

 

做用域有三類：ms-skip ms-import和 ms-controller(有優先順序)，

ms-important不包含父VM，ms-controller相反會有繼承效果。

固然，這時候遊覽器尚未執行用戶自定義的avalon.defined，

因此不會調用scanAttr繼續旅行的。  、、待定

 

scanText

scanText(textNode, text, vmodels),顧名思義，

會具體解析解析...{{...}}...的值。這樣的話，

就會涉及avalon filter的解析，具體解析方法放在scanExpr裏面，

 

scanText主要替換...{{...}}...爲解析後的數據，

而且若是有用了filter的話，會調用executeBindings進行相應的處理。

該函數會產生一個記錄scanText解析結果的object。數據結構爲：

{
　　type: "text",//類型
　　node: node,//替換後的element
　　nodeType: 3,//節點類型

　　value: token.value,
　　filters: token.filters
　　//token 爲scanExpr的返回值
}

 

scanExpr

scanExpr(str),這個函數只要知道返回的結果格式就好。

scanAttr

scanAttr(elem, vmodels)這個函數super重要的，

他會針對  avalon封裝的事件 和 ms-if repeat widget 等作相應的處理。

會在下一章連同 executeBindings 一塊講解。

scanTemplate

scanTemplate屬於模板加載，

之後可能會在這裏補上或者新開一篇文章單獨講解它。

小記

若是  有遍歷dom需求的話 ，上面代碼可通過  去除依賴處理後 摘出來。

基本流程：從頭到腳的開始遍歷，

 

根據存放在  dom attribute的值   來斷定業務需求和  v  m做用域，

ms-duplex屬性和  {{}}  作佔位符，等待渲染和佔位符替換。

 

VMODELS object則存  放着要  渲染進頁面的數據。