// 數(shù)據(jù)監(jiān)聽(tīng)，監(jiān)聽(tīng)對(duì)象的所有g(shù)et和set
function observe(data) {
  // 如果data不存在或data不是object
  if (!data || typeof data !== 'object') {
    return;
  }
  // 遍歷data，獲得當(dāng)前的key
  for (const key in data) {
    // 監(jiān)聽(tīng)data下的當(dāng)前key的屬性變動(dòng)
    defineReactive(data, key, data[key]); // 一次只處理data和一個(gè)key的監(jiān)聽(tīng)關(guān)系
  }
}
// 通過(guò)Object.defineProperty去監(jiān)聽(tīng)data下的key
function defineReactive(data, key, value) {
  // 處理key對(duì)應(yīng)的value是一個(gè)對(duì)象的情況
  observe(value)
  // 創(chuàng)建Dep() 實(shí)例 用于存儲(chǔ)key的依賴，以及觸發(fā)key的依賴
  let dep = new Dep()
  Object.defineProperty(data, key, {
    // 返回value值
    get: function () {
      // get的時(shí)候進(jìn)行依賴收集
      if(Dep.target) { 
				// Dep.target默認(rèn)為null，不會(huì)收集依賴，但是創(chuàng)建watcher實(shí)例的時(shí)候
        // 會(huì)為Dep.target賦值，并指向當(dāng)前的watcher實(shí)例，同時(shí)會(huì)為watcher掛載上update函數(shù)
        // 然后get的時(shí)候會(huì)出現(xiàn)觸發(fā)依賴收集，因?yàn)檫@時(shí)候Dep.target指向當(dāng)前的watcher實(shí)例，就可以將這個(gè)watcher實(shí)例收集起來(lái)
        dep.addSub(Dep.target)
      }
      return value
    },
    set: function (newValue) {
      // get的時(shí)候觸發(fā)依賴
      val = newValue;
      // 依賴觸發(fā)，遍歷依賴?yán)锩娴膚atcher并調(diào)用update函數(shù)
      dep.notify(newValue)
    }
  }
)}
// 創(chuàng)建Dep類，用來(lái)存儲(chǔ)依賴
class Dep{
    constructor() {
        this.subs = [] // 定義一個(gè)subs數(shù)組用來(lái)存放依賴
    }
    addSub(sub) {
        // get的時(shí)候存儲(chǔ)依賴
        // 注：更新函數(shù)會(huì)被掛載到單獨(dú)創(chuàng)建的watcher實(shí)例，存儲(chǔ)依賴的時(shí)候，實(shí)際上存儲(chǔ)的是創(chuàng)建的watcher實(shí)例
        this.subs.push(sub)
    }
    notify(newValue) {
        // set的時(shí)候觸發(fā)依賴
        // 注： 遍歷依賴，開(kāi)始執(zhí)行里面watcher實(shí)例的更新函數(shù)
        this.subs.forEach(item => {
            item.update(newValue)
        })
    }
    target = null
}

class Watcher{
    constructor(vm, prop, callback) {
        this.vm = vm  // 監(jiān)聽(tīng)的節(jié)點(diǎn)和監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象
        this.prop = prop // 監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象的某個(gè)參數(shù)key，如 name、age 等
        this.callback = callback // 存儲(chǔ)回調(diào)
        this.value = this.get() // 觸發(fā)數(shù)據(jù)get操作，開(kāi)始依賴收集
    }
    get() {
        Dep.target = this // 將訂閱器賦值給Dep的target
        // 調(diào)用watcher前需要調(diào)用observe，所以這里的data已經(jīng)被監(jiān)聽(tīng)了，get的時(shí)候開(kāi)始依賴收集因?yàn)镈ep.target = this，所以target非空，Watcher會(huì)被插入到data的key下的依賴集合中
        const value = this.vm.data[this.prop] 
        Dep.target = null // 關(guān)閉依賴收集，防止每次都收集依賴
        return value // 獲取當(dāng)前的值
    }
    // 注意調(diào)用update的時(shí)候是在監(jiān)聽(tīng)器的notify里面進(jìn)行的，說(shuō)明已經(jīng)set操作完了，值已經(jīng)變了，但是watcher的value值在get的時(shí)候先緩存了上一次value值
    update(newValue) { // 更新函數(shù)
        const value = newValue // 獲取當(dāng)前的值
        const oldValue = this.value // 獲取之前緩存的值
        if(value != oldValue) { // 如果當(dāng)前的值和之前緩存的值不同則觸發(fā)更新函數(shù)，并重置value
            this.value = value
            this.callback(value); // 觸發(fā)更新回調(diào)函數(shù)
        }
    }
}

