mvvm框架实现问题记录

这里说的MVVM框架是指类似vue、avalon通过双向绑定、数据驱动的框架。

基本原理：通过defineProperties拦截数据的get,set；在dom模版加载时，扫描dom上的特殊命名的标签，生成对对应标签属性的取值函数和刷新函数；在对属性的表达式取值时，将刷新函数注册到相关联的表达式变量改变后的处理数组中，完成数据操作自动触发dom改变。

代码实现上根据http://www.cnblogs.com/Aaronjs/重写，代码稍有不一致，

代码地址：https://github.com/lukezhang001/mvvmtest

 

由于只是简单实现，又有参考，过程中问题不是很多，碰到的问题简单记录如下:

1、代码写完，在本地调试过程中发现js的加载状态一直是pending，问题是浏览器上看不到js文件无法断点调试，后来经过不断的排除对比，发现代码中有死循环，修改后正常

2、代码中MVVM.define的factory执行了两次，第一次执行返回的scope是普通对象，用于生成Properties的描述数组，在defineProperties后返回的model要再执行一次factory。原来是将originalModel的属性copy到model中，问题是对于函数来说，简单的copy后上下文还是原来定义的上下文，导致函数里面的vm对象还是scope，而不是model，导致属性操作有误。

3、文件中引入了observer.js，实际中并没有用到，里面代码中函数里用了很多this，而foreach会改变函数中this，所以如果foreach的函数参数用到this，一定要把最后的context参数传进去

转载于:https://www.cnblogs.com/luke001/p/4856191.html