雙向綁定的具體應用場景有哪些

一、總結

一句話總結：大部分情況下，只有 UI控件 才存在雙向，非 UI控件一般是單向。

在 UI控件 中(通常是類表單操作)，我會使用雙向的方式綁定數據；而其他場景則統一采用 單向 + inline event ( <component msg="msg" on-update="updateMsg(msg)"></component> ) 的方式構建應用。

UI控件 雙向

 

1、雙向綁定的意義何在？

省dom操作

雙向綁定相對於普通的mvc模式多了view對model的改變，而這部分改變是在特定的場景中可以省掉一些dom操作

因為view對model 的改變是view改變后自動進行的，所以不需要人工dom對model進行改變

 

2、單向數據綁定和雙向數據綁定的優缺點，適合什么場景？

狀態記錄 暗箱操作 出口 入口

代碼量

雙向綁定 優缺點 單向綁定 鏡像

UI

單向綁定的優點是相應的可以帶來單向數據流，這樣做的好處是所有狀態變化都可以被記錄、跟蹤，狀態變化通過手動調用通知，源頭易追溯，沒有“暗箱操作”。同時組件數據只有唯一的入口和出口，使得程序更直觀更容易理解，有利於應用的可維護性。缺點則是代碼量會相應的上升，數據的流轉過程變長，從而出現很多類似的樣板代碼。同時由於對應用狀態獨立管理的嚴格要求(單一的全局store)，在處理局部狀態較多的場景時(如用戶輸入交互較多的“富表單型”應用)，會顯得啰嗦及繁瑣。 
基本上雙向綁定的優缺點就是單向綁定的鏡像了。優點是在表單交互較多的場景下，會簡化大量業務無關的代碼。缺點就是由於都是“暗箱操作”，我們無法追蹤局部狀態的變化(雖然大部分情況下我們並不關心)，潛在的行為太多也增加了出錯時 debug 的難度。同時由於組件數據變化來源入口變得可能不止一個，新手玩家很容易將數據流轉方向弄得紊亂，如果再缺乏一些“管制”手段，最后就很容易因為一處錯誤操作造成應用雪崩。 

這樣來看，單向綁定跟雙向綁定在功能上基本上是互補的，所以我們可以在合適的場景下使用合適的手段。比如在 UI控件 中(通常是類表單操作)，我會使用雙向的方式綁定數據；而其他場景則統一采用 單向 + inline event ( <component msg="msg" on-update="updateMsg(msg)"></component> ) 的方式構建應用。

 

3、雙綁跟單向綁定之間的本質差異是什么？

數據變更 操作 隱藏

封裝 程度 相互裝換

搞清楚雙向綁定的實現原理之后，可以看到雙綁跟單向綁定之間的差異只在於，雙向綁定把數據變更的操作隱藏在框架內部，調用者並不會直接感知。

雙向和單向只不過是框架封裝程度上的差異，本質上兩者是可以相互轉換的。

 

4、雙向綁定多么？

不多

雙向情況不是很多,簡單的交互可以雙向,復雜的交互雙向就折騰死.

單向反而是很普遍的.

 

5、jquery在前端開發中的地位是怎樣的？

輔助

大項目 核心框架 jquery 輔助

小項目 jquery

jq是輔助，如果純用jq的話，你的代碼將非常龐大，而且有幾個模塊就有幾種風格（除非你所有模塊都復制粘貼），建議你非常小的系統就jq，稍微大點的話找個核心框架，jq輔助

 

 

 

 

二、單向數據綁定和雙向數據綁定的優缺點，適合什么場景？（轉）

轉自：單向數據綁定和雙向數據綁定的優缺點，適合什么場景？[好網角文章收藏]
https://www.wang1314.com/doc/topic-20437069-1.html

經常看見在vue或者angular的介紹里說自己的特色是雙向數據綁定，而在看react的介紹中，說自己的優勢和特色是單向數據綁定。 這兩個截然不同的機制，為什么又都能自圓其說呢？在同一個時代里怎么建立統一的理解？還是說兩種機制有各自適合的最佳場景？

 

先描述一下 ng 跟 vue 中使用雙向綁定的場景。

如賀老 @賀師俊 所言，只有 UI控件 才存在雙向，非 UI控件 只有單向。 
但是就 angular1.x 和 vue1.x 而言，賀老漏掉了一個場景，就是在給自定義組件傳遞數據的時候，也有雙向綁定的情況。在 ng 跟 vue 中分別是這樣的： 

                                              // angular1.5+   <   component   counter   =   "parentCounter"   ><   /component>   angular   .   module   (   'xx'   ,   [])   .   component   (   'component'   ,   {   bindings   :   {   counter   :   '='   },   template   :   '<button ng-click="counter = counter + 1">{{counter}}</button>'   })   // vue1.x   <   component   :   counter   .   sync   =   "parentCounter"   ><   /component>   Vue   .   component   (   'component'   ,   {   props   :   [   'counter'   ],   template   :   '<button @click="counter = counter + 1">{{counter}}</button>'   })   

