成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Java_oldboy / 2812人閱讀

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

引子

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

100

在有交互時，用js通過其class來取到節(jié)點，然后將數(shù)據(jù)寫進去，如$(".order-total").html(300)。

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

但是當代碼量多了之后，當頁面交互復雜了之后，我們的代碼常常就成了：

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

整個文件中，充斥著這樣或那樣的if，因為沒人能確定這個節(jié)點是否存在。還充斥著另一種東西：

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

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

那么問題來了，為什么會寫出這樣的代碼呢？

因為這種代碼是最符合直覺的書寫方式，一個初級程序員未經(jīng)任何訓練，就能寫出這樣的代碼。它的名字叫：命令式編程。

存在的問題

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

控制反轉(zhuǎn)

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

  
不要來找我，我會去找你。

原來的工作流：

用戶輸入/點擊/Ajax請求

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

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

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

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

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

，即#我會去找你#

用戶輸入/點擊/Ajax請求

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

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

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

小結(jié)

雙向綁定本質(zhì)上是一種IoC的思想，通過讓：

頁面元素聲明自己依賴的model

JS邏輯不依賴具體dom

達到了解耦合的目的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85522.html

相關(guān)文章

  • VUE.js第三課模板語法

    摘要：模板語法使用了基于的模版語法，允許開發(fā)者聲明式地將綁定至底層實例的數(shù)據(jù)。的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進的系統(tǒng)。指令用于在表達式的值改變時，將某些行為應(yīng)用到上。 Vue.js 模板語法 Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。 Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)...

    lx1036 評論0 收藏0

  • 深入剖析 Laravel 服務(wù)容器

    摘要：劃下重點，服務(wù)容器是用于管理類的依賴和執(zhí)行依賴注入的工具。類的實例化及其依賴的注入，完全由服務(wù)容器自動的去完成。 本文首發(fā)于 深入剖析 Laravel 服務(wù)容器，轉(zhuǎn)載請注明出處。喜歡的朋友不要吝嗇你們的贊同，謝謝。 之前在 深度挖掘 Laravel 生命周期 一文中，我們有去探究 Laravel 究竟是如何接收 HTTP 請求，又是如何生成響應(yīng)并最終呈現(xiàn)給用戶的工作原理。 本章將帶領(lǐng)大...

    abson 評論0 收藏0

  • Laravel深入學習2 - 控制反轉(zhuǎn)容器

    摘要：控制反轉(zhuǎn)容器控制反轉(zhuǎn)使依賴注入變得更加便捷。有瑕疵控制反轉(zhuǎn)容器是實現(xiàn)的控制翻轉(zhuǎn)容器的一種替代方案。容器的獨立使用即使沒有使用框架，我們?nèi)匀豢梢栽陧椖恐惺褂冒惭b組件來使用的控制反轉(zhuǎn)容器。在沒有給定任何信息的情況下，容器是無法實例化相關(guān)依賴的。 聲明：本文并非博主原創(chuàng)，而是來自對《Laravel 4 From Apprentice to Artisan》閱讀的翻譯和理解，當然也不是原汁原味...

    worldligang 評論0 收藏0

  • Vue入門--基礎(chǔ)語法

    摘要：在模板中放入太多的邏輯會讓模板過重且難以維護。它會根據(jù)控件類型自動選取正確的方法來更新元素。指令需要使用的語法，指的是原數(shù)據(jù)數(shù)組，指的是迭代的數(shù)組元素。 注：本教程所使用的vue版本為 2.5.16 MVC與MVVM MVC（Model-View-Controller）： M指的是從后臺獲取到的數(shù)據(jù)， V指的是顯示動態(tài)數(shù)據(jù)的html頁面， C是指響應(yīng)用戶操作、經(jīng)過業(yè)務(wù)邏輯處理后去更新...

    haoguo 評論0 收藏0

  • 手把手教你學Vue-1(vue指令)

    摘要：方法用來新增對象的屬性模版指令不是字符串模版渲染，所以需要用來渲染菜鳥教程屬性中的值應(yīng)使用指令縮寫方式。 最近因為要重構(gòu)APP項目，在對比了react和Vue，加上前期已經(jīng)有了react開發(fā)的經(jīng)驗，還是想嘗試一下VUE，更小更便捷的開發(fā)方式。 1.vue 初始化安裝官網(wǎng)提供的NPM方法 $ npm install vue # 全局安裝 vue-cli $ npm install ...

    LucasTwilight 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<