其基本过程是这样的,每当我们使用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安全卫士将你的电脑卡死的场景,你就明白这样做的结果了。
四. 小结——所谓高手笔者曾经看过这样一段话,觉得深有感触:
所谓高手,是指那些熟知套路且创意无穷的人。而高手之间的较量,归根结底都是基本功的比拼。
愿有朝一日,你也能成为高手。