當 component 組件里的 button 被點擊時，counter 的變化會同步給 parentCounter 導致父 scope 的數據被改變。(ps：angular1.5 之后組件語法加入了 '<' 用於單向綁定，vue2 則直接移除了 .sync 語法) 

另外一個就是 UI控件 的場景，對應 ng 里的 ng-model 跟 vue 里的 v-model。 

自定義組件的雙向綁定其實是框架在 compile 時識別到相應的語法，然后給相應的 watcher 添加一個 sync flag 及 父級數據索引，好在下次 digest 時同步更新對應父級數據。 
UI控件 里的實現就更簡單了，其實就是 one-way binding + auto event binding 的語法糖。比如我們可以用單向綁定實現 ng-model 和 v-model 的同等功能： 

                                             // ng-model (ps: ng-input 並不是 ng 內置指令，假設它是一個◇◇ input 事件的指令)
<input type="text" ng-value="msg" ng-input="msg = $event.target.value">


// v-model
<input type="text" v-bind:value="msg" v-on:input="msg = $event.target.value">  

搞清楚雙向綁定的實現原理之后，可以看到雙綁跟單向綁定之間的差異只在於，雙向綁定把數據變更的操作隱藏在框架內部，調用者並不會直接感知。 

單向綁定相應地使得數據流也是單向的，而在踐行單向數據流的 flux 系的實現中，其實不過是在全局搞了一個單例的事件分發器 (dispatcher)，開發者必須顯式地通過這個統一的事件機制做數據變更通知。其實這種方式跟框架對 UI控件 上實現雙向綁定的方式是一樣的。底層都是事件機制。 
試想一下，假設在雙向綁定的應用中，我們有辦法 hack 進框架對 UI控件 自動綁定的事件 listener 或 數據 watcher，然后加上類似 dispatcher 的邏輯，雙向綁定背后的狀態變化我們一樣可以管理起來，一樣可以享用單向數據流才有的收益。對應的，在 react 里同樣可以實現雙向綁定，比如官方的 LinkedStateMixin，只不過它從出生至今就是 deprecated 的。 

再來看 flux 的這張圖 

 

 

如果我們做進一步封裝，把 action 跟 dispatcher 都隱藏在框架內部，最后圖就變成這樣了 

 

 

如果再進一步，把相互手動通知的機制再隱藏起來，變成這樣了 

 

 

這個不就是 mvvm 里面的雙向綁定么(手動尷尬)。。。 

所以在我看來，雙向和單向只不過是框架封裝程度上的差異，本質上兩者是可以相互轉換的。 

回到問題上，單向數據綁定和雙向數據綁定的優缺點，適合什么場景？ 

答： 
單向綁定的優點是相應的可以帶來單向數據流，這樣做的好處是所有狀態變化都可以被記錄、跟蹤，狀態變化通過手動調用通知，源頭易追溯，沒有“暗箱操作”。同時組件數據只有唯一的入口和出口，使得程序更直觀更容易理解，有利於應用的可維護性。缺點則是代碼量會相應的上升，數據的流轉過程變長，從而出現很多類似的樣板代碼。同時由於對應用狀態獨立管理的嚴格要求(單一的全局store)，在處理局部狀態較多的場景時(如用戶輸入交互較多的“富表單型”應用)，會顯得啰嗦及繁瑣。 
基本上雙向綁定的優缺點就是單向綁定的鏡像了。優點是在表單交互較多的場景下，會簡化大量業務無關的代碼。缺點就是由於都是“暗箱操作”，我們無法追蹤局部狀態的變化(雖然大部分情況下我們並不關心)，潛在的行為太多也增加了出錯時 debug 的難度。同時由於組件數據變化來源入口變得可能不止一個，新手玩家很容易將數據流轉方向弄得紊亂，如果再缺乏一些“管制”手段，最后就很容易因為一處錯誤操作造成應用雪崩。 

這樣來看，單向綁定跟雙向綁定在功能上基本上是互補的，所以我們可以在合適的場景下使用合適的手段。比如在 UI控件 中(通常是類表單操作)，我會使用雙向的方式綁定數據；而其他場景則統一采用 單向 + inline event ( <component msg="msg" on-update="updateMsg(msg)"></component> ) 的方式構建應用。

 

三、復雜的表單邏輯

這種表單邏輯，用單向綁定來做就有煩瑣的處理數據的流程，如果用雙向綁定來做，可以省一道處理數據的工序，后面可以試試。

 

上面一個選項框的值發生改變的時候，下面那個選項框的值也發生改變，這樣會讓我省一道數據綁定的工作