MVVM的简单实现

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
        })
    }
}

function observe (obj, vm) {
    //Object.keys返回索引，比如传入对象时{'a':1,'b':2}=>['a','b']
    Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
    });
}
function defineReactive (obj, key, val) {
    var dep = new Dep();
    //Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
    //三个参数分别为要在其上定义属性的对象、要定义或修改的属性的名称、将被定义或修改的属性描述符
    Object.defineProperty(obj, key, {
        get: function () {
            if (Dep.target) dep.addSub(Dep.target);
            return val
        },
        set: function (newVal) {
            if (newVal === val) return
            val = newVal;
            dep.notify();
        }
    });
}
function nodeToFragment (node, vm) {
    var flag = document.createDocumentFragment();
    var child;
    while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child);
    }
    return flag;
}
function compile (node, vm) {
    var reg = /\{\{(.*)\}\}/;
    // 节点类型为元素
    if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析属性
        for (var i = 0; i < attr.length; i++) {
            if (attr[i].nodeName == 'v-model') {
                var name = attr[i].nodeValue; // 获取v-model绑定的属性名
                node.addEventListener('input', function (e) {
                    // 给相应的data属性赋值，进而触发该属性的set方法
                    vm[name] = e.target.value;
                });
                node.value = vm[name]; // 将data的值赋给该node
                node.removeAttribute('v-model');
            }
        }
        new Watcher(vm, node, name, 'input');
    }
    // 节点类型为text
    if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
            var name = RegExp.$1; // 获取匹配到的字符串
            name = name.trim();
            new Watcher(vm, node, name, 'text');
        }
    }
}

function Watcher (vm, node, name, nodeType) {
    //  this为watcher函数
    Dep.target = this;
    //  console.log(this);
    this.name = name;
    this.node = node;
    this.vm = vm;
    this.nodeType = nodeType;
    this.update();
    Dep.target = null;
}
Watcher.prototype = {
    update: function () {
        this.get();
        if (this.nodeType == 'text') {
            this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
            this.node.value = this.value;
        }
    },
    // 获取data中的属性值
    get: function () {
        this.value = this.vm[this.name]; // 触发相应属性的get
    }
}
function Dep () {
    this.subs = []
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};
function Vue (options) {
    this.data = options.data;
    var data = this.data;
    observe(data, this);
    var id = options.el;
    var dom = nodeToFragment(document.getElementById(id), this);
    // 编译完成后，将dom返回到app中
    document.getElementById(id).appendChild(dom);
}
var vm = new Vue({
    el: 'app',
    data: {
        text: 'hello world'
    }
});