引子
在前端开辟中，经常有如许的naive的代码，先是在HTML中定义了页面构造：
<div class="order-total">100</div>
在有交互时，用js经由过程其class来取到节点，然后将数据写进去，如$('.order-total').html(300)。
约莫在三年前，这类做法在业界还很是盛行，险些统统的书里，网上教义，都在宣扬这类星散JS和HTML的行动，以为这么做就是理所当然。
然则当代码量多了以后，当页面交互庞杂了以后，我们的代码经常就成了：
if (exist($('.selector'))) {
// do something
}
全部文件中，充溢着如许或那样的if，由于没人能肯定这个节点是不是存在。还充溢着另一种东西：
/* note: 这不是规范的jquery代码 */
var quantity = $(this).parent().parent().find('.quantity-value');
这类连扔垃圾桶都不配的代码真是写的时刻爽，背面维护者遭殃的典范类型，你必需不断地切换js/html来审视其强依靠的构造。
那末题目来了，为何会写出如许的代码呢？
由于这类代码是最相符直觉的誊写体式格局，一个低级顺序员未经任何练习，就可以写出如许的代码。它的名字叫：敕令式编程。
存在的题目
敕令式编程存在的题目就是，写的人在写的时刻晓得是怎么回事，试图掌控统统，效果是:
– 不晓得代码中的一系例选择器对应着什么节点
– 可维护性差，你不敢随意马虎修改类名或删除节点，也不清楚节点的内容终究对应着什么数据
– 代码量多
掌握反转
上面说道，敕令式编程试图掌握统统，而处理的方法就是，交出掌握权，将掌握权反转，即：
不要来找我，我会去找你。
本来的工作流：
- 用户输入/点击/Ajax要求
- 数据变化 =>
order = 100 - 取节点，将内容设到页面 =>
$('.order-div').html(order)#JS主动来找DOM#
假如页面已不需要这个信息了,将.order-div从html中删掉，反复上面的流程，实行到第三步时，JS将抛出非常，由于节点找不到。
掌握反转的工作流：
- 元素监听数据变化
<div class='order-dv' ng-bind='order'></div>，即#我会去找你# - 用户输入/点击/Ajax要求
- 数据变化 =>
order = 100 - 元素的
innerHTML将被自动设上100
假如页面已不需要这个信息了,将.order-div从html中删掉，反复上面的流程，对顺序没有任何影响，由于是节点本身去取数据，而不是JS主动去取节点，而这类体式格局就做：声明式编程。
小结
双向绑定本质上是一种IoC的头脑，经由过程让：
- 页面元素声明本身依靠的model
- JS逻辑不依靠详细dom
到达相识耦合的目标。
