經過幾天的討論,基本上確定了avalon的幾個重要元素的關係。
M,即model,一個普通的JS對象,可能是後台傳過來的,也可能是直接從VM中拿到,即VM.$json。有關的這個$json的名字還在商討,詳見這裡
V,即View,HTML頁面,通過綁定屬性或插值運算式,呈現資料,處理隱藏,綁定事件或動畫等各種互動效果。V只與VM打交道。
VM,即ViewModel,我們通過avalon.define("xxx", function(vm){vm.firstName = "正美"}),這裡的vm是一個臨時的對象,用於定義,真正的VM是avalon.define方法的傳回值。它上面的$json屬性就是M,可以見VM處於一切的核心。我們對VM的每一個操作,都會向上同步到V,向下同步到M。並且出於節能低碳起見(減少對象的建立),我們在產生M時,會重複利用VM中的一些屬性,比如vm的某個屬性是一個對象,那麼這個對象會直接搬到$json中。若它是一個數組,它裡面每個元素為對象,這些數組或對象都會直接$json中去,當然有時會修複一下(比如計算屬性會轉換一個簡單的資料類型)
下面是一個夠為直觀的例子:
var b = {name: "xxx", eee: "ooo"} var array = [{name: "xxx"}, {title: "yyy"}] var a = avalon.define("xxx", function(vm) { vm.firstName = "司徒"; vm.lastName = "正美"; vm.nick = b; vm.array = array; }); console.log(a.nick.$json === b);//true console.log(a.array.$json == array);//true console.log(a.array.$json[0] === array[0]);//true console.log(a.array[0].$json === array[0]);//true console.log(JSON.stringify(a.$json));//{"firstName":"司徒","lastName":"正美","nick":{"name":"xxx","eee":"ooo"},"array":[{"name":"xxx"},{"title":"yyy"}]}