JS学习笔记——AngularJS 1.x双向数据绑定机制

Posted 2023-02-25 海鲜小王子

0.前言

AngularJS和vueJS是前端比较热门的两个框架，AngularJS 1.x是我第一个接触的框架，双向绑定是其最大的特点，我们从原生JS的角度看看，这个双向数据绑定是如何实现的。点这里看vueJS的双向绑定原理。

1.简单的双向绑定实现

AngularJS的双向绑定基于脏检测(dirty checking)。所谓的dirty checking就是对比新旧两个值，如果有变化（形象点说，就是这个值脏了），就更新。AngularJS注册了以下几个事件，当这些事件发生后，就会开始”脏检测”。”脏检测”的核心函数是$digest()。

• DOM事件(Click, Keyup)
• XHR响应
• 浏览器Location变化
• Timer事件(setTimeout()和setInterval())
• 手动执行 $digest() 或$apply()

model->view：$scope下的变量出现变化，执行DOM更新。
view->model：监听DOM事件，在事件处理程序中改变$scope下的变量。
下面以AngularJS中的ng-click和ng-bind两个指令为例子，说说如何实现双向绑定。

<div>
    <form>
        <input type="text" ng-bind="count" />
        <button type="button" ng-click="increment" >increment</button>
    </form>
    <div ng-bind="count">
    </div>
</div>

//构造函数
function Scope()
    this.$$watchers = [];//需要绑定的变量列表

Scope.prototype.$watch = function()
	//往$$watchers里面加需要绑定的变量

Scope.prototype.$digest = function()
	//脏检测
	//循环检测$$watchers里的所有数据，对比是否变化：如果没有变化，再循环一次确认是否变化，直到连续两次不变(最多循环10次)；如果发生变化，则更新DOM


window.load = function()
    var $scope = new Scope();

    for(var key in $scope) 
        //把$scope中的变量添加到$$watchers列表中
    

    //处理带有ng-click和ng-bind指令的元素
    //V->M:给这两个元素绑定事件处理程序，在程序中修改model
    //M->V:因为修改了model，然后马上调用$scope.$digest()

由于$digest需要循环检测绑定的变量，因此AngularJS推荐一个页面绑定的view最好不要超过2000个。

【Reference】
1. 双向绑定的简单实现——基于“脏检测” https://zhuanlan.zhihu.com/p/24990192