50行代碼的MVVM，感覺閉包的藝術

時間 2019-11-05

標籤代碼 mvvm 感覺閉包藝術简体版

原文原文鏈接

咱們先看一下運行結果javascript

name 和 age 被響應式的渲染出來，在 2s 後咱們修改了 name 的值，一樣能在頁面正確更新。html

咱們來看一下最小化的 MVVM 的源碼java

class Vue{
    constructor(opt){
        this.opt = opt
        this.observe(opt.data)
        let root = document.querySelector(opt.el)
        this.compile(root)
    }
    // 爲響應式對象 data 裏的每個 key 綁定一個觀察者對象
    observe(data){ 
        Object.keys(data).forEach(key => {
            let obv = new Observer() 
            data["_"+key] = data[key]
            // 經過 getter setter 暴露 for 循環中做用域下的 obv，閉包產生
            Object.defineProperty(data, key, {
                get(){
                    Observer.target && obv.addSubNode(Observer.target);
                    return data['_'+key]
                }, 
                set(newVal){
                    obv.update(newVal)
                    data['_'+key] = newVal
                }
            })
        })
    }
    // 初始化頁面，遍歷 DOM，收集每個key變化時，隨之調整的位置，以觀察者方法存放起來 
    compile(node){
        [].forEach.call(node.childNodes, child =>{
            if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
                let key = RegExp.$1.trim()
                child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) 
                Observer.target = child
                this.opt.data[key] 
                Observer.target = null
            }
            else if (child.firstElementChild) 
            this.compile(child)
        })
    }    
}
// 常規觀察者類
class Observer{
    constructor(){
        this.subNode = []    
    }
    addSubNode(node){
        this.subNode.push(node)
    }
    update(newVal){
        this.subNode.forEach(node=>{
            node.innerHTML = newVal
        })
    }
}
複製代碼

【重點分析】接下來梳理一下這段代碼的思路，順便了解一下 MVVM 閉包的藝術：

[observe 函數]：首先咱們會對須要響應式的 data 對象進行 for 循環遍歷，爲 data 的每個 key 映射一個觀察者對象
- 在 ES6 中，for 循環每次執行，均可以造成閉包，所以這個觀察者對象就存放在閉包中
- 閉包造成的本質是 內層做用域中堆地址暴露，這裏咱們巧妙的用 getter/setter 函數暴露了 for 循環裏的觀察者
[compile 函數]：咱們從根節點向下遍歷 DOM，遇到 mustache 形式的文本，則映射成 data.key 對應的值，同時記錄到觀察者中
- 當遍歷到 {{xxx}} 形式的文本，咱們正則匹配出其中的變量，將它替換成 data 中的值
- 爲了知足後續響應式的更新，將該節點存儲在 key 對應的觀察者對象中，咱們用 getter 函數巧妙的操做了閉包
在頁面初次渲染以後，後續的 eventLoop 中，若是修改了 key 的值，實際會經過 setter 觸發觀察者的 update 函數，完成響應式更新

附上述演示案例的完整代碼 github地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id='app'>
        <h3>姓名</h3>
        <p>{{name}}</p>
        <h3>年齡</h3>
        <p>{{age}}</p>
    </div>
</body>
</html>
<script> document.addEventListener('DOMContentLoaded', function(){ let opt = {el:'#app', data:{name:'檢索中...', age:30}} let vm = new Vue(opt) setTimeout(() => { opt.data.name = '王永峯' }, 2000); }, false) class Vue{ constructor(opt){ this.opt = opt this.observe(opt.data) let root = document.querySelector(opt.el) this.compile(root) } // 爲響應式對象 data 裏的每個 key 綁定一個觀察者對象 observe(data){ Object.keys(data).forEach(key => { let obv = new Observer() data["_"+key] = data[key] // 經過 getter setter 暴露 for 循環中做用域下的 obv，閉包產生 Object.defineProperty(data, key, { get(){ Observer.target && obv.addSubNode(Observer.target); return data['_'+key] }, set(newVal){ obv.update(newVal) data['_'+key] = newVal } }) }) } // 初始化頁面，遍歷 DOM，收集每個key變化時，隨之調整的位置，以觀察者方法存放起來  compile(node){ [].forEach.call(node.childNodes, child =>{ if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){ let key = RegExp.$1.trim() child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) Observer.target = child this.opt.data[key] Observer.target = null } else if (child.firstElementChild) this.compile(child) }) } } // 常規觀察者類 class Observer{ constructor(){ this.subNode = [] } addSubNode(node){ this.subNode.push(node) } update(newVal){ this.subNode.forEach(node=>{ node.innerHTML = newVal }) } } </script>
複製代碼