JS實現簡單的Vue

時間 2020-03-04

標籤實現簡單 vue 欄目 JavaScript 简体版

原文原文鏈接

vue的使用相信你們都很熟練了，使用起來簡單。可是大部分人不知道其內部的原理是怎麼樣的，今天咱們就來一塊兒實現一個簡單的vue。html

Object.defineProperty()前端

實現以前咱們得先看一下Object.defineProperty的實現，由於vue主要是經過數據劫持來實現的，經過get、set來完成數據的讀取和更新。vue

從上面能夠看到經過get獲取數據，經過set監聽到數據變化執行相應操做，仍是不明白的話能夠去看看Object.defineProperty文檔。node

流程圖git

js調用github

Vue結構web

一、Vue constructor 構造函數主要是數據的初始化瀏覽器

二、proxyData 數據代理微信

三、observer 劫持監聽全部數據dom

四、compile 解析dom

五、compileText 解析dom裏處理純雙花括號的操做

六、Watcher 更新視圖操做

Vue constructor 初始化

上面主要是初始化操做，針對傳過來的數據進行處理

proxyData 代理data

上面主要是代理data到最上層，http://this.xxx的方式直接訪問...

observer 劫持監聽

一樣是使用Object.defineProperty來監聽數據，初始化須要訂閱的數據。

把須要訂閱的數據到push到watcherTask裏，等到時候須要更新的時候就能夠批量更新數據了。👇下面就是；

遍歷訂閱池，批量更新視圖。

compile 解析dom

class Vue{

constructor(options = {}){
        ......
    }
    proxyData(key){
        ......
    }
    observer(data){
        ......
    }
    compile(el){
        var nodes = el.childNodes;
        for (let i = 0; i < nodes.length; i++) {
            const node = nodes[i];
            if(node.nodeType === 3){
                var text = node.textContent.trim();
                if (!text) continue;
                this.compileText(node,'textContent')                
            }else if(node.nodeType === 1){
                if(node.childNodes.length > 0){
                    this.compile(node)
                }
                if(node.hasAttribute('v-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')){
                    node.addEventListener('input',(()=>{
                        let attrVal = node.getAttribute('v-model')
                        this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'value'))
                        node.removeAttribute('v-model')
                        return () => {
                            this.data[attrVal] = node.value
                        }
                    })())
                }
                if(node.hasAttribute('v-html')){
                    let attrVal = node.getAttribute('v-html');
                    this.watcherTask[attrVal].push(new Watcher(node,this,attrVal,'innerHTML'))
                    node.removeAttribute('v-html')
                }
                this.compileText(node,'innerHTML')
                if(node.hasAttribute('@click')){
                    let attrVal = node.getAttribute('@click')
                    node.removeAttribute('@click')
                    node.addEventListener('click',e => {
                        this.methods[attrVal] && this.methods[attrVal].bind(this)()
                    })
                }
            }
        }
    },
    compileText(node,type){
        let reg = /{{(.*)}}/g, txt = node.textContent;
        if(reg.test(txt)){
            node.textContent = txt.replace(reg,(matched,value)=>{
                let tpl = this.watcherTask[value] || []
                tpl.push(new Watcher(node,this,value,type))
                return value.split('.').reduce((val, key) => {
                    return this.data[key]; 
                }, this.$el);
            })
        }
    }
}

這裏代碼比較多，咱們拆分看你就會以爲很簡單了

首先咱們先遍歷el元素下面的全部子節點，node.nodeType === 3 的意思是當前元素是文本節點，node.nodeType === 1 的意思是當前元素是元素節點。由於可能有的是純文本的形式，如純雙花括號就是純文本的文本節點，而後經過判斷元素節點是否還存在子節點，若是有的話就遞歸調用compile方法。下面重頭戲來了，咱們拆開看：