閑來無事看到了一個關于Vue的MVVM的簡單講解，覺得寫得不錯，做個分享，
文章地址
https://github.com/DMQ/mvvm
文章內容我就不貼出，比較簡潔明了，我記錄一下我的一些思考總結，
PS：建議先仔細讀這篇文章，
MVVM
MVVM即雙向資料系結，是一種設計模式，一般是Web前端框架的核心概念，肯定也不是Vue只此一家有，
簡單來說就是，資料跟視圖的實時系結，如果我們自己要實作這個需求，那核心的問題有三個：
1、如何監聽到資料變化？
2、資料變化如何通知到視圖？
3、視圖如何更新？
這三個問題先放著，后面大家就知道我為什么這么劃分這三個問題，
討論文章
實作資料系結的做法有大致如下幾種： 1、發布者-訂閱者模式（backbone.js） 2、臟值檢查（angular.js） 3、資料劫持（vue.js）
那文章中把實作資料系結歸類為這幾種，不過我覺得他的說法有問題，
首先，發布訂閱模式是一種訊息通知的設計模式，它解決的是通知的問題，也就是我上面提到的第2個問題，
然后，無論是臟值檢查還是資料劫持，它解決的是監聽資料變化的問題，也即是上面第1個問題，
也就是說，實作資料系結，做法是 2 或 3 + 1，而不是選擇其中一個就可以的，
另外，這三個方式并沒有視圖更新的部分，不能算是一個完整的資料系結程序，
PS：這一點上大家要明確，
如何監聽到資料變化？
angular.js：臟值檢查，
vue.js：資料劫持，
angular.js我已許久不用，就不多討論，這里談談vue.js，
不得不說，vue.js是做得比較雞賊的，它利用js的語言特性，即Object.defineProperty()方法，做到了監聽資料變化，但也因此它只能兼容IE9以上瀏覽器，
框架所使用的語言特性，直接影響它的兼容性，
資料變化如何通知到視圖？
如果對設計模式比較了解，一看到這個需求，很自然而然地就想起訂閱發布模式，
關于訂閱發布模式，可查看：https://www.cnblogs.com/lovesong/p/5272752.html
視圖如何更新？
在看那文章中，我最感興趣的是這個，有些豁然開朗，
在我看來，視圖更新資料無非是在元素節點的屬性或內容上，那么只需要設定一些特殊的指令作識別，再將相應的資料更新到元素上即可，
這樣這一步需要做兩件事：
1、指令決議器，決議指令，例如指令型別、對應運算式或資料項，
2、訂閱事件，根據資料項生成訂閱者，
做到這兩步，再加上前面所做，就完成了MV的系結，這個程序中，資料的維護方是觀察者，而指令決議器是訂閱者，
可能大家沒有意識到的是，如果要完成VM的系結，那么指令決議器是觀察者，而資料的維護方是訂閱者，例如一個表單的input，指令決議器決議出v-model時，它就需要監聽input的change事件，當數值變化時，它需要通知資料維護方更新資料，
所以，在完整的MVVM中，資料維護方和指令決議器即是觀察者，也是訂閱者，
總結
MVVM，無論細節是如何實作，其關鍵部分就在于訂閱發布這種思想，把握好這個，理解就不難了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165946.html
標籤：JavaScript
上一篇：js物件