仿照vue实现简易的MVVM框架（一）

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

主要的方法有：

compile
深度遍历前端界面的节点，将其复制进一个addQuene队列中

pasers
遍历所有的节点，并将节点包装成一个含有本节点、自定义属性及属性值的对象。要想实现双向绑定，重要的一步是，为自定义s-model的节点绑定事件(input框的双向绑定，监听oninput事件)

observe
可是说是最为关键的一步，它是MVVM框架实现双向绑定的基础。我们知道，是通过es5中的Object.defineproperty()去实现，劫持set和get属性，以此来通知所有订阅者做出改变。这一步也踩了一些坑，不过是一些比较小而基础的错误，以此看出基础的重要性，打好基础是关键啊！这里展示出关键代码:

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
刚开始渲染或数据发生改变时需要重新渲染。这个函数的主要点在于，对于指令的实现，比如s-text,就是简单的数据展现，s-show需要操作css的display属性等，这些都可以通过查看官网去看细节，然后去操作数据，以达到相同的效果。

初期的效果已经实现，更多的指令需要去拓展，看懂了就不会觉得vue如此神秘了~

转载于:https://www.cnblogs.com/susantong/p/6883167.html

总结

以上是生活随笔为你收集整理的仿照vue实现简易的MVVM框架（一）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。