代碼github地址： https://github.com/susantong/myMVVM

主要的方法有：

compile
深度遍歷前端界面的節(jié)點(diǎn)，將其復(fù)制進(jìn)一個(gè)addQuene隊(duì)列中

pasers
遍歷所有的節(jié)點(diǎn)，并將節(jié)點(diǎn)包裝成一個(gè)含有本節(jié)點(diǎn)、自定義屬性及屬性值的對象。要想實(shí)現(xiàn)雙向綁定，重要的一步是，為自定義s-model的節(jié)點(diǎn)綁定事件(input框的雙向綁定，監(jiān)聽oninput事件)

observe
可是說是最為關(guān)鍵的一步，它是MVVM框架實(shí)現(xiàn)雙向綁定的基礎(chǔ)。我們知道，是通過es5中的Object.defineproperty()去實(shí)現(xiàn)，劫持set和get屬性，以此來通知所有訂閱者做出改變。這一步也踩了一些坑，不過是一些比較小而基礎(chǔ)的錯(cuò)誤，以此看出基礎(chǔ)的重要性，打好基礎(chǔ)是關(guān)鍵啊！這里展示出關(guān)鍵代碼:

this.watch = function(obj, callback) {this.$observeObj = function() {var that = this;this.callback = callback;//console.log(Object.keys(obj));Object.keys(obj).forEach(function(prop) {var val = obj[prop];Object.defineProperty(obj, prop, {get: function() {return val;},set: function(newVal) {var temp = val;//console.log(newVal);val = newVal;//通知所有訂閱者改變that.cache.forEach(function(item) {if (item[prop]) {item[prop] = newVal;}});that.callback();},enumerable: true,configurable: true});});}this.$observeObj();};this.observe = function() {this.watch(data, this.render);};

render
剛開始渲染或數(shù)據(jù)發(fā)生改變時(shí)需要重新渲染。這個(gè)函數(shù)的主要點(diǎn)在于，對于指令的實(shí)現(xiàn)，比如s-text,就是簡單的數(shù)據(jù)展現(xiàn)，s-show需要操作css的display屬性等，這些都可以通過查看官網(wǎng)去看細(xì)節(jié)，然后去操作數(shù)據(jù)，以達(dá)到相同的效果。

初期的效果已經(jīng)實(shí)現(xiàn)，更多的指令需要去拓展，看懂了就不會(huì)覺得vue如此神秘了~

轉(zhuǎn)載于:https://www.cnblogs.com/susantong/p/6883167.html

總結(jié)

以上是生活随笔為你收集整理的仿照vue实现简易的MVVM框架（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。