輕量級前端MVVM框架avalon - 模型轉換

接上一章 ViewModel

 

---

modelFactory工廠是如何加工用戶定義的VM？

附源碼

• 洋洋灑灑100多行內部是魔幻般的實現

    function modelFactory(scope) {
        var skipArray = scope.$skipArray, //要忽略監控的屬性名列表
                model = {},
                Descriptions = {}, //內部用於轉換的對象
                json = {},
                callSetters = [],
                callGetters = [],
                VBPublics = Object.keys(watchOne); //用於IE6-8
        skipArray = Array.isArray(skipArray) ? skipArray.concat(VBPublics) : VBPublics;
        forEach(scope, function(name, value) {
            if (!watchOne[name]) {
                json[name] = value;
            }
            var valueType = avalon.type(value);

            if (valueType === "Function") {
                VBPublics.push(name); //函數無需要轉換
            } else {
                if (skipArray.indexOf(name) !== -1) {
                    return VBPublics.push(name);
                }
                if (name.charAt(0) === "$" && !systemOne[name]) {
                    return VBPublics.push(name);
                }
                var accessor, oldArgs;
                if (valueType === "Object" && typeof value.get === "function" && Object.keys(value).length <= 2) {
                    var setter = value.set,
                            getter = value.get;
                    accessor = function(neo) { //創建計算屬性
                        if (arguments.length) {
                            if (stopRepeatAssign) {
                                return; //阻止重復賦值
                            }
                            if (typeof setter === "function") {
                                setter.call(model, neo);

                            }
                            if (oldArgs !== neo) { //由於VBS對象不能用Object.prototype.toString來判定類型，我們就不做嚴密的檢測
                                oldArgs = neo;
                                notifySubscribers(accessor); //通知頂層改變
                                model.$events && model.$fire(name, neo, value);
                            }
                        } else {
                            if (openComputedCollect || !accessor.locked) {
                                collectSubscribers(accessor);
                            }
                            return value = json[name] = getter.call(model); //保存新值到json[name]
                        }
                    };
                    accessor.nick = name;
                    callGetters.push(accessor);
                } else {
                    value = NaN;
                    callSetters.push(name);
                    accessor = function(neo) { //創建監控屬性或數組
                        if (arguments.length) {

                            if (stopRepeatAssign) {
                                return; //阻止重復賦值
                            }
                            if (value !== neo) {
                                var old = value;
                                if (valueType === "Array" || valueType === "Object") {
                                    if (value && value.$id) {
                                        updateViewModel(value, neo, Array.isArray(neo));
                                    } else if (Array.isArray(neo)) {
                                        value = Collection(neo, model, name);
                                    } else {
                                        value = modelFactory(neo);
                                    }
                                } else {
                                    value = neo;
                                }
                                json[name] = value && value.$id ? value.$json : value;
                                notifySubscribers(accessor); //通知頂層改變
                                model.$events && model.$fire(name, value, old);
                            }

                        } else {
                            collectSubscribers(accessor); //收集視圖函數
                            return value;
                        }
                    };
                }
                accessor[subscribers] = [];
                Descriptions[name] = {
                    set: accessor,
                    get: accessor,
                    enumerable: true
                };
            }
        });
        if (defineProperties) {
            defineProperties(model, Descriptions);
        } else {
            model = VBDefineProperties(Descriptions, VBPublics);
        }
        VBPublics.forEach(function(name) {
            if (!watchOne[name]) {
                model[name] = scope[name];
            }
        });
        callSetters.forEach(function(prop) {
            model[prop] = scope[prop]; //為空對象賦值
        });
        callGetters.forEach(function(fn) {
            Publish[expose] = fn;
            callSetters = model[fn.nick];
            fn.locked = 1;
            delete Publish[expose];
        });
        model.$json = json;
        model.$events = {}; //VB對象的方法里的this並不指向自身，需要使用bind處理一下
        model.$watch = Observable.$watch.bind(model);
        model.$unwatch = Observable.$unwatch.bind(model);
        model.$fire = Observable.$fire.bind(model);
        model.$id = generateID();
        model.hasOwnProperty = function(name) {
            return name in model.$json;
        };
        return model;
    }

