大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师【JS-10】深度思考中的知识点——ngularjs双向绑定后，发生了什么事情？是什么可以让view层和Controller层进行绑定的？?
1.背景介绍
介绍双向绑定之前，我们先介绍一下单向绑定。
单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面,但是单向绑定有个缺点，就是如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。
双向绑定：数据模型和视图之间的双向绑定。意思就是当用户在视图上的修改会自动同步到数据中去，同样的，如果数据中的值发生了变化，也会立刻同步到视图中去。
AngularJS模板的工作原理不同。不同之处在于：第一，模板（附加了自定义属性等标记的未经编译的HTML）是由浏览器编译的；
第二，编译最后产生的是一个动态的视图。这里动态指的是视图的任何变化都会直接反应到模型，反之亦然。这使得模型总是应用状态的唯一标识，这大大简化了开发人员的编程工作。你可以简单地认为视图只是模型的投影。
2.知识剖析
angularjs双向绑定后，发生了什么事情？
什么让view层和Controller层进行绑定的？
首先我们要知道angularjs是怎么运行，怎么初始化的。
让我们来看看DOM文档加载的步骤
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。//DOMContentLoaded
5、加载图片等外部文件。
6、页面加载完毕。//load
AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令 寻找你的应用根作用域。如果ng-app指令找到了，那么AngularJS将会：
载入和 指令 内容相关的模块。
创建一个应用的“注入器(injector)”。
已拥有ng-app指令 的标签为根节点来编译其中的DOM。这使得你可以只指定DOM中的一部分作为你的AngularJS应用。
这个时候我们有了一个根作用域$rootscope
让我们回顾一下MVVM
MVVM，虽然它的名称里没有C，但并不表示它就没有Controller。相反，由于MVVM里的Controller和View联系紧密，已经融为一体了。所以，可以把MVVM理解为MVCVM，或者把MVVM里的V理解为VC，即View和Controller。
MVVM里的VM指的是ViewModel，它把MVC中原本属于Controller的业务逻辑部分抽离出来形成了ViewModel。这样，Controller里只剩下和View交互相关的部分，而业务逻辑这种与视图显示、视图交互无关的部分则独立为ViewModel。
所以，Controller和View结合到一起，和ViewModel互相交流，而ViewModel再和Model交流。
现在让我们看看$scope在双向数据绑定中起的左右
在表面上我们已经知道angularjs是怎么进行数据绑定的，接着在改变数据的时候，到底发生了什么使得数据可以双向绑定呢？
答案就是
“脏值检查”
当使用ng-model时，可以使用双向数据绑定
AngularJS使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图）来实现这个功能。
$watch?$apply?是什么鬼东西？
他们是两个angualrjs内置的函数，
$scope.$watch函数,监视一个变量的变化。它指明了”要观察什么”(watchExp)，”在变化时要发生什么”(listener),以及你要监视的是一个变量还是一个对象
$scope中的$$watchers变量保存着我们定义的所有的监视器。如果你在控制台中查看$$watchers，你会发现它是一个对象数组。
当一个控制器/指令/等等东西在AngularJS中运行时，AngularJS内部会运行一个叫做$scope.$apply的函数。
这个$apply函数会接收一个函数作为参数并运行它，在这之后才会在rootScope上运行$digest函数。
$digest函数将会在$rootScope中被$scope.$apply所调用。它将会在$rootScope中运行digest循环，然后向下遍历每一个作用域并在每个作用域上运行循环。在简单的情形中，digest循环将会触发所有位于$$watchers变量中的所有watchExp函数，将它们和最新的值进行对比，如果值不相同，就会触发监听器。
简单的说$watch用来监听，$apply用来循环
上面有说到$digest，它和$apply的不同在于
当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。
MVC的基本概念
MVC模式的意思是，软件可以分成三个部分,angularjs也是基于MVC的概念
视图（View）：用户界面。
控制器（Controller）：业务逻辑。
模型（Model）：数据保存
使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。
3.常见问题
angularjs双向绑定后，发生了什么事情？
怎么让有数据和无数据的情况下，显示的内容不一样？
4.解决方案
当你在使用ng-model时,AngularJS使用$scope.$watch（视图到模型）以及$scope.$apply（模型到视图）来实现这个功能。
angularjs的ng-show和ng-hide都接受一个参数，这个参数是一个表达式，当这个表达式用true的时候执行，这就相当于JS的if和else了，在angular里只需要一行HTML代码就可以执行，非常的简单粗暴
5.编码实战
6.拓展思考
今天我们的标题是什么可以让view层和Controller层进行绑定,可是在刚刚讲的知识剖析里，MVC是model层和view层进行绑定，Controller只是起到一个桥梁的作用。
事实上，这是最传统的MVC结构。在这种结构下，View和Model互相持有，甚至View和Controller以及Controller和Model的关系都是千丝万缕，非常不利于维护。所以，后来的MVC发展出了新的结构。
我们来看看新的关系链:
View向Controller传递交互信息
Controller通知Model改变数据
Model更新数据后通知Controller改变数据
Controller得知数据改变后通知View更新视图
可以看到，演变出来的新MVC去掉了View和Model之间的联系，让View只与Controller交流，而Model也只与Controller交流。而这样的结构也称之为重量级视图控制器结构，除了视图部分和数据部分，其余的都交给Controller
这样可以让View和Model之间的解耦（独立）有利于项目的开发，让负责不同模块的开发人员不用担心自己的改动影响到别人的代码
7.参考文献
参考一：贤心博客
参考五：AngularJS开发指南22：AngularJS中的数据绑定
参考六：深入解析AngularJS框架中$scope的作用与生命周期
参考七：说说视图层架构
8.更多讨论
问：var vm=this中的this指向什么
答：当前作用域$scope
问：如何利用脏检查实现双向数据绑定？
答：$watch监控，$apple循环、替换。
问：angular 的缺点有哪些？
答：双向数据绑定
PPT
视频
如果这篇文章对你有帮助，并且使你对修真院免费在线学习感兴趣，可以通过我的链接注册成员会，这会使我得到学分（兑换学时）延长学习时间：
邀请链接：http://www.jnshu.com/login/1/13374512