class MyVue {
  constructor(options, prop) {
    this.options = options // 需要雙向綁定的對(duì)象，包括數(shù)據(jù)對(duì)象和對(duì)應(yīng)的節(jié)點(diǎn)
    this.data = options.data // 需要監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象
    this.el = options.el // 需要更新視圖節(jié)點(diǎn)
    this.prop = prop // 對(duì)應(yīng)的key值
    this.init()
  }
  init() {
    observe(this.data) // 監(jiān)聽(tīng)data
    document.getElementById(this.el).textContent = this.data[this.prop] // 將數(shù)據(jù)初始化到頁(yè)面上
    // 創(chuàng)建watcher實(shí)例，在watcher中對(duì)data進(jìn)行g(shù)et操作，并將watcher本身掛載到data對(duì)應(yīng)的key的依賴下
    new Watcher(this.options, this.prop, value => {
      document.getElementById(this.el).textContent = value
    })
  }
}

// 完全是為一個(gè)節(jié)點(diǎn)服務(wù)，我們應(yīng)該要針對(duì)不同元素動(dòng)態(tài)的掛載watcher
init() {
  observe(this.data) // 監(jiān)聽(tīng)data
  document.getElementById(this.el).textContent = this.data[this.prop] // 將數(shù)據(jù)初始化到頁(yè)面上
  // 創(chuàng)建watcher實(shí)例，在watcher中對(duì)data進(jìn)行g(shù)et操作，并將watcher本身掛載到data對(duì)應(yīng)的key的依賴下
  new Watcher(this.options, this.prop, value => {
    document.getElementById(this.el).textContent = value
  })
}

// 無(wú)法處理復(fù)雜數(shù)據(jù)類型，這種只能處理data對(duì)象下的數(shù)據(jù)，如果是data.a.b就會(huì)異常
const value = this.vm.data[this.prop] 

class Compile {
  // 對(duì)數(shù)據(jù)進(jìn)行解析
  constructor(el, vm) { // el當(dāng)前目標(biāo)元素根節(jié)點(diǎn)，vm雙向綁定構(gòu)造函數(shù)實(shí)例
    this.el = this.isElementNode(el) ? el : document.getElementById(el) // 獲取目標(biāo)節(jié)點(diǎn)
    this.vm = vm // 暫存構(gòu)造函數(shù)實(shí)例
    // 獲取文檔碎片節(jié)點(diǎn)，暫存在內(nèi)容中
    const fragmentNode = this.node2Fragment(this.el)
    // 模板編譯，主要是為每一個(gè)節(jié)點(diǎn)去建立映射關(guān)系為其設(shè)置對(duì)應(yīng)的watcher
    this.compile(fragmentNode)
    // 將處理后端
    this.el.appendChild(fragmentNode)
  }
  ....
}

// 解析元素節(jié)點(diǎn)
  node2Fragment(Node) {
    // 創(chuàng)建空白文檔
    const f = document.createDocumentFragment()
    // 每次先看看Node.firstChild是否存在
    while((Node.firstChild)) {
      // 把子元素加到空白文檔中，加過(guò)去之后意味著目標(biāo)節(jié)點(diǎn)第一個(gè)節(jié)點(diǎn)遷移到空白文檔中，那么目標(biāo)節(jié)點(diǎn)的元素就會(huì)越來(lái)越少，全部變成空白文檔下的子元素
      f.appendChild(Node.firstChild)
    }
    return f
  }

