輕量級前端MVVM架構avalon - 模型轉換modelFactory工廠是如何加工使用者定義的VM？整個工廠方法内部都是圍繞着scope處理核心的轉換轉換計算屬性：轉化監控屬性

附源碼

洋洋灑灑100多行内部是魔幻般的實作

VM是用ecma262v5的新API， Object.defineProperties生成的一個充滿通路器的對象，這樣的對象，能通過使用者對它的屬性的讀寫，觸發定義時的getter, setter函數。getter, setter對rubyer, pythoner, C#er應該很熟悉，我就不展開了。

舊式IE，avalon利用VBScript的類執行個體，它也存在其他語言的通路器。不過，VBS對象不像JS對象那樣随意添加新屬性，删除已有屬性，是以我們就無法監後添加的新屬性。Object.defineProperties也一樣，它能處理的屬性也隻是它定義時的屬性，想監控後來的，需要再調用一次Object.defineProperties。

<a></a>

過濾監控的屬性

收集視圖函數

轉換用于定義

skipArray //要忽略監控的屬性名清單

我們還是已官網的demo為列

此時傳入的vm為

意圖很明顯就是周遊這些屬性,給出相對應的處理,具體我們接着往下看

           純淨的js對象,所有通路器與viewModel特有的方法屬性都去掉

幾個簡單的條件過濾：

跳過過濾的條件後：

轉換計算屬性

轉化監控屬性

定義時為一個最多擁有get，set方法的對象（get方法是必需的）

注意，get, set裡面的this不能改為vm，架構内部會幫你調整好指向。

判斷的條件，值類型是對象,并且有get方法,并且方法要少于等于2個

滿足條件的

具體有什麼用我們接着往下看

定義時為一個簡單的資料類型，如undefined, string, number, boolean。

監控數組：定義時為一個數組

别看這個代碼是空的函數，不起眼，雙向綁定就是看他了，我們先Mark下

Descriptions臨時對象  //收集内部用于轉換的對象

enumerable 很重要，為false的話 ，for in就找不到它了

這樣循環後就把該幹嘛的不該幹嘛的都給區分開了

最後都儲存在Descriptions中

此時的Descriptions

看吧就是這樣給包裝了一下,隻是定義了但是還沒生效

是以defineProperties(model, Descriptions); 給執行以下  （defineProperties的方法見前面）

model 就是工廠模式轉換後的新的vm模型對象了, 因為在開始周遊scope的過濾了一些東東，原本也是使用者定義的，是以這時候我們還得加到新的vm-》model中去、

});

本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/3146848.html，如需轉載請自行聯系原作者