MVVM框架模式

  Vue.JS、AngularJS、ReactJS，它們都是MVVM資料驅動框架系列的一種。   MVVM由微軟提出，它借鑑了桌面應用程式的MVC思想，在前端頁面中，把Model用純JavaScript物件表示，View負責顯示，兩者做到了最大限度的分離。        它採用雙向繫結（data-binding）：View的變動，自動反映在ViewModel，反之亦然。model資料的變動，也自動展示給頁面顯示。     把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的資料同步到View顯示出來，還負責把View的修改同步回Model.    以前只採用jQuery寫出來的程式碼是這樣的：    

        <div id="name" style="color:#fff">汪汪</div>
        <div id="age">1</div>
 

        $('#name').text('喵喵').css('color', '#000000');
        $('#age').text('4').css('color', '#fff');

         採用MVVM之後，可以先不關心DOM結構，而關心資料的展現：     

//原始資料
        var pet = {
            name: '汪汪',
            age: 1,
            tag: 'dog'
        };

     我們把pet變數看做Model資料，把HTML某些DOM節點看作View，並YY它們已經通過某種手段被關聯起來了。      下面我們在修改的時候就可以只修改JavaScript物件，而不用操作DOM節點：

        //改變資料
        var pet = {
            name: '喵喵',
            age: 4,
            tag: 'cat'
        };