切圖崽的自我修養－[MVVM] 進一步認知viewModel

前言

上一篇講到了MVC/MVP/MVVM, 但其實一直還對MVVM中的VM部分存在一些理解問題, 敲了一遍vue的demo以後，加深了對VM的理解

例子

如今需求以下，有一個按鈕<button id="#btn">ajax btn<button>，點擊以後，發送ajax請求，並將接收到的結果更新到<p id="msg"></p>中

傳統寫法

<div id='container'>
        <button id='btn'>ajax btn</button>
        <p id='msg'></p>
    </div>
    
    <script>      
    $('#btn').on('click',function(){
        var response = $.ajax(…).data;
        $('#msg').text(response);
    })
    </script>

1. 在#btn上綁定點擊事件

2. 一旦捕獲到點擊事件，向後臺發送一條ajax請求

3. 獲得後臺返回的數據response

4. 操做#msg,將最新的response填進去

VM寫法

<div id='container'>
        <button id='btn' v-on='clickFun()'>ajax btn</button>
        <p id='msg'>{{ response }}</p>
    </div>
    
    <script>
        new Vue({
          el: '#container',
          data: {
            response:'',
          },
          methods:{
            clickFun:function(){
             var response = $.ajax(…).data;
             this.response = response;
            }
          }
        })
    </script>

1. 聲明一個vm(viewModel)做用域

2. (vue將dom的視圖和你定義的data進行一個數據綁定)

3. 將#btn經過指令綁定一個點擊事件

4. 一旦捕獲到點擊事件，向後臺發送ajax請求

5. 獲得後臺返回的數據response

6. 更新data

7. (vue監聽到data的變化，因而更新對應的視圖)

對比傳統的操做dom的方式和vm的方式，很容易看出來，vm只作了一件事情就是
將視圖和數據綁定起來,免去了獲取視圖數據和根據新數據更新視圖的繁瑣操做，這樣能使你更專一你的業務邏輯,而不用爲了如何進行dom操做傷腦筋

• 之前咱們要獲取視圖的源數據，採用的是$dom.val()/$dom.text()等操縱dom節點的方式. 可是有了vm, 咱們獲取視圖數據的時候不用再去操縱dom節點了,而是經過v-model等指令直接獲取視圖上的數據 (感謝Vue的封裝)

• 之前咱們根據新數據更新視圖的時候，採用的是$dom.text()/$dom.html()等操縱dom節點的方式，可是有了vm, 咱們根據新數據更新視圖的時候不用再去操縱dom節點了,由於咱們只要更改data的值，視圖就會自動被更新 (感謝Vue的封裝)

---

結語

以上是切圖崽對viewModel的一些粗淺的認知，若是對viewModel特別是狀態管理/數據綁定相關技術感興趣的同窗，請移步React/Angular2/Vue