從零實現一個簡易的vue框架

雙向綁定是指既可以數據驅動視圖，又可以視圖驅動數據，那么要實現這樣一個功能意味着我們需要將dom節點中與雙向綁定相關的指令與屬性傳入一個類似於“加工工廠”的類中，進行篩選和加工，最后實現一個甄別出關鍵參數和指令並根據指令實現數據雙向綁定的完整“工藝流程”。

vue數據響應式雙向綁定的實現機制，大致如下流程：

 

 

 

實現具體思路如下：我們new出的MVVM類內含有各種屬性，我們就需要實現一個監聽類Observer，內含Object.defineProperty()方法去劫持各個屬性的setter和getter以時刻察覺到MVVM類的變化，然后再將這個變化通知給Dep訂閱器，Dep訂閱器算是一個通知觀察者的通信員和儲存不同觀察着不同屬性的觀察者（每個觀察者只能觀察一個屬性）的容器，同時Dep訂閱器通知觀察者Watcher去更新DOM節點從而實現視圖的更新。流程如下圖紅線：

 

 

 

接下來實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數,添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖，而在初始化視圖時，走的時下圖的紅線流程，當解析器識別到數據變動時，又會走藍線的流程去更新視圖。

 

 

我們將實現該圖流程划分如下：

1. 實現一個指令解析器Compile

2. 實現一個數據監聽器Observer

3. 實現一個觀察者Watcher（來更新視圖）

4. 實現一個proxy代理

 

 

1.實現一個指令解析器Compile

 

Compile對el綁定的根元素的子節點的指令（如v-text，{{}}，v-on等）進行一個掃描和解析，根據指令模板找到對應的掛載節點去替換數據，具體實現的方式就是綁定一個回調更新函數，傳遞給Watcher來更新視圖。此外還要在Compile中獲取一個文檔碎片對象，放入內存中會減少頁面的回流和重繪，文檔碎片對象中對元素對象和文本對象進行處理，並甄別出傳入的text，model等不同指令並針對不同的指令處理不同的事件。

 

 

class Compile{
  constructor(el,vm){
    // 判斷el是否為元素節點，不是則獲取其值
    this.el=this.isElementNode(el) ? el : document.querySelector(el);
    this.vm = vm;
    // 1.獲取文檔碎片對象 放入內存中減少頁面的回流重繪
   const fragment = this.node2Fragment(this.el);
    // console.log(fragment);
    // 2.編譯fragment模板
    this.compile(fragment);
    // 3.追加子元素到根元素
    this.el.appendChild(fragment);
  };

  // 編譯fragment模板的方法
  compile(fragment){
    // 1.獲取到每一個子節點
    const childNodes=fragment.childNodes;
    [...childNodes].forEach(child=>{
      if(this.isElementNode(child)){
        // 是元素節點
        // 編譯元素節點
        this.compileElement(child);
      }else{
        // 文本節點
        // 是否編譯文本節點
        this.compileText(child);
      }

      if(child.childNodes && child.childNodes.length){
        this.compile(child);
      }

    })
  };

  // 編譯元素節點的方法
  compileElement(node){
    const attributes=node.attributes;
    [...attributes].forEach(attr=>{
      const {name,value}=attr;
      if(this.isDirective(name)){ //判斷是否為一個指令
        const [ ,dirctive]=name.split('-');
        // console.log(dirctive);
        const[dirName,eventName] = dirctive.split(':');
        // 更新數據，數據驅動視圖
        compileUtil[dirName](node,value,this.vm,eventName);
        // 刪除有指令的標簽上的屬性
        node.removeAttribute('v-' + dirctive);
      }else if(this.isEventName(name)){
       let[ ,eventName]= name.split('@');
       compileUtil['on'](node,value,this.vm,eventName);
      }
    })
  }

  // 是否編譯文本節點的方法
  compileText(node){
    // 編譯{{}}
    const content =node.textContent;
    // console.log(content);
    if(/\{\{(.+?)\}\}/.test(content)){
      compileUtil['text'](node,content,this.vm)
    }
  }

