<scirpt>
    const vm = new miniVue({
 ? ? ? ?el: '#app',
 ? ? ? ?data: {
 ? ? ? ? ? ?obj: {
 ? ? ? ? ? ? ? ?name: "miniVue",
 ? ? ? ? ? ? ? ?auth: 'xxx'
 ? ? ? ? ?  },
 ? ? ? ? ? ?msg: "this is miniVue",
 ? ? ? ? ? ?htmlStr: "<h3>this is htmlStr</h3>"
 ? ? ?  },
 ? ? ? ?methods: {
 ? ? ? ? ? ?handleClick() {
 ? ? ? ? ? ? ? ?console.log(this);
 ? ? ? ? ?  }
 ? ? ?  }
 ?  });
</scirpt>

class miniVue {
    constructor(options) {
        this.$el = options.el
 ? ? ? ?this.$data = options.data
 ? ? ? ?this.$options = options
 ?  }
 ? ?if(this.$el) {
        // 解析模板 to Compile
 ?  }
}

class Compile {
 ? ?constructor(el, vm) {
 ? ? ? ?// 判斷的原因是因為傳入的el有可能是DOM，也有可能是選擇器例如‘#app'
        this.el = this.isElementNode(el) ? el : document.querySelector(el)
 ? ? ? ?this.vm = vm
 ? ? ? ?// 新建文檔碎片存儲DOM
 ? ? ?  const fragment = this.toFragment(this.el)

 ? ? ? ?// 操作文檔碎片 to handle fragment

 ? ? ? ?// 將操作好的文檔碎片追加到原本的DOM上面
 ? ? ? ?this.el.appendChild(fragment)
 ?  }

 ? ?// 判斷是否為元素節(jié)點
 ? ?isElementNode(node) {
 ? ? ? ?return node.nodeType === 1
 ?  }
 ? ?// dom碎片化
 ? ?toFragment(el) {
 ? ? ? ?const f = document.createDocumentFragment()
        f.appendChild(el.clone(true))
 ?  }
}
// 上面的miniVue實例相應的改為
class miniVue {
    constructor(options) {
        this.$el = options.el
 ? ? ? ?this.$data = options.data
 ? ? ? ?this.$options = options
 ?  }
 ? ?if(this.$el) {
        // 解析模板 to Compile
 ? ? ? ?new Compile(this.$el, this) // 這里的this就是miniVue實例
 ?  }
}

handleFragment(fragment) {
 ? ?// 獲取文檔碎片的子節(jié)點
    const childNodes =  fragment.childNodes
 ? ?// 遍歷所有子節(jié)點
 ?  [...childNodes].forEach((child) => {
        if(this.isElementNode(child)) {
 ? ? ? ? ? ?// 元素節(jié)點
 ? ? ? ? ? ?this.compileElement(child)
 ? ? ?  } else {
 ? ? ? ? ? ?// 文本節(jié)點
 ? ? ? ? ? ?this.compileText(child)
 ? ? ?  }

 ?      // 遞歸遍歷
 ?      if(child.childNodes && child.childNodes.length) {
 ? ? ? ? ? ?handleFragment(child)
 ? ? ?  }
 ?  })
}

// 同樣的我們需要完善一下compile的構造函數(shù)
constructor(el, vm) {
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
 ? ?this.vm = vm
 ? ?// 新建文檔碎片存儲DOM
 ? ?const fragment = this.toFragment(this.el)

 ? ?// 操作文檔碎片 to handle fragment
 ? ?this.handleFragment(fragment)

 ? ?// 將操作好的文檔碎片追加到原本的DOM上面
 ? ?this.el.appendChild(fragment)
}

