MVVM 的实现

2019-04-11 本文已影响137人一俢

什么是 MVVM

百度一下：MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

提前了解一些知识

Object.definePropery

在 JavaScript 中 Object.definePropery(obj, prop, descriptor) 这个方法可以定义活着修改原有属性的特性（当然它也可以监听对象中的某个属性值的变化），很多前端 MVVM 框架都会用到这个方法来实现数据的双向绑定。

obj 是必需要传递的目标对象；
prop 需要定义或者修改的属性名称；
descriptor 目标属性所拥有的特性；
- value：设置属性的值；
- writable：值是否可写（true | false）；
- enumerable：属性是否可被枚举（true | false）；
- configurable：属性是否可以被删除或是否可以再次修改特性（true | false）；
- getter：获得属性值的方法；
- setter：设置属性值的方法；

观察者模式

观察者模式属于设计模式中的行为型模式，又称作：发布/订阅模式，它可以让多个观察者对象同时监听某一个主题对象，当这个主题对象发生变化时，会通知所有观察者对象，使它们能够自动更新自己。

注：设计模式中的三大类————创建型模式、结构型模式、行为型模式

解决问题：

订阅者和观察者之间的解耦：订阅者所知道的只是一个具体观察者列表，每个具体观察者都符合一个抽象观察者的接口，订阅者并不认识任何一个具体观察者，它只知道它们都有一个共同的接口；
支持广播通讯：订阅者会向所有注册过的观察者发出通知；

简单实现

function Dep () {
    this.subs = [];
}

Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        })
    }
}

function Watcher(name) {
    this.name = name;
}

Watcher.prototype = {
    update: function() {
        console.log('I am ' + this.name);
    }
}

var dep = new Dep();
var watcher1 = new Watcher('jay');
var watcher2 = new Watcher('min');
dep.addSub(watcher1);
dep.addSub(watcher2);
dep.notify();

DocumentFragment

DocumentFragment 表示文档片段，它不属于 DOM 树，但是它可以存储 DOM，并且可以将所存储的 DOM 加入到指定的 DOM 节点中去。那么有人要问了，那要它何用，直接把元素加入到 DOM 中不就可以了吗？用它的原因在于，使用它操作 DOM 要比直接操作 DOM 性能要高很多(需要测试？)。

var st = new Date().getTime();

for (var i = 0; i < 1000; i++) {
    var div = document.createElement('div');
    div.innerText = 'div: ' + i;
    document.body.append(div);
}

console.log(new Date().getTime() - st);

var st = new Date().getTime();

var fragmet = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var div = document.createElement('div');
    div.innerText = 'div: ' + i;
    fragmet.append(div);
}
document.body.append(fragmet);

console.log(new Date().getTime() - st);

MVVM 的实现

原理

mvvm.png

这个 MVVM 的实现，是通过 Observer、Dep、Watcher、Complie 四个组件组成，它们相互关联，相互影响，最终形成了数据的双向绑定功能：

通过 Observer 来监听 data 的数据变化，并且提供了订阅某个数据变化的能力；
通过 Complie 来编辑 HTML 模版成 Document Fragment，然后解析其中的特殊标记（绑定的数据）；
最后通过 Watcher 将

Observer

Observer 模块会自动的将 data 中的所有属性增加 getter 和 setter，让其具备监听对象属性变化的能力：

function observe(obj, vm) {
    Object.keys(obj).forEach(function(key) {
        defineReactive(vm, key, obj[key]);
    });
}

function defineReactive(obj, key, val) {
    var dep = new Dep();

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

Dep

Dep 和 Watcher 是简单的观察者模式的实现，Dep 相当于一个订阅者，它会管理所有的观察者，并且有给观察者发送消息的能力：

function Dep () {
    this.subs = [];
}

Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        })
    }
}

Watcher

Watcher 相当于一个观察者，当接收到订阅者的消息后，观察者会做出自己的更新操作：

function Watcher(vm, node, name, nodeType) {
    Dep.target = 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;
        }
    },
    get: function () {
        this.value = this.vm[this.name];
    }
}

Complie

Complie 具备将 HTML 模版解析成 Document Fragment 的能力，并且会创建响应的 Watcher，让视图中绑定的数据产生变化：

function nodeToFragment(node, vm) {
    var flag = document.createDocumentFragment();
    var child;

    while(child = node.firstChild) {
        compile(child, vm);
        console.log(child);
        
        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;
                node.addEventListener('input', function(e) {
                    vm[name] = e.target.value;
                });
                node.value = vm[name];
                node.removeAttribute('v-model');
            }
        }

        new Watcher(vm, node, name, 'input');
    }
    else if(node.nodeType === 3) {
        if(reg.test(node.nodeValue)) {
            var name = RegExp.$1;
            name = name.trim();

            new Watcher(vm, node, name, 'text');
        }
    }
}

MVVM 构造函数

当 MVVM 对象初始化的时候会做两件事情：监听 data 所有属性的变化；解析 HTML 模版：

function MVVM(options) {
    this.data = options.data;
    var data = this.data;

    observe(data, this);

    var id = options.el;
    var dom = nodeToFragment(document.getElementById(id), this);

    document.getElementById(id).appendChild(dom);
}

var mv = new MVVM({
    el: 'app',
    data: {
        msg: 'hello world'
    }
});

〖坚持的一俢〗

MVVM 的实现

什么是 MVVM

提前了解一些知识

Object.definePropery

观察者模式

解决问题：

简单实现

DocumentFragment

MVVM 的实现

原理

Observer

Dep

Watcher

Complie

MVVM 构造函数

猜你喜欢

热点阅读