傻瓜都能看懂的雙向綁定原理

傻瓜都能看懂的雙向綁定原理

想要理解這些概念最好是本身動手擼一個出來(感謝方方老師) 因此咱們先要從最開始的意大利麪條式的代碼一步一步過渡到MVC在到Vue 需求能夠書籍的數量和名字進行計算和綁定

第一階段:意大利麪條式代碼

https://github.com/Xia121/MVVM/tree/master/First

1.這種代碼適用於2008年前那個jq統治天下的時間

換句或說 若是你還在寫這種代碼 這說明你 out 了

2.下一步咱們將會對這種老代碼進行MVC封裝

第二階段:MVC式代碼

1.首先咱們應該搞清楚什麼是MVC或者說MVC表明了什麼

2.咱們先從MVC模式這個概念的歷史開始，MVC模式最先是起於smalltalk語言（據我瞭解）

後來漸漸被後臺語言所應用與構建後臺語言的架構好比ThinkPHP，SpringMVC，等等 爲何會出現MVC模式呢

是由於一開始的意大利麪條式代碼乍看起來沒有問題，可是一旦時間久了以後，這種代碼想要維護和更新就像是在屎堆裏面查找一快特定形狀的屎，對開發人員的三觀和頭髮是一種極大的挑戰（亞馬遜開發人員也有類似言論）

因此一些聰明的工程師在想爲何咱們不把這些類似的代碼套路總結一下造成業內的潛規則呢，因而各類設計模式就這樣出現了今天咱們就從MVC開始提及（因此說前端的MVC模式就是從後臺語言借鑑的）。
3. 下面 咱們介紹一下MVC究竟是表明了什麼
M(Model)專門負責數據（好比前端從api接口獲取到了數據）
V(View)專門負責表現（好比把梳理過的數據添加到HTML上）
C(Controller)負責其餘邏輯（好比處理數據）
若是咱們來反思一下，會發現這個分類是無懈可擊的：
每一個網頁都有數據 每一個網頁都有表現（具體爲 HTML） 每一個網頁都有其餘邏輯 因而乎，MVC 成了經久不衰的設計模式
4. 如今咱們改進一下列子讓她MVC起來 哈哈哈

github.com/Xia121/MVVM…

this[event.fnName].bind(this)
//做用是傳遞this 肯定this是let controller
複製代碼

第三階段:面向對象(模板代碼)把重複的代碼寫到一個類

1.爲何要用類或者也能夠換成原型那是由於若是有n個頁面須要按照上面那個代碼其實要重複n次

若是寫成類那麼new一下就能夠啦

github.com/Xia121/MVVM…

第四階段:實現簡單的觀察者模式

1.這個問題解決「手動」調用 this.view.render(this.model.data),而出現的因此我改爲 這個的方法說白了就是在跟節點上綁定一個change事件當數據出來時通知change事件自動進行更改 這樣就不用手工調用了

github.com/Xia121/MVVM…

第五階段:雙向綁定和虛擬DOM的初步思想

1.在咱們寫的例子中你會發現DOM更新其實就是直接.html() 這樣特別粗暴的進行

2.若是咱們的例子裏面有input並對根據input裏面的數值進行計算的話 .html()這樣就會把input

裏面的數值覆蓋掉除非咱們把數字記錄到JS的data中進行儲存(雙向綁定初步思想)就這樣出來了
3. 而虛擬DOM則是換了一種思想那就是我只改變有關於數字的部分DOM，先生成即將改變的DOM對象而後替換掉文檔中的DOM(這樣就是虛擬DOM的初步思想)

4.Angular 就是基於雙向綁定而發明的，而 React 則是基於虛擬DOM思想。

5.如今咱們用Vue來替代代碼中的View

github.com/Xia121/MVVM…

Vue 的雙向綁定（也是 Angular 的雙向綁定）有這些功能：

• 只要 JS 改變了 view.number 或 view.name 或 view.n （注意 Vue 把 data 裏面的 number、name 和 n 放到了 view 上面，沒有 view.data 這個東西）， HTML 就會局部更新
• 2.只要用戶在 input 裏輸入了值，JS 裏的 view.n 就會更新。

這就像雙向綁定：JS 數據與頁面元素互相綁定。

第六階段:用vue完全替換掉MVC

由於Vue有不少功能 他的核心功能是雙向綁定和虛擬DOM可是當他實現的View的數據綁定以後以爲爲何我不把Controller 和 model 的功能一塊兒替換掉呢 因而咱們有了如今的 Vue 哈哈哈

github.com/Xia121/MVVM…

固然Vue確定不是這麼簡單的裏面有不少的技術點在裏面 這僅僅是一個入門歸納詳細的我會再進行研究併發布的 請你們給我點個贊啊啊啊！！！