compileElement(node) {
    const attrs = node.attributes
 ? ?// 遍歷節(jié)點上的全部屬性
 ?  [...attrs].forEach(({name, value}) => {
 ? ? ? ?// 分類看指令以什么開頭
 ?      if(this.headWithV(name)) {
            // 以v開頭
 ? ? ? ? ? ?const [,directive] = name.split("-") //分離出具體指令
 ? ? ? ? ? ?const [dir,event] = directive.split(":") // 考慮v-on的情況 例如v-on:click

 ? ? ? ? ? ?// 將指令的名稱、值、node節(jié)點、整個vm實例、事件名（如果有的話）一起傳給最后真正操作的node的函數(shù)
 ? ? ? ? ? ?handleNode[dir](node, value, this.vm, event)

 ? ? ?  }else if(this.headWithoutV(name)) {
            // 以@開投
 ? ? ? ? ? ?const [, event] = name.split("@")
 ? ? ? ? ? ?// 和上面一樣，但是指令名字是確定的，為“on” 因為@是v-on的語法糖
 ? ? ? ? ? ?handleNode["on"](node, value, this.vm, event)
 ? ? ?  }
 ?  })
}
?
headWithV(name) {
    return name.startsWith("v-");
}
headWithoutV(name){
 ? ?return name.startsWith("@");
}

compileText(node) {
 ? ?const content = node.textContent
 ? ?if(!/{{(.+?)}}/.test(content)) return
 ? ?// 識別到是mustache語法 處理方法其實和v-text一樣
 ? ?handleNode["text"](node, content,this.vm)
}

// node--操作的node節(jié)點  exp--指令的值（或者是mustache語法內部插入的內容）  vm--vm實例  event--事件名稱
const handleNode = {
 ? ?// v-html
 ? ?html(node, exp, vm) {
 ?      // 去vm實例中找到這個表達式所對應的值
 ? ? ? ?const value = this._get(vm, exp)
 ? ? ? ?// 更新node
 ? ? ? ?updater.htmlUpdater(node, value)
    },
 ? ?// v-model
 ? ?model(node, exp, vm) {
 ? ? ? ?// 同html
 ?      const value = this._get(vm, exp)
 ? ? ? ?updater.modelUpdater(node, value)
    },
 ? ?// v-on
 ? ?on(node, exp, vm, event) {
        // v-on特殊一點，我們需要為該node綁定事件監(jiān)聽器
 ? ? ? ?const listener = vm.$options.methods && vm.$options.methods[exp] // 獲取監(jiān)聽器的回調
 ? ? ? ?// 綁定監(jiān)聽器，注意回調綁定使用bind把this指向vm實例，false代表事件冒泡時觸發(fā)監(jiān)聽器
 ? ? ? ?node.addEventListener(event, listener.bind(this), false) 
    },
 ? ?// v-text
 ? ?text(node, exp, vm) {
 ? ? ? ?// v-text是最復雜的，需要考慮兩種情況，一種是通過v-text指令操作node，另一種則是通過mustache語法操作node，需分類
 ? ? ? ?let value
 ? ? ? ?if(exp.indexOf("{{") !== -1) {
 ? ? ? ? ? ?// mustache語法操作node
 ? ? ? ? ? ?// 捕捉到所有的mustache語法，將其整個替換為vm實例中屬性對應的值
 ? ? ? ? ? ?// 拿我們最初初始化實例的一個數(shù)據(jù)舉例：{{obj.auth}} -- 'xxx'
 ? ? ? ? ? ?value = exp.replace(/{{(.+?)}}/g, this._get(vm, exp)) 
 ? ? ?  }else {
 ? ? ? ? ? ?// v-text操作node
 ? ? ? ? ? ?value = this._get(vm, exp)
 ? ? ?  }
 ? ? ? ?// 更新node
 ? ? ? ?updater.textUpdater(node, value);
 ?  },
}
?
// 根據(jù)表達式去數(shù)據(jù)對象里面獲取值
_get(vm, exp) {
 ? ?const segments = exp.split('.')
 ? ?// 這里使用reduce是為了獲取嵌套對象內部屬性的值，不熟悉的話去補一補reduce
 ? ?// 比如data.a.b.c，那么每次遍歷的值為data[a]，data[a][b]，最終結果是data[a][b][c]
    segments.reduce((pre, key) => {
        return pre[key]
 ?  }, vm.$data)
}

// 更新node （終于到了更新node這一步）
const updater = {
 ? ?textUpdater(node, value) {
        node.textContent = value;
 ?  },
 ? ?htmlUpdater(node, value) {
        node.innerHTML = value;
 ?  },
 ? ?modelUpdater(node, value){
        node.value = value;
 ?  }
}

function observe(data) {
    if(typeof data !== 'object') return
 ? ?Object.keys(data).forEach((key) => {
 ? ? ? ?defineReactive(data, key, data[key])
 ?  })
}

