Angularjs 中数据双向绑定是怎么实现的? 原理是什么?

2015-01-20 14:54:12 +08:00
 rubyking
Angularjs中是数据双向绑定非常强大,于是就想知道他是怎么实现的(原理),哪位男神知道告知一二,小弟在此感谢,最好给个例子~
12897 次点击
所在节点    程序员
16 条回复
yakczh
2015-01-20 14:57:57 +08:00
我也想知道
tomwan
2015-01-20 15:04:42 +08:00
最简单的说法,50ms为一个心跳,去判断一个controller里所有对象的变化,如果有变化,那么更新相关的元素
rubyking
2015-01-20 15:06:25 +08:00
@tomwan 男神能举个例子吗?
lingyired
2015-01-20 15:16:19 +08:00
lujiajing1126
2015-01-20 15:18:58 +08:00
之前用artTemplate的时候,直接替换整个html会闪一下,所以自己搞了个数据绑定
主要思路我觉得就是在dom的属性上绑一些model的字段,如果model有变化,就去改变相应的model(整个很好做),然后更新dom。。
比如说
<div>{{person.name}}</div>
会被渲染成
<div data-binding="person.name">{{person.name}}</div>
那么如果person.name变化了,自然能够通过data-binding整个属性去改变div的值
反向的话,如果model更新,我觉得应该是事件触发的,比如说自带就有change,blur这些
我觉得关键是需要non-logic的模板引擎,否则在模板里加了逻辑。。整个就跪了,因为另一个逻辑分支的内容不会被渲染到dom里面,从而你如果model更新换了逻辑分支的话那就没办法了
{{if a}}
<div>{{person.name}}</div>
{{else}}
<div>{{person.age}}</div>
那么条件a变了,你也没法从age切到name
shibo501c
2015-01-20 15:48:41 +08:00
解释的话,网上能搜到很多,要想自己实现一下的话,这里有本书可以看,作者给的免费版本可以实现scope的逻辑,还是挺好的
http://teropa.info/build-your-own-angular
rannnn
2015-01-20 15:53:47 +08:00
scope变量是getter和setter 更新会在内部保留旧值

然后绑定了keydown之类event 会触发$digest 遍历相关scope变量 触发$watch中的回调

$digest会重复运行直到变量不再改变
rannnn
2015-01-20 15:56:57 +08:00
不过angular hard code 了$digest连续运行10次就会直接exception
datou552211
2015-01-20 17:02:39 +08:00
脏值检测
rubyking
2015-01-20 18:10:06 +08:00
rubyking
2015-01-20 18:12:48 +08:00
@lujiajing1126 具体的解决办法呢
rubyking
2015-01-20 18:15:08 +08:00
@rannnn 要是不是通过触发keydown之类event事件实现的呢? 比如某一个attribute属性发生了改变
rubyking
2015-01-20 18:15:47 +08:00
@datou552211 @rannnn 需要自己实现一个
rannnn
2015-01-20 18:40:42 +08:00
@rubyking
angular会 parse attribute里的 express 比如attr="var1 + var2"
就会watch var1和var2这两个scope variable,当运行$digest的时候检测到这两个变量变化了就会重新计算这个expression然后再触发相应的callback

自己实现略麻烦,首先你还得写个parser(其实也不是很麻烦用esprima就好了)
lujiajing1126
2015-01-20 18:46:14 +08:00
@rubyking 我只是自己随便想的,满足自己的webapp的需求而已
要做到很好的话还是参考angular的做法
有一本书叫做build your own angular
kimmykuang
2015-01-20 23:19:45 +08:00
angularjs的数据更新是基于dirty check的,至于什么时候去做check,你需要去看下一个叫$digest的东西,比如$scope里的东西变化了就会开始$digest,所以说“angularjs的数据双向绑定是依靠$scope实现的”也应该不是错误的。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/163842

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX