avalonJS-源碼閱讀（一）

標籤：

    寫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)      元素類型1                                   元素element2                                   屬性attr3                                   文本text8                                   注釋comments9                                   文檔document我們可以通過節點類型和具體的元素標籤來判定將要解析的和不會去解析的。scanNodes我們先看scanNodes(parentElement,vmodels)函數，他的作用是通過parentElement.firstChild``child.nextSibling遍曆當前dom下的子節點，並且通過節點類型的判定，各自調用scanTag(nodeType==1)和scanText(NodeType==8 && 存在{{...}})函數。scanTagscanTag(elem, vmodels, node),這個函數蠻有意思的，第三個參數node是作者不想進行var聲明，直接寫在參數裡的。這個函數的作用是判定avalon執行範圍的，範圍有三類：ms-skip ms-import和 ms-controller(有優先順序)，ms-important不包含父VM，ms-controller相反會有繼承效果。當然，這時候遊覽器還沒有執行使用者自訂的avalon.defined，所以不會調用scanAttr繼續旅行的。scanTextscanText(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的傳回值    }scanExprscanExpr(str),這個函數只要知道返回的結果格式就好。scanAttrscanAttr(elem, vmodels)這個函數super重要的，他會針對avalon封裝的事件和ms-if repeat widget等做相應的處理。會在下一章連同executeBindings一塊講解。scanTemplatescanTemplate屬於模板載入，以後可能會在這裡補上或者新開一篇文章單獨講解它。小記如果有遍曆dom需求的話，上面代碼可經過去除依賴處理後摘出來。基本流程：從頭到腳的開始遍曆，根據存放在dom attribute的值來判定業務需求和vm範圍，ms-duplex屬性和{{}}做預留位置，等待渲染和預留位置替換。VMODELS object則存放著要渲染進頁面的資料。

http://my.oschina.net/myprogworld/blog/228949

avalonJS-源碼閱讀（一）