function defineReactive(data, key, value) {
 ? ?// 遞歸子屬性
    observe(value)

 ? ?Object.defineProperty(data, key, {
        get() {
 ? ? ? ? ? ?// 數(shù)據(jù)劫持 在這個地方進行相關操作
            return value
 ? ? ?  }
 ? ? ? ?set(newVal) {
            if(newVal == value) return
 ? ? ?      value = newVal
 ? ? ?      // 為新數(shù)據(jù)添加getter和setter
 ? ? ?      observe(newVal)
 ? ? ?      // 數(shù)據(jù)劫持 在這個地方進行相關操作
 ?      }
 ?  })
}

class Watcher {
    // data--最外層數(shù)據(jù)對象  exp--表達式  cb--數(shù)據(jù)更新后需要執(zhí)行的回調
    // 通過data和exp可以獲取watcher所依賴屬性的具體值
    constructor(data, exp, cb) {
	this.data = data
        this.exp = exp
        this.cb = cb
        // 每次初始化watcher實例時，對依賴屬性進行訂閱
        this.value = this.subscribe()
    }
    // 訂閱
    subscribe() {
        // 獲取依賴屬性的值
	const value = _get(this.data, this.exp)
        return value
    }
    // 更新
    update() {
        // 獲取新值
	this.value = _get(this.data, this.exp)
        cb()
    }
}

// 根據(jù)表達式去數(shù)據(jù)對象里面獲取值 其實上面已經(jīng)定義過一個了，功能是一樣的，這里重復定義加深一下印象，也方便閱讀
function _get(obj, exp) {
    const segments = exp.split('.')
    // 這里使用reduce是為了獲取嵌套對象內部屬性的值，不熟悉的話去補一補reduce
    // 比如data.a.b.c，那么每次遍歷的值為data[a]，data[a][b]，最終結果是data[a][b][c]
    segments.reduce((pre, key) => {
	return pre[key]
    }, obj)
}

function defineReactive(data, key, value) {
    // 新建用于存儲watcher的數(shù)據(jù)
    const dep = []

    // 遞歸子屬性
    observe(value)

    Object.defineProperty(data, key, {
        get() {
            // 數(shù)據(jù)劫持 在這個地方進行相關操作
            dep.push(watcher) // 收集依賴
                        return value
        }
        set(newVal) {
            if(newVal == value) return
            value = newVal
            // 為新數(shù)據(jù)添加getter和setter
            observe(newVal)

            // 數(shù)據(jù)劫持 在這個地方進行相關操作
            dep.notify() // 通知依賴
    	}
    })
}

subscribe() {
    // 獲取依賴屬性的值
    window.target = this // 這里的this即為此時初始化的watcher實例
	const value = _get(this.data, this.exp)
    return value
}
function defineReactive(data, key, value) {
    // 新建用于存儲watcher的數(shù)據(jù)
    const dep = []
    observe(value)
    Object.defineProperty(data, key, {
        get() {
            dep.push(window.target) // 改為window.target

            return value
        }
        set(newVal) {
            if(newVal == value) return
            value = newVal
            observe(newVal)

            dep.notify()
    	}
    })
}

class Dep {
    constructor() {
        this.subs = []
    }
    // 收集依賴
    addSub(watcher) {
        this.subs.push(watcher)
    }
    // 通知依賴
    notify() {
        [...this.subs].forEach((watcher) => {
            watcher.update()
        })
    }
}

function defineReactive(data, key, value) {
    // 新建用于存儲watcher的數(shù)據(jù)
    const dep = new Dep()
    observe(value)
    Object.defineProperty(data, key, {
        get() {
            // 收集依賴
            dep.addSub(window.target) 
            return value
        }
        set(newVal) {
            if(newVal == value) return
            value = newVal
            observe(newVal)
            // 通知依賴
            dep.notify()
    	}
    })
}

subscribe() {
    Dep.target = this // 這里的this即為此時初始化的watcher實例
    const value = _get(this.data, this.exp)
    Dep.target = null // 清空暴露在全局中的watcher
    return value
}

// 同時在收集依賴時添加一層過濾
addSub(watcher) {
    if(watcher) {
        this.subs.push(watcher)
    }
}