• VM是用ecma262v5的新API， Object.defineProperties生成的一個充滿訪問器的對象，這樣的對象，能通過用戶對它的屬性的讀寫，觸發定義時的getter, setter函數。getter, setter對rubyer, pythoner, C#er應該很熟悉，我就不展開了。
• 舊式IE，avalon利用VBScript的類實例，它也存在其他語言的訪問器。不過，VBS對象不像JS對象那樣隨意添加新屬性，刪除已有屬性，因此我們就無法監后添加的新屬性。Object.defineProperties也一樣，它能處理的屬性也只是它定義時的屬性，想監控后來的，需要再調用一次Object.defineProperties。

 

---

整個工廠方法內部都是圍繞着scope處理

1. 過濾監控的屬性
2. 收集視圖函數
3. 轉換用於定義

skipArray //要忽略監控的屬性名列表

0: "$json"
1: "$skipArray"
2: "$watch"
3: "$unwatch"
4: "$fire"
5: "$events"

 

我們還是已官網的demo為列

    avalon.define("simple", function(vm) {
        vm.firstName = "司徒"
        vm.lastName = "正美"
        vm.fullName = {//一個包含set或get的對象會被當成PropertyDescriptor，
            set: function(val) {//set, get里面的this不能改成vm
                var array = (val || "").split(" ");
                this.firstName = array[0] || "";
                this.lastName = array[1] || "";
            },
            get: function() {
                return this.firstName + " " + this.lastName;
            }
        }
    })
    avalon.scan(document.querySelector("fieldset"));

 

此時傳入的vm為

   $watch: function noop() {
   firstName: "司徒"
   fullName: Object
   lastName: "正美"

 

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

           純凈的js對象,所有訪問器與viewModel特有的方法屬性都去掉

   if (!watchOne[name]) {
            json[name] = value;
     }

幾個簡單的條件過濾：

    //判斷類型
        var valueType = avalon.type(value);

        if (valueType === "Function") {
            // 第一個就是$watch" 被重復假如到列表了
            VBPublics.push(name); //函數無需要轉換
        } else {

 

跳過過濾的條件后：

---

核心的轉換

• 轉換計算屬性
• 轉化監控屬性

 

轉換計算屬性：

1. 定義時為一個最多擁有get，set方法的對象（get方法是必需的）
2. 注意，get, set里面的this不能改為vm，框架內部會幫你調整好指向。

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

if (valueType === "Object" && typeof value.get === "function" && Object.keys(value).length <= 2) {

滿足條件的

 vm.fullName = {//一個包含set或get的對象會被當成PropertyDescriptor，
            set: function(val) {//set, get里面的this不能改成vm
                var array = (val || "").split(" ");
                this.firstName = array[0] || "";
                this.lastName = array[1] || "";
            },
            get: function() {
                return this.firstName + " " + this.lastName;
            }
        }

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

 

轉化監控屬性

1. 定義時為一個簡單的數據類型，如undefined, string, number, boolean。
2. 監控數組：定義時為一個數組

firstName: "司徒"

 

---

 

accessor[subscribers] = [];  

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

---

       //生成defineProperties需要的配置屬性
            Descriptions[name] = {
                set: accessor,
                get: accessor,
                enumerable: true
            };

• Descriptions臨時對象  //收集內部用於轉換的對象
• enumerable 很重要，為false的話 ，for in就找不到它了

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

最后都保存在Descriptions中

此時的Descriptions

Descriptions: Object

firstName: Object
    enumerable: true
    get: function (neo) { //創建監控屬性或數組
    set: function (neo) { //創建監控屬性或數組

fullName: Object
     enumerable: true
    get: function (neo) { //創建計算屬性
    set: function (neo) { //創建計算屬性

lastName: Object
     enumerable: true
    get: function (neo) { //創建監控屬性或數組
    set: function (neo) { //創建監控屬性或數組

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

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

 

---

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

    //添加用戶定義的未轉換的函數到模型
    VBPublics.forEach(function(name) {
        if (!watchOne[name]) {
            model[name] = scope[name];
        }
    });