MVVM в 50 строках кода, почувствуйте искусство замыкания

внешний интерфейс регулярное выражение MVVM

Посмотрим на результаты работы

Имя и возраст отображаются отзывчиво.Через 2 секунды мы изменили значение имени, которое также может корректно обновляться на странице.

Давайте посмотрим на исходный код минимального MVVM.

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:

  • [функция наблюдения]: во-первых, мыdataОбъект проходится в цикле for, какdataкаждый изkeyотображать объект наблюдателя
    • В ES6 каждый раз, когда выполняется цикл for, он может формировать замыкание, поэтому объект-наблюдатель сохраняется в замыкании.
    • Суть формирования замыкания заключается вВыявление адреса кучи во внутренней области, здесь мы умело используем функции getter/setter, чтобы выставить наблюдателя в цикле for
  • [функция компиляции]: мы проходим DOM от корневого узла вниз, и когда мы встречаем текст в виде усов, мы сопоставляем его со значением, соответствующим data.key, и записываем его в наблюдателе.
    • При переходе к тексту в виде {{xxx}} регулярно сопоставляем переменную в нем и заменяем на значение в data
    • Чтобы удовлетворить последующие реактивные обновления, узел хранится в объекте-наблюдателе, соответствующем ключу, и мы используем функцию получения, чтобы умело манипулировать закрытием.
  • После первого рендеринга страницы последующиеeventLoop, если изменитьkeyЗначение фактически инициирует функцию обновления наблюдателя через установщик для завершения адаптивного обновления.

Полный код для приведенного выше демо-кейса прилагается.гитхаб-адрес 

<!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>

Адрес кода на гитхабе

Категории