主要的方法有:
compile
深度遍歷前端介面的節點,將其複製進乙個addquene佇列中
pasers
遍歷所有的節點,並將節點包裝成乙個含有本節點、自定義屬性及屬性值的物件。要想實現雙向繫結,重要的一步是,為自定義s-model的節點繫結事件(input框的雙向繫結,監聽oninput事件)
observe
可是說是最為關鍵的一步,它是mvvm框架實現雙向繫結的基礎。我們知道,是通過es5中的object.defineproperty()去實現,劫持set和get屬性,以此來通知所有訂閱者做出改變。這一步也踩了一些坑,不過是一些比較小而基礎的錯誤,以此看出基礎的重要性,打好基礎是關鍵啊!這裡展示出關鍵**:
this.watch = function(obj, callback) ,
set: function(newval)
});that.callback();
},enumerable: true,
configurable: true
});});
} this.$observeobj();
}; this.observe = function() ;
render
剛開始渲染或資料發生改變時需要重新渲染。這個函式的主要點在於,對於指令的實現,比如s-text,就是簡單的資料展現,s-show需要操作css的display屬性等,這些都可以通過檢視官網去看細節,然後去運算元據,以達到相同的效果。
初期的效果已經實現,更多的指令需要去拓展,看懂了就不會覺得vue如此神秘了~
仿照vue實現簡易的MVVM框架(二)
實現文字插值與s for迴圈模版。對於文字插值的實現,我採用正則去匹配還原這個dom節點,以插值 形式為分界,將這個dom節點的文字分割成多個字串,儲存在this.muscha中,再者,將普通文字字串以陣列形式儲存在string屬性中,將插值存放在text屬性值。當然,拼接的時候要明白先從strin...
Vue 實現mvvm框架
observe obj 訂閱 key 資料 if this.binding key let binding this.binding key 重寫getter,setter object.defineproperty obj,key,set newval proxydata data,vm set ...
仿照String類,實現簡易版MyString類
還可以和vector一起用 別忘了寫在自己的命名空間,防止衝突 ifndef litestring h included define litestring h included include include namespace mystl else return dest size t strl...