  isEventName(attrName){
    return attrName.startsWith('@')
  }

  isDirective(attrName){
    return attrName.startsWith('v-')
  }

  // 獲取所有孩子節點
  node2Fragment(el){
    // 1.創建文檔碎片
    const f=document.createDocumentFragment();
    let firstChild;
    // 2.遍歷取出所有節點加入f中
    while(firstChild=el.firstChild){
      f.appendChild(firstChild);
    }
    return f;
  }
  
  // 判斷是否為元素節點的方法
  isElementNode(node){
    return node.nodeType === 1;
  }
}

 

2.實現一個數據監聽器Observer

 我們接下來實現的是一個數據監聽器Observer,能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值通知依賴收集對象(Dep)並通知訂閱者(Watcher)來更新視圖。

 

class Observer{
  constructor(data){
    this.observe(data)
  }

  // 觀察數據的方法
  observe(data){
    if(data && typeof data==='object'){
     //console.log(Object.keys(data)); 
     Object.keys(data).forEach(key=>{
      this.defineReactive(data,key,data[key])
     })
    }
  }

  defineReactive(obj,key,value){
    //遞歸遍歷
    this.observe(value);
    const dep=new Dep();
    // 劫持並監聽所有的屬性
    Object.defineProperty(obj,key,{
      enumerable:true,
      configurable:false,
      get(){
        // 訂閱數據變化時，往Dep中添加觀察者
       Dep.target && dep.addSub(Dep.target)
        return value;
      },
      set:(newVal)=>{
        this.observe(newVal)
        if(newVal!==value){
          value=newVal;
        }
        // 告訴dep通知變化
        dep.notify()
      }
    })
  }
}

 

3. 實現一個Watcher

它作為連接Observer和Compile的橋梁，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖

只要所做事情:

1、在自身實例化時往屬性訂閱器(dep)里面添加自己

2、自身必須有一個update()方法

3、待屬性變動dep.notify()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調。

class Watcher{
  constructor(vm,expr,cb){
    this.vm=vm;
    this.expr=expr;
    this.cb=cb;
    // 先把舊值保存起來
    this.oldVal = this.getOldVal()
  }
  
  getOldVal(){
    Dep.target=this;
   const oldVal= compileUtil.getVal(this.expr,this.vm);
   Dep.target=null;
   return oldVal;
  }

  update(){
  const newVal= compileUtil.getVal(this.expr,this.vm);
  if(newVal!==this.oldVal){
    this.cb(newVal);
  }
  }
}

// 實現一個訂閱器
class Dep{
  constructor(){
    this.subs=[];
  }
  // 收集觀察者
  addSub(watcher){
    this.subs.push(watcher);
  }
  // 通知觀察者去更新
  notify(){
    this.subs.forEach(w=>w.update())
  }
}

4. 實現一個proxy代理

我們在使用vue的時候,通常可以直接vm.msg來獲取數據,這是因為vue源碼內部做了一層代理.也就是說把數據獲取操作vm上的取值操作 都代理到vm.$data上

proxyData(data){
    for(const key in data){
      Object.defineProperty(this,key,{
        get(){
          return data[key];
        },
        set(newVal){
          data[key]=newVal;
        }
      })
    }
  }

致此一個簡易的vue源碼就實現了，我們來測試一下：

 

<script src="./Observer.js"></script>
  <script src="./Myvue.js"></script>
  <script>
    let vm=new Myvue({
      el:'#app',
      data:{
        person:{
          name:"funkyou",
          age:21,
          fav:'ukulele',
        },
        msg:"mvvm自制版",
        htmlStr:'<h3>我是一個前端實習生</h3>'
      },
      methods:{
        handleClick(){
          // console.log(this);
          this.$data.person.name='Chrome'
        }
      },
    })
  </script>

 

對應的頁面如圖：

實現了數據的改變同步到頁面上。

 

在我的GitHub上查看源碼：

https://github.com/173392531/vue-