update() {
  const oldValue = this.value // 獲取舊值
  this.value = parsePath(this.data, this.expression) // 獲取新值
  this.cb.call(this.data, this.value, oldValue)
}

// 根據(jù)表達式去數(shù)據(jù)對象里面獲取值
function _get(obj, exp) {
    const segments = exp.split('.')
    /*
    比如data.a.b.c，那么每次遍歷的值為data[a]，data[a][b]，最終結果是data[a][b][c]
    遍歷到data[a]、data[a][b]時，肯定會去訪問這兩個屬性的值，于是會進入到這兩個屬性的getter里面
    所以這個watcher不僅僅會被添加到最內層屬性的getter中，中間每一層屬性的getter中都會有這個watcher
    即如果data[a]的值發(fā)生了變化，也會通知這個watcher去更新視圖
    */ 
    segments.reduce((pre, key) => {
        return pre[key]
    }, obj)
}

// node--操作的node節(jié)點  exp--指令的值（或者是mustache語法內部插入的內容）  vm--vm實例  event--事件名稱
const handleNode = {
 ? ?// v-html
 ? ?html(node, exp, vm) {
 ? ? ? ?const value = this._get(vm, exp)
 ? ? ? ?// 新建watcher實例，并綁定更新回調
 ? ? ? ?new Watcher(vm, exp, (newVal, oldVal) => {
 ? ? ? ? ? ?// 這里是所依賴數(shù)據(jù)更新以后更新視圖
 ? ? ?      this.updater.htmlUpdater(node, newVal);
 ?      })
 ? ? ? ?// 這里是編譯的時候更新視圖
 ? ? ? ?updater.htmlUpdater(node, value)
    },
 ? ?// v-model
 ? ?model(node, exp, vm) {
 ?      const value = this._get(vm, exp)
 ? ? ? ?// 新建watcher實例，并綁定更新回調
 ? ? ? ?new Watcher(vm, exp, (newVal, oldVal) => {
 ? ?        this.updater.modelUpdater(node, newVal);
 ?      });
 ? ? ? ?updater.modelUpdater(node, value)
    },
 ? ?// v-on
 ? ?on(node, exp, vm, event) {
 ? ? ? ?// watcher只針對屬性 v-on這里不會生成watcher（方法名也沒什么好監(jiān)聽的，一般也不會操作方法名讓方法名發(fā)生變化）
 ? ? ? ?const listener = vm.$options.methods && vm.$options.methods[exp] 
 ? ? ? ?node.addEventListener(event, listener.bind(this), false) 
    },
 ? ?// v-text
 ? ?text(node, exp, vm) {
 ? ? ? ?let value
 ? ? ? ?if(exp.indexOf("{{") !== -1) {
 ? ? ? ? ? ?// mustache語法操作node
 ? ? ? ? ? ?value = exp.replace(/{{(.+?)}}/g, this._get(vm, exp)) 
 ? ? ? ? ? ?
 ? ? ?  }else {
 ? ? ? ? ? ?// v-text操作node
 ? ? ? ? ? ?value = this._get(vm, exp)
 ? ? ?  }
 ? ? ? ?// 新建watcher實例，并綁定更新回調
 ? ? ? ?new Watcher(vm, exp, (newVal, oldVal) => {
 ? ?        this.updater.textUpdater(node, newVal);
 ?      });
 ? ? ? ?updater.textUpdater(node, value);
 ?  },
}
_get(vm, exp) {
 ? ?const segments = exp.split('.')
    segments.reduce((pre, key) => {
        return pre[key]
 ?  }, vm.$data)
}
?
const updater = {
 ? ?textUpdater(node, value) {
        node.textContent = value;
 ?  },
 ? ?htmlUpdater(node, value) {
        node.innerHTML = value;
 ?  },
 ? ?modelUpdater(node, value){
        node.value = value;
 ?  }
}

class miniVue {
    constructor(options) {
        this.$el = options.el
 ? ? ? ?this.$data = options.data
 ? ? ? ?this.$options = options
 ?  }
 ? ?if(this.$el) {
 ? ? ? ?// 添加數(shù)據(jù)劫持
        this.observe()
 ? ? ? ?// 編譯
 ? ? ? ?new Compile(this.$el, this);
 ?  }
}