mvvm的概念、原理及實現

代碼實現來源於珠峰公開課 mvvm 原理的講解。此文在此記錄一下，通過手寫幾遍代碼加深一下自己對 mvvm 理解。

1、MVVM的概念

  model-view-viewModel，通過數據劫持+發布訂閱模式來實現。

  mvvm是一種設計思想。Model代表數據模型，可以在model中定義數據修改和操作的業務邏輯;view表示ui組件，負責將數據模型轉換為ui展現出來，它做的是數據綁定的聲明、 指令的聲明、 事件綁定的聲明。;而viewModel是一個同步view和model的對象。在mvvm框架中，view和model之間沒有直接的關系，它們是通過viewModel來進行交互的。mvvm不需要手動操作dom，只需要關注業務邏輯就可以了。   

mvvm和mvc的區別在於：mvvm是數據驅動的，而MVC是dom驅動的。mvvm的優點在於不用操作大量的dom，不需要關注model和view之間的關系，而MVC需要在model發生改變時，需要手動的去更新view。大量操作dom使頁面渲染性能降低，使加載速度變慢，影響用戶體驗。

2、mvvm的優點

• 1、低耦合性  view 和 model 之間沒有直接的關系，通過 viewModel 來完成數據雙向綁定。
• 2、可復用性 組件是可以復用的。可以把一些數據邏輯放到一個 viewModel 中，讓很多 view 來重用。
• 3、獨立開發 開發人員專注於 viewModel ，設計人員專注於view。
• 4、可測試性  ViewModel 的存在可以幫助開發者更好地編寫測試代碼。

3、mvvm的缺點

• 1、bug很難被調試，因為數據雙向綁定，所以問題可能在 view 中，也可能在 model 中，要定位原始bug的位置比較難，同時view里面的代碼沒法調試，也添加了bug定位的難度。
• 2、一個大的模塊中的 model 可能會很大，長期保存在內存中會影響性能。
• 3、對於大型的圖形應用程序，視圖狀態越多， viewModel 的構建和維護的成本都會比較高。

4、mvvm的雙向綁定原理

   mvvm 的核心是數據劫持、數據代理、數據編譯和"發布訂閱模式"。

1、數據劫持——就是給對象屬性添加get,set鈎子函數。

• 1、觀察對象，給對象增加 Object.defineProperty 
• 2、vue的特點就是新增不存在的屬性不會給該屬性添加 get 、 set 鈎子函數。
• 3、深度響應。循環遞歸遍歷 data 的屬性，給屬性添加 get ， set 鈎子函數。
• 4、每次賦予一個新對象時（即調用 set 鈎子函數時），會給這個新對象進行數據劫持( defineProperty )。

//通過set、get鈎子函數進行數據劫持
function defineReactive(data){
    Object.keys(data).forEach(key=>{
        const dep=new Dep();
        let val=data[key];
        this.observe(val);//深層次的監聽
        Object.defineProperty(data,key,{
            get(){
                //添加訂閱者watcher（為每一個數據屬性添加訂閱者，以便實時監聽數據屬性的變化——訂閱）
                Dep.target&&dep.addSub(Dep.target);
                //返回初始值
                return val;
            },set(newVal){
                if(val!==newVal){
                    val=newVal;
                    //通知訂閱者，數據變化了（發布）
                    dep.notify();
                    return newVal;
                }
            }
        })
    })
}

2、數據代理

  將 data , methods , compted 上的數據掛載到vm實例上。讓我們不用每次獲取數據時，都通過 mvvm._data.a.b 這種方式，而可以直接通過 mvvm.b.a 來獲取。

class MVVM{
    constructor(options){
        this.$options=options;
        this.$data=options.data;
        this.$el=options.el;
        this.$computed=options.computed;
        this.$methods=options.methods;
        //劫持數據，監聽數據的變化
        new Observer(this.$data);
        //將數據掛載到vm實例上
        this._proxy(this.$data);
        //將方法也掛載到vm上
        this._proxy(this.$methods);
        //將數據屬性掛載到vm實例上
        Object.keys(this.$computed).forEach(key=>{
            Object.defineProperty(this,key,{
                get(){
                    return this.$computed[key].call(this);//將vm傳入computed中
                }
            })
        })
        //編譯數據
        new Compile(this.$el,this)
    };
    //私有方法，用於數據劫持
    _proxy(data){
        Object.keys(data).forEach(key=>{
            Object.defineProperty(this,key,{
                get(){
                    return data[key]
                }
            })
        })
        
    }
}    

