仿照vue實現簡易的MVVM框架(一)

2022-09-12 08:15:12 字數 797 閱讀 9910

主要的方法有:

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...