// 編譯模板
compile(fragmentNode) {
  // 獲取模板的子節(jié)點(diǎn)
  const childNodes = fragmentNode.childNodes;
  // 遍歷所有節(jié)點(diǎn)
  [...childNodes].forEach( child => {
    // 判斷子節(jié)點(diǎn)中是否還有節(jié)點(diǎn) 遞歸調(diào)用
    if (child.childNodes && child.childNodes.length) {
      this.compile(child);
    }
      // 如果是元素節(jié)點(diǎn)類型
    else if(this.isElementNode(child)) {
      // 使用元素編譯
      this.elementCompile(child)
    } 
      // 如果是文本節(jié)點(diǎn)類型
    else {
      // 使用文本編譯
      this.textCompile(child)
    }
  })
}

// 文本編譯函數(shù)
textCompile(node) {
  // 獲取節(jié)點(diǎn)文字內(nèi)容
  const content = node.textContent;
  // 匹配插值語(yǔ)法，如果有{{}}語(yǔ)法則為其設(shè)置watcher
  if(/{{.+?}}/.test(content)) {
    compileFunc['text'](node, content, this.vm)
  }
}

this.updater.textUpdater(node, value, propList[index], content)

const compileFunc = {
    text(node, content, vm) {
        const textMatch = /(?<={{)(.+?)(?=})/g;
        let propList = content.match(textMatch)
        propList = [...new Set(propList)]
        for (let index = 0; index < propList.length; index++) {
            let func = value => {
                this.updater.textUpdater(node, value, propList[index], content)
            }
            new Watcher(vm, this.propFunc(propList[index], vm), func)
        }
    },
    // 處理取對(duì)象下的值的情況，因?yàn)閧{}}里面會(huì)有{{a.b.c}}這種情況需要通過(guò)一個(gè)函數(shù)的形式在watcher中進(jìn)行g(shù)et操作
    propFunc(value, vm) {
        return function() {value.split(".").reduce((p, c) => {
            return p[c];
        }, vm.data)}
    },
    // 實(shí)際操作dom方法
    updater: {
        textUpdater(node, value, prop, content) {
            node.textContent = content.replaceAll(`{{${prop}}}`, value);
        },
    }
}

// 判斷是否v-開(kāi)頭的屬性
isMyVueAttributes(name) {
    return name.startsWith('v-')
}

// 元素編譯函數(shù)
elementCompile(node) {
    // 獲得目標(biāo)的節(jié)點(diǎn)的屬性
    const attributes = node.attributes;
    [...attributes].forEach(item => {
        // 解構(gòu)出參數(shù)的name和value, name相當(dāng)于v指令如v-model等，value則是對(duì)應(yīng)的值 name， age等
        const {name, value} = item
        if(!this.isMyVueAttributes(name)) return
        const attributesName = name.split('-')[1]
        compileFunc[attributesName](node, value, this.vm)
    })
}

model(node, prop, vm) {
    let func = value => {
        this.updater.modelUpdater(node, value)
    }
    new Watcher(vm, this.propFunc(prop, vm), func)
    node.oninput =(item)=>{
        // 這里還沒(méi)辦法處理字符串轉(zhuǎn)對(duì)應(yīng)對(duì)象
        vm.data[prop] = item.srcElement.value
    }
},
...
modelUpdater(node, value) {
    node.value = value;
},

init() {
  observe(this.data) // 監(jiān)聽(tīng)data
  document.getElementById(this.el).textContent = this.data[this.prop] // 將數(shù)據(jù)初始化到頁(yè)面上
  // 創(chuàng)建watcher實(shí)例，在watcher中對(duì)data進(jìn)行g(shù)et操作，并將watcher本身掛載到data對(duì)應(yīng)的key的依賴下
  new Watcher(this.options, this.prop, value => {
    document.getElementById(this.el).textContent = value
  })
}

init() {
    observe(this.data) // 監(jiān)聽(tīng)data
    new Compile(this.el, this.options)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE雙向綁定原理實(shí)現(xiàn)</title>
</head>
<body>
    <div id="app">{{name}}{{name}}<div>{{child.name}}</div><input v-model="name"></input></div>
    <div id="app1" v-model="a.b.c"></div>
    <script>
        // 監(jiān)聽(tīng)器
        // 數(shù)據(jù)監(jiān)聽(tīng)，監(jiān)聽(tīng)對(duì)象的所有g(shù)et和set
        function observe(data) {
            // 如果data不存在或data不是object
            if (!data || typeof data !== 'object') {
                return;
            }
            // 遍歷data，獲得當(dāng)前的key
            for (const key in data) {
                // 監(jiān)聽(tīng)data下的當(dāng)前key的屬性變動(dòng)
                defineReactive(data, key, data[key]); // 一次只處理data和一個(gè)key的監(jiān)聽(tīng)關(guān)系
            }
        }
        // 通過(guò)Object.defineProperty去監(jiān)聽(tīng)data下的key
        function defineReactive(data, key, value) {
            // 處理key對(duì)應(yīng)的value是一個(gè)對(duì)象的情況
            observe(value)
            // 創(chuàng)建Dep() 實(shí)例 用于存儲(chǔ)key的依賴，以及觸發(fā)key的依賴
            let dep = new Dep()
            Object.defineProperty(data, key, {
                // 返回value值
                get: function () {
                    // get的時(shí)候進(jìn)行依賴收集
                    if(Dep.target) { 
                        // Dep.target默認(rèn)為null，不會(huì)收集依賴，但是創(chuàng)建watcher實(shí)例的時(shí)候
                        // 會(huì)為Dep.target賦值并指向當(dāng)前的watcher實(shí)例，同時(shí)會(huì)為watcher掛載上update函數(shù)
                        // 然后get的時(shí)候會(huì)出現(xiàn)觸發(fā)依賴收集，因?yàn)檫@時(shí)候Dep.target指向當(dāng)前的watcher實(shí)例，就可以將這個(gè)watcher實(shí)例收集起來(lái)
                        dep.addSub(Dep.target)
                    }
                    return value
                },
                set: function (newValue) {
                    // get的時(shí)候觸發(fā)依賴
                    val = newValue;
                    // 依賴觸發(fā)，遍歷依賴?yán)锩娴膚atcher并調(diào)用update函數(shù)
                    dep.notify(newValue)
                }
            }
        )}
        // 創(chuàng)建Dep類，用來(lái)存儲(chǔ)依賴
        class Dep{
            constructor() {
                this.subs = [] // 定義一個(gè)subs數(shù)組用來(lái)存放依賴
            }
            addSub(sub) {
                // get的時(shí)候存儲(chǔ)依賴
                // 注：更新函數(shù)會(huì)被掛載到單獨(dú)創(chuàng)建的watcher實(shí)例，存儲(chǔ)依賴的時(shí)候，實(shí)際上存儲(chǔ)的是創(chuàng)建的watcher實(shí)例
                this.subs.push(sub)
            }
            notify(newValue) {
                // set的時(shí)候觸發(fā)依賴
                // 注： 遍歷依賴，開(kāi)始執(zhí)行里面watcher實(shí)例的更新函數(shù)
                this.subs.forEach(item => {
                    item.update(newValue)
                })
            }
            target = null
        }
        // 訂閱器
        class Watcher{
            constructor(vm, prop, callback) {
                this.vm = vm  // 監(jiān)聽(tīng)的節(jié)點(diǎn)和監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象
                this.prop = prop // 監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象的某個(gè)參數(shù)key，如 name、age 等
                this.callback = callback // 存儲(chǔ)回調(diào)
                this.value = this.get() // 觸發(fā)數(shù)據(jù)get操作，開(kāi)始依賴收集
            }
            get() {
                Dep.target = this // 將訂閱器賦值給Dep的target
                // 調(diào)用watcher前需要調(diào)用observe，所以這里的data已經(jīng)被監(jiān)聽(tīng)了，get的時(shí)候開(kāi)始依賴收集因?yàn)镈ep.target = this，所以target非空，Watcher會(huì)被插入到data的key下的依賴集合中
                const value = this.prop() // 由于要處理取對(duì)象下面的對(duì)象的值的情況，這里需要返回一個(gè)函數(shù)在get()的時(shí)候再顯式的收集依賴
                Dep.target = null // 關(guān)閉依賴收集，防止每次都收集依賴
                return value // 獲取當(dāng)前的值
            }
            // 注意調(diào)用update的時(shí)候是在監(jiān)聽(tīng)器的notify里面進(jìn)行的，說(shuō)明已經(jīng)set操作完了，值已經(jīng)變了，但是watcher的value值在get的時(shí)候先緩存了上一次value值
            update(newValue) { // 更新函數(shù)
                const value = newValue // 獲取當(dāng)前的值
                const oldValue = this.value // 獲取之前緩存的值
                if(value != oldValue) { // 如果當(dāng)前的值和之前緩存的值不同則觸發(fā)更新函數(shù)，并重置value
                    this.value = value
                    this.callback(value); // 觸發(fā)更新回調(diào)函數(shù)
                }
            }
        }
        // 編譯器
        class Compile {
            // 對(duì)數(shù)據(jù)進(jìn)行解析
            constructor(el, vm) { // el當(dāng)前目標(biāo)元素根節(jié)點(diǎn)，vm雙向綁定構(gòu)造函數(shù)實(shí)例
                this.el = this.isElementNode(el) ? el : document.getElementById(el) // 獲取目標(biāo)節(jié)點(diǎn)
                this.vm = vm // 暫存構(gòu)造函數(shù)實(shí)例
                // 獲取文檔碎片節(jié)點(diǎn)，暫存在內(nèi)容中
                const fragmentNode = this.node2Fragment(this.el)
                // 模板編譯，主要是為每一個(gè)節(jié)點(diǎn)去建立映射關(guān)系為其設(shè)置對(duì)應(yīng)的watcher，把上面創(chuàng)建的節(jié)點(diǎn)傳入解析器去編譯分析
                this.compile(fragmentNode)
                // 將處理后端
                this.el.appendChild(fragmentNode)
            }
            // 解析元素節(jié)點(diǎn)
            node2Fragment(Node) {
                // 創(chuàng)建空白文檔
                const f = document.createDocumentFragment()
                // 每次先看看Node.firstChild是否存在
                while((Node.firstChild)) {
                    // 把子元素加到空白文檔中，加過(guò)去之后意味著目標(biāo)節(jié)點(diǎn)第一個(gè)節(jié)點(diǎn)遷移到空白文檔中，那么目標(biāo)節(jié)點(diǎn)的元素就會(huì)越來(lái)越少，全部變成空白文檔下的子元素
                    f.appendChild(Node.firstChild)
                }
                return f
            }
            // 編譯模板
            compile(fragmentNode) {
                // 獲取模板的子節(jié)點(diǎn)
                const childNodes = fragmentNode.childNodes;
                // 遍歷所有節(jié)點(diǎn)
                [...childNodes].forEach( child => {
                    // 判斷子節(jié)點(diǎn)中是否還有節(jié)點(diǎn) 遞歸調(diào)用
                    if (child.childNodes && child.childNodes.length) {
                        this.compile(child);
                    }
                    // 如果是元素節(jié)點(diǎn)類型
                    else if(this.isElementNode(child)) {
                        // 使用元素編譯
                        this.elementCompile(child)
                    } 
                    // 如果是文本節(jié)點(diǎn)類型
                    else {
                        // 使用文本編譯
                        this.textCompile(child)
                    }
                })
            }
            // 元素編譯函數(shù)
            elementCompile(node) {
                // 獲得目標(biāo)的節(jié)點(diǎn)的屬性
                const attributes = node.attributes;
                [...attributes].forEach(item => {
                    // 解構(gòu)出參數(shù)的name和value, name相當(dāng)于v指令如v-model等，value則是對(duì)應(yīng)的值 name， age等
                    const {name, value} = item
                    if(!this.isMyVueAttributes(name)) return
                    const attributesName = name.split('-')[1]
                    compileFunc[attributesName](node, value, this.vm)
                })
            }
            // 文本編譯函數(shù)
            textCompile(node) {
                // 獲取節(jié)點(diǎn)文字內(nèi)容
                const content = node.textContent;
                // 匹配插值語(yǔ)法，如果有{{}}語(yǔ)法則為其設(shè)置watcher
                if(/{{.+?}}/.test(content)) {
                    compileFunc['text'](node, content, this.vm)
                }
            }
            // 判斷是否node節(jié)點(diǎn)
            isElementNode(Node) {
               return Node.nodeType == 1
            }
            // 判斷是否v-開(kāi)頭的屬性
            isMyVueAttributes(name) {
                return name.startsWith('v-')
            }
        }
        const compileFunc = {
            text(node, content, vm) {
                const textMatch = /(?<={{)(.+?)(?=})/g;
                let propList = content.match(textMatch)
                propList = [...new Set(propList)]
                for (let index = 0; index < propList.length; index++) {
                    let func = value => {
                        this.updater.textUpdater(node, value, propList[index], content)
                    }
                    new Watcher(vm, this.propFunc(propList[index], vm), func)
                }
            },
            model(node, prop, vm) {
                let func = value => {
                    this.updater.modelUpdater(node, value)
                }
                new Watcher(vm, this.propFunc(prop, vm), func)
                node.oninput =(item)=>{
                    // 這里還沒(méi)辦法處理字符串轉(zhuǎn)對(duì)應(yīng)對(duì)象
                    vm.data[prop] = item.srcElement.value
                }
            },
            // 處理取對(duì)象下的值的情況，因?yàn)閧{}}里面會(huì)有{{a.b.c}}這種情況需要通過(guò)一個(gè)函數(shù)的形式在watcher中進(jìn)行g(shù)et操作
            propFunc(value, vm) {
                return function() {value.split(".").reduce((p, c) => {
                    return p[c];
                }, vm.data)}
            },
            // 實(shí)際操作dom方法
            updater: {
                textUpdater(node, value, prop, content) {
                    node.textContent = content.replaceAll(`{{${prop}}}`, value);
                },
                modelUpdater(node, value) {
                    node.value = value;
                },
            }
        }
        // 雙向綁定構(gòu)造函數(shù)
        class MyVue {
            constructor(options, prop) {
                this.options = options // 需要雙向綁定的對(duì)象，包括數(shù)據(jù)對(duì)象和對(duì)應(yīng)的節(jié)點(diǎn)
                this.data = options.data // 需要監(jiān)聽(tīng)的數(shù)據(jù)對(duì)象
                this.el = options.el // 需要更新視圖節(jié)點(diǎn)
                this.prop = prop // 對(duì)應(yīng)的key值
                this.init()
            }
            init() {
                observe(this.data) // 監(jiān)聽(tīng)data
                new Compile(this.el, this.options)
            }
        }
        const vm = new MyVue({
            el: "app",
            data: { name: 'xiaoshan',child: {name:123} }
        });
        // // 創(chuàng)建一個(gè)對(duì)象，對(duì)這個(gè)對(duì)象數(shù)據(jù)監(jiān)聽(tīng)
        // var user = { name: 'xiaoshan', age: 17, son: {name:'test'} }
        // // 數(shù)據(jù)監(jiān)聽(tīng)函數(shù)
        // observe(user)
        // user.name = user.name + '小山'
        // user.son.name = user.son.name  + '小小山'
    </script>
</body>
</html>