3、數據編譯

  把 {{}} , v-model , v-html , v-on ,里面的對應的變量用data里面的數據進行替換。

 class Compile{
    constructor(el,vm){
        this.el=this.isElementNode(el)?el:document.querySelector(el);
        this.vm=vm;
        let fragment=this.nodeToFragment(this.el);
        //編譯節點
        this.compile(fragment);
        //將編譯后的代碼添加到頁面
        this.el.appendChild(fragment);
    };
    //核心編譯方法
    compile(node){
        const childNodes=node.childNodes;
        [...childNodes].forEach(child=>{
            if(this.isElementNode(child)){
                this.compileElementNode(child);
                //如果是元素節點就還得遞歸編譯
                this.compile(child);
            }else{
                this.compileTextNode(child);
            }
        }) 

    };
    //編譯元素節點
    compileElementNode(node){
        const attrs=node.attributes;
        [...attrs].forEach(attr=>{
            //attr是一個對象
            let {name,value:expr}=attr;
            if(this.isDirective(name)){
                //只考慮到v-html和v-model的情況
                let [,directive]=name.split("-");
                //考慮v-on:click的情況
                let [directiveName,eventName]=directive.split(":");
                //調用不同的指令來進行編譯
                CompileUtil[directiveName](node,this.vm,expr,eventName);
            }
        })
    };
    //編譯文本節點
    compileTextNode(node){
        const textContent=node.textContent;
        if(/\{\{(.+?)\}\}/.test(textContent)){
            CompileUtil["text"](node,this.vm,textContent)
        }
    };
    //將元素節點轉化為文檔碎片
    nodeToFragment(node){
         //將元素節點緩存起來，統一編譯完后再拿出來進行替換
         let fragment=document.createDocumentFragment();
         let firstChild;
         while(firstChild=node.firstChild){
             fragment.appendChild(firstChild);
         }
         return fragment;
    };
    //判斷是否是元素節點
    isElementNode(node){
        return node.nodeType===1;
    };
    //判斷是否是指令
    isDirective(attr){
        return attr.includes("v-");
    }
}
//存放編譯方法的對象
CompileUtil={
    //根據data中的屬性獲取值,觸發觀察者的get鈎子
    getVal(vm,expr){
        const data= expr.split(".").reduce((initData,curProp)=>{
            //會觸發觀察者的get鈎子
            return initData[curProp];
        },vm)
        return data;
    },
    //觸發觀察者的set鈎子
    setVal(vm,expr,value){
        expr.split(".").reduce((initData,curProp,index,arr)=>{
            if(index===arr.length-1){
                initData[curProp]=value;
                return;
            }
            return initData[curProp];
        },vm)
    },
    getContentValue(vm,expr){
        const data= expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
            return this.getVal(vm,args[1]);
        });
        return data;
    },
    model(node,vm,expr){ 
        const value=this.getVal(vm,expr);
        const fn=this.updater["modelUpdater"];   
        fn(node,value);
        //監聽input的輸入事件，實現數據響應式
        node.addEventListener('input',e=>{
            const value=e.target.value;
            this.setVal(vm,expr,value);
        })
        //觀察數據（expr）的變化，並將watcher添加到訂閱者隊列中
        new Watcher(vm,expr,newVal=>{
            fn(node,newVal);
        });
    },
    text(node,vm,expr){
        const fn=this.updater["textUpdater"];
        //將{{person.name}}中的person.james替換成james
        const content=expr.replace(/\{\{(.+?)\}\}/g,(...args)=>{
            //觀察數據的變化
            new Watcher(vm,args[1],()=>{
                // this.getContentValue(vm,expr)獲取textContent被編譯后的值
                fn(node,this.getContentValue(vm,expr))

            })
            return this.getVal(vm,args[1]);
        })
        fn(node,content);
    },
    html(node,vm,expr){
        const value=this.getVal(vm,expr);
        const fn=this.updater["htmlUpdater"];
        fn(node,value);
        new Watcher(vm,expr,newVal=>{
            //數據改變后，再次替換數據
            fn(node,newVal);
        })
    },
    on(node,vm,expr,eventName){
        node.addEventListener(eventName,e=>{
            //調用call將vm實例(this)傳到方法中去
            vm[expr].call(vm,e);
        })
    },
    updater:{
        modelUpdater(node,value){
            node.value=value
        },
        htmlUpdater(node,value){
            node.innerHTML=value;
        },
        textUpdater(node,value){
            
            node.textContent=value;
        }
    }
}

4、發布訂閱

  發布訂閱主要靠的是數組關系，訂閱就是放入函數（就是將訂閱者添加到訂閱隊列中），發布就是讓數組里的函數執行（在數據發生改變的時候，通知訂閱者執行相應的操作）。消息的發布和訂閱是在觀察者的數據綁定中進行數據的——在get鈎子函數被調用時進行數據的訂閱(在數據編譯時通過  new Watcher() 來對數據進行訂閱)，在set鈎子函數被調用時進行數據的發布。

//消息管理者(發布者)，在數據發生變化時，通知訂閱者執行相應的操作
class Dep{
    constructor(){
        this.subs=[];
    };
    //訂閱
    addSub(watcher){
        this.subs.push(watcher);
    };
    //發布
    notify(){
        this.subs.forEach(watcher=>watcher.update());
    }
}
//訂閱者，主要是觀察數據的變化
class Watcher{
    constructor(vm,expr,cb){
        this.vm=vm;
        this.expr=expr;
        this.cb=cb;
        this.oldValue=this.get();
    };
    get(){
        Dep.target=this;
        const value=CompileUtil.getVal(this.vm,this.expr);
        Dep.target=null;
        return value;
    };
    update(){
        const newVal=CompileUtil.getVal(this.vm,this.expr);
        if(this.oldValue!==newVal){
            this.cb(newVal);
        }
    }
}
//觀察者
class Observer{
    constructor(data){
        this.observe(data);
    };
    //使數據可響應
    observe(data){
        if(data&&typeof data==="object"){
            this.defineReactive(data)
        }
    };
    defineReactive(data){
        Object.keys(data).forEach(key=>{
            const dep=new Dep();
            let val=data[key];
            this.observe(val);//深層次的監聽
            Object.defineProperty(data,key,{
                get(){
                    //添加訂閱者watcher（為每一個數據屬性添加訂閱者，以便實時監聽數據屬性的變化——訂閱）
                    Dep.target&&dep.addSub(Dep.target);
                    //返回初始值
                    return val;
                },set(newVal){
                    if(val!==newVal){
                        val=newVal;
                        //通知訂閱者，數據變化了（發布）
                        dep.notify();
                        return newVal;
                    }
                }
            })
        })
    }
}

作者：慕斯不想說話
鏈接： https://juejin.cn/post/6844904030905303053
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。