摘要：目標(biāo)你好上面是最常見的的用法現(xiàn)在我就只實現(xiàn)一件事改變執(zhí)行這一句時頁面會及時更新開始動工第一步先聲明一個類我們一開始定義的屬性是定義在中的我們想要這樣賦值的時候和的相關(guān)聯(lián)需要中間做一個代理修改代碼執(zhí)行函數(shù)實現(xiàn)代理觀察的屬性要想實現(xiàn)這樣賦值的時

html


    
{{ someStr }}


js

let myMvvm = new Mvvm({
    el: document.getElementById("app"),
    data: {
        someStr: "你好"
    }
})

上面是最常見的vue的用法, 現(xiàn)在我就只實現(xiàn)一件事

myMvvm.someStr = "改變"   // 執(zhí)行這一句時, 頁面會及時更新

1、 第一步, 先聲明一個Mvvm類

class Mvvm {
    constructor (option) {
        this.$option = option || {}
    }
}

我們一開始定義的 someStr屬性是定義在option.data中的, 我們想要 myMvvm.someStr這樣賦值的時候和option的data相關(guān)聯(lián), 需要中間做一個代理,修改代碼

class Mvvm {
    constructor (option) {
        this.$option = option || {}
        this._proxyData(option.data, this) // 執(zhí)行函數(shù)實現(xiàn)代理
    }
    _proxyData (obj, context) { 
        Object.keys(obj).forEach(key => {
            Object.defineProperty(context, key, {
                configurable: false,
                enumerable: true,
                get () {
                    return obj[key]
                },
                set (val) {
                    obj[key] = val
                }
            })
        })
    }
}

2、觀察option的data屬性
要想實現(xiàn) myMvvm.someStr = 1 這樣賦值的時候,頁面能及時更新,那么我們就要對someStr的賦值過程做一個監(jiān)聽才行, 開心的是 , Object.defineProperty可以輕易做到這點
寫一個observe類

class Observe {
    constructor (obj) {
        Object.keys(obj).forEach(key => {
            this.defineReactive(obj, key, obj[key])
        })
    }
    defineReactive (obj, key, val) {
        let initVal = val
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: false,
            get () {
                return initVal
            },
            set (val) { // 每一次的復(fù)制我們都可以在這里獲知,自然可以為所欲為了
                initVal = val
                return initVal
            }
        })
    }
}
然后修改一下Mvvm這個類的constructor
constructor (option) {
    this.$option = option || {}
    this._proxyData(option.data, this)
    new Observe(option.data)
}

3、實現(xiàn)元素的實時更新
現(xiàn)在為止， 還只是顯示 一個 {{someStr}} 而已, 我們現(xiàn)在需要做的是讓能變成 你好 這個值
寫一個Compile類

{{someStr}}是一個文本節(jié)點,先聲明一個可以渲染文本節(jié)點的函數(shù)

let compileText = function (node, vm, str) {
    let val = vm[str]
    if (val) {
        node.nodeValue = val 
    }
}

class Compile {
    constructor(el, vm) { // el 是 #app這個元素  vm是Mvvm這個實例
        let frag = this.node2Fragment(el)
        this.vm = vm
        this.compileElement(frag) // 讀取子節(jié)點進(jìn)行渲染
        el.appendChild(frag)
    }
    node2Fragment(el) { // 創(chuàng)建一個文檔片段把#app元素的子節(jié)點拷貝
        let frag = document.createDocumentFragment()
        let child
        while (child = el.firstChild) {
            frag.appendChild(child)
        }
        return frag
    }
    compileElement(el) { // 渲染節(jié)點
        let childNodes = el.childNodes;
        [].forEach.call(childNodes, (node) => { // 遍歷所有的子節(jié)點
            if (this.isElementNode(node)) { // 如果是元素節(jié)點, 重復(fù)便利
                this.compileElement(node)
            } else if (this.isTextNode(node)) { // 如果是文本節(jié)點
                let matchStr = this.isMustache(node.nodeValue) // 判斷這個文本值是不是 {{}} 這種類型
                if (matchStr) { // 如果有匹配到
                    compileText(node, this.vm, matchStr)
                }
            }
        })
    }
    isElementNode(node) { // 元素節(jié)點
        return node.nodeType === 1
    }
    isTextNode(node) { // 文本節(jié)點
        return node.nodeType === 3
    }
    isMustache(str) {
        if (!str) {
            return null
        }
        let reg = /{{(.*)}}/
        let arr = str.match(reg)
        return arr ? arr[1].replace(/s/g, "") : null
    }

}
現(xiàn)在修改一下 Mvvm這個類的constructor函數(shù)
constructor(option) {
    this.$option = option || {}
    this._proxyData(option.data, this)
    new Observe(option.data)
    new Compile(option.el, this)
}

現(xiàn)在你好這個值終于是被渲染出來, 我們踏出了第一步, 現(xiàn)在開始實現(xiàn) myMvvm.someStr = 1 也能及時更新

在實現(xiàn)complie的時候, 我們知道渲染的時候調(diào)用了compileText函數(shù)，那么我們現(xiàn)在更改someStr時及時渲染,就只要再執(zhí)行這個函數(shù)就可以了, 我們可以把這個更新函數(shù)放到一個隊列里, 每次更新someStr的時候, 把這個隊列里的更新函數(shù)執(zhí)行一遍就可以了
我們實現(xiàn)一個Dep類

// 這里聲明兩個變量待會使用
let updateFn
let canMount
class Dep {
    constructor () {
        this.queue = []
    }
    mount () {
        this.queue.push(updateFn)
    }
    notify () {
        this.queue.forEach(fn => fn())
    }
}

然后修改一下Observe類的defineReactive函數(shù)

defineReactive(obj, key, val) {
    let initVal = val
    let dep = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: false,
        get() {
            if (canMount) { // 防止每次get都會執(zhí)行這里
                dep.mount()
            }
            return initVal
        },
        set(val) { // 每一次的復(fù)制我們都可以在這里獲知,自然可以為所欲為了
            if (val !== initVal) {
                initVal = val
                dep.notify()
            }
            return initVal
        }
    })
}

實現(xiàn)一個生成更新函數(shù) 的方法
let bindTextUpdater = function (node, vm, matchStr) {
    canMount = true
    updateFn = compileText.bind(null, node, vm, matchStr)
    updateFn()
    canMount = false
}

然后最后一步
修改一下Complie類的compileElement方法
let childNodes = el.childNodes;
        [].forEach.call(childNodes, (node) => { // 遍歷所有的子節(jié)點
            if (this.isElementNode(node)) { // 如果是元素節(jié)點, 重復(fù)便利
                this.compileElement(node)
            } else if (this.isTextNode(node)) { // 如果是文本節(jié)點
                let matchStr = this.isMustache(node.nodeValue) // 判斷這個文本值是不是 {{}} 這種類型
                if (matchStr) { // 如果有匹配到
                    bindUpdater(node, this.vm, matchStr) // 綁定更新函數(shù)
                }
            }
        })

現(xiàn)在執(zhí)行 myMvvm.someStr = 155 會發(fā)現(xiàn)簡單的例子實現(xiàn)了