84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
最近在看mvvm框架,感觉双向数据绑定这块很是开阔思路,但是这些框架代码模块化都很零碎,看起来很跳跃。。有没有大神研究过能说明白一下,尽量少阐述概念,能说其中一个就行~
光阴似箭催人老,日月如移越少年。
推荐《build your own angularjs》,这儿有讲解脏检测部分的中文翻译
以angular为例,忽略所有的细节,只讲大概的原理
html<p class="{{foo}}" ></p>
html
<p class="{{foo}}" ></p>
angular首先会分析这段代码,在当前的scope下,执行如下代码:
jsscope.watch( //watcher function, 返回模板分析出的获取值表达式 function(scope){ return scope.foo }, //listener function,值表达式对应的渲染UI的函数,此处为伪代码 function(newValue, oldValue, scope){ p.class = newValue } )
js
scope.watch( //watcher function, 返回模板分析出的获取值表达式 function(scope){ return scope.foo }, //listener function,值表达式对应的渲染UI的函数,此处为伪代码 function(newValue, oldValue, scope){ p.class = newValue } )
随后执行scope.$digest(),这个$digest函数检测scope上的所有watcher function返回值是否有变更,若有,则执行对应的listener function,将新的值渲染到UI上去
检测值变更的方式很多,angular用的脏检测性能存在问题,趋势是使用Object.defineProperty设置setter/getter或Object.observe这样更优雅的方式
简单来说下检测数据改变: angular,就是利用脏检查机制,保留两份,一份旧的一份新的,然后做检查;这样就能知道数据是否改变了。 Avalon和vue:都是使用的Object.defineProperty来实现的,然后定义的时候设置set get访问器,每次数据读取设置都需要通过访问器,然后检查是否改变;其中avalon对于不支持Object.defineProperty的采用了VBScript模拟实现。
然后就是和页面上的view中的数据联动了。angular会首先parse页面,然后编译compile,然后link。其中会有指令啊 表达式啊就是在这个过程中实现了联动。而avalon也差不多,只是改叫扫描了,vue也类似。
观察者模式
vue采用的是Object.defineProperty的getter和setter 结合观察者模式(watcher,dep,observer) ng是脏检查
思路就是有一个timer一直在做一边一边的检查每个绑定的对象,如果有变化就触发响应过程。。。。
推荐《build your own angularjs》,这儿有讲解脏检测部分的中文翻译
以angular为例,忽略所有的细节,只讲大概的原理
angular首先会分析这段代码,在当前的scope下,执行如下代码:
随后执行scope.$digest(),这个$digest函数检测scope上的所有watcher function返回值是否有变更,若有,则执行对应的listener function,将新的值渲染到UI上去
检测值变更的方式很多,angular用的脏检测性能存在问题,趋势是使用Object.defineProperty设置setter/getter或Object.observe这样更优雅的方式
简单来说下检测数据改变:
angular,就是利用脏检查机制,保留两份,一份旧的一份新的,然后做检查;这样就能知道数据是否改变了。
Avalon和vue:都是使用的Object.defineProperty来实现的,然后定义的时候设置set get访问器,每次数据读取设置都需要通过访问器,然后检查是否改变;其中avalon对于不支持Object.defineProperty的采用了VBScript模拟实现。
然后就是和页面上的view中的数据联动了。angular会首先parse页面,然后编译compile,然后link。其中会有指令啊 表达式啊就是在这个过程中实现了联动。而avalon也差不多,只是改叫扫描了,vue也类似。
观察者模式
vue采用的是Object.defineProperty的getter和setter 结合观察者模式(watcher,dep,observer)
ng是脏检查
思路就是有一个timer一直在做一边一边的检查每个绑定的对象,如果有变化就触发响应过程。。。。