浅谈Angularjs中不同类型的双向数据绑定(3)

其基本过程是这样的,每当我们使用 ng-model 或 ng-bind 指令将数据模型中的某个变量值和html页面上某个标签的内容联系起来时,Angular就会把这些变量放进一个 WatchCollection 的集合中,并自动帮我们来监控这些变量。每当 WatchCollection 中有变量出现变动时,Angular就会遍历 WatchCollection 来查看是否有其他监控中的变量也被影响,每当有一个变量被影响,Angular都会在遍历后再进行一次遍历,直到某一次遍历后 WatchCollection 中的变量都没有变化,则Angular会认为当前的改动已经稳定了,然后才会将数据模型的变化同步到DOM元素上去,也就实现了数据绑定。

我们可以把 WatchCollection 理解为当前页面的一种抽象,其中包含着页面上所有有可能发生变化的部分。

3.2 双向数据绑定的实践经验

想要在 Angularjs 项目中更加稳定地使用双向数据绑定,笔者的建议是:

在 Angularjs 项目中,尽可能地使用Angular告诉你的方式去编写所希望实现的功能。

我们可以回顾一下上面在使用双向数据绑定发生异常时的场景:

使用了原生的定时器(Angular中你应该使用 $interval , $timeout 服务)

用类原生方法(bind)为元素添加事件监听器,并在回调函数中修改了变量的值(Angular中,你应该使用 ng-click 来实现点击事件的监听)

...

你会发现,每当自己没有按照Angular的方式去编写代码,或者没有按照一个模块设计的初衷去使用它时,就无法确切地得到期望的结果。这是很容易理解的,如果你没有按照Angular要求的方式书写代码,凭什么期望它对你的代码做出100%正确的回应呢?至于上述两种数据绑定中出现问题的解决方案,上文已经有所提及,此处不再赘述。

许多人都听说过 "尽量不要在controller中操作DOM" 这句话,实际上它并不意味着你在controller中操作DOM会导致程序报错,而是在说 如果你同时使用 jQuery 和 Angular 两套系统来管理自己的代码,但又没有按照官方指定的方式来规避它们之间的冲突,那代码很可能会变得不稳定。 想想当年 腾讯电脑管家 和 360安全卫士 将你的电脑卡死的场景,你就明白这样做的结果了。

四. 小结——所谓高手

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/348a3a96ceffaea2862f25bcbd507afd.html