引子
在前端开辟中,经常有如许的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
到达相识耦合的目标。