控制反轉(zhuǎn)與雙向綁定

Java_oldboy 發(fā)布于2019-08-21 10:26 / 2767人閱讀

摘要：引子在前端開(kāi)發(fā)中，常常有這樣的的代碼，先是在中定義了頁(yè)面結(jié)構(gòu)在有交互時(shí)，用通過(guò)其來(lái)取到節(jié)點(diǎn)，然后將數(shù)據(jù)寫(xiě)進(jìn)去，如。小結(jié)雙向綁定本質(zhì)上是一種的思想，通過(guò)讓頁(yè)面元素聲明自己依賴(lài)的邏輯不依賴(lài)具體達(dá)到了解耦合的目的。

引子

在前端開(kāi)發(fā)中，常常有這樣的naive的代碼，先是在HTML中定義了頁(yè)面結(jié)構(gòu)：

在有交互時(shí)，用js通過(guò)其class來(lái)取到節(jié)點(diǎn)，然后將數(shù)據(jù)寫(xiě)進(jìn)去，如$(".order-total").html(300)。

大約在三年前，這種做法在業(yè)界還頗為流行，幾乎所有的書(shū)里，網(wǎng)上教義，都在鼓吹這種分離JS和HTML的行為，認(rèn)為這么做就是天經(jīng)地義。

但是當(dāng)代碼量多了之后，當(dāng)頁(yè)面交互復(fù)雜了之后，我們的代碼常常就成了：

if (exist($(".selector"))) {
   // do something
}

整個(gè)文件中，充斥著這樣或那樣的if，因?yàn)闆](méi)人能確定這個(gè)節(jié)點(diǎn)是否存在。還充斥著另一種東西：

/* note: 這不是標(biāo)準(zhǔn)的jquery代碼 */
var quantity = $(this).parent().parent().find(".quantity-value");

這種連扔垃圾桶都不配的代碼真是寫(xiě)的時(shí)候爽，后面維護(hù)者遭殃的典型范例，你必須不斷地切換js/html來(lái)審視其強(qiáng)依賴(lài)的結(jié)構(gòu)。

那么問(wèn)題來(lái)了，為什么會(huì)寫(xiě)出這樣的代碼呢？

因?yàn)檫@種代碼是最符合直覺(jué)的書(shū)寫(xiě)方式，一個(gè)初級(jí)程序員未經(jīng)任何訓(xùn)練，就能寫(xiě)出這樣的代碼。它的名字叫：命令式編程。

存在的問(wèn)題

命令式編程存在的問(wèn)題就是，寫(xiě)的人在寫(xiě)的時(shí)候知道是怎么回事，試圖掌控一切，后果是:
- 不知道代碼中的一系例選擇器對(duì)應(yīng)著什么節(jié)點(diǎn)
- 可維護(hù)性差，你不敢輕易改動(dòng)類(lèi)名或刪除節(jié)點(diǎn)，也不清楚節(jié)點(diǎn)的內(nèi)容究竟對(duì)應(yīng)著什么數(shù)據(jù)
- 代碼量多

控制反轉(zhuǎn)

上面說(shuō)道，命令式編程試圖控制一切，而解決的辦法就是，交出控制權(quán)，將控制權(quán)反轉(zhuǎn)，即：

  不要來(lái)找我，我會(huì)去找你。

原來(lái)的工作流：

用戶(hù)輸入/點(diǎn)擊/Ajax請(qǐng)求

數(shù)據(jù)變化 => order = 100

取節(jié)點(diǎn)，將內(nèi)容設(shè)到頁(yè)面 => $(".order-div").html(order) #JS主動(dòng)來(lái)找DOM#

如果頁(yè)面已經(jīng)不需要這個(gè)信息了,將.order-div從html中刪掉，重復(fù)上面的流程，執(zhí)行到第三步時(shí)，JS將拋出異常，因?yàn)楣?jié)點(diǎn)找不到。

控制反轉(zhuǎn)的工作流：

元素監(jiān)聽(tīng)數(shù)據(jù)變化

，即#我會(huì)去找你#

用戶(hù)輸入/點(diǎn)擊/Ajax請(qǐng)求

數(shù)據(jù)變化 => order = 100

元素的innerHTML將被自動(dòng)設(shè)上100

如果頁(yè)面已經(jīng)不需要這個(gè)信息了,將.order-div從html中刪掉，重復(fù)上面的流程，對(duì)程序沒(méi)有任何影響，因?yàn)槭枪?jié)點(diǎn)自己去取數(shù)據(jù)，而不是JS主動(dòng)去取節(jié)點(diǎn)，而這種方式就做：聲明式編程。

小結(jié)

雙向綁定本質(zhì)上是一種IoC的思想，通過(guò)讓?zhuān)?/p>

頁(yè)面元素聲明自己依賴(lài)的model

JS邏輯不依賴(lài)具體dom

達(dá)到了解耦合的目的。