利用 JavaScript 数据绑定实现一个简单的 MVVM 库

时间 2019-11-05

标签利用 javascript 数据绑定实现一个简单 mvvm 栏目 JavaScript 繁體版

原文原文链接

MVVM 是 Web 前端一种很是流行的开发模式，利用 MVVM 可使咱们的代码更专一于处理业务逻辑而不是去关心 DOM 操做。目前著名的 MVVM 框架有 vue, avalon , angular 等，这些框架各有千秋，可是实现的思想大体上是相同的：数据绑定 + 视图刷新。出于好奇和一颗愿意折腾的心，我本身也沿着这个方向写了一个最简单的 MVVM 库 ( mvvm.js )，总共 2000 多行代码，指令的命名和用法与 vue 类似，在这里分享一下实现的原理以及个人代码组织思路。javascript

思路整理

MVVM 在概念上是真正将视图与数据逻辑分离的模式，ViewModel 是整个模式的重点。要实现 ViewModel 就须要将数据模型（Model）和视图（View）关联起来，整个实现思路能够简单的总结成 5 点：html

实现一个 Compiler 对元素的每一个节点进行指令的扫描和提取；前端
实现一个 Parser 去解析元素上的指令，可以把指令的意图经过某个刷新函数更新到 dom 上（中间可能须要一个专门负责视图刷新的模块）好比解析节点 <p v-show="isShow"></p> 时先取得 Model 中 isShow 的值，再根据 isShow 更改 node.style.display 从而控制元素的显示和隐藏;vue
实现一个 Watcher 能将 Parser 中每条指令的刷新函数和对应 Model 的字段联系起来；java
实现一个 Observer 使得可以对对象的全部字段进行值的变化监测，一旦发生变化时能够拿到最新的值并触发通知回调；node
利用 Observer 在 Watcher 中创建一个对 Model 的监听，当 Model 中的一个值发生变化时，监听被触发，Watcher 拿到新值后调用在步骤 2 中关联的那个刷新函数，就能够实现数据变化的同时刷新视图的目的。git

效果示例

首先粗看下最终的使用示例，与其余 MVVM 框架的实例化大同小异：github

<div id="mobile-list">
    <h1 v-text="title"></h1>
    <ul>
        <li v-for="item in brands">
            <b v-text="item.name"></b>
            <span v-show="showRank">Rank: {{item.rank}}</span>
        </li>
    </ul>
</div>

var element = document.querySelector('#mobile-list');
var vm = new MVVM(element, {
    'title'   : 'Mobile List',
    'showRank': true,
    'brands'  : [
        {'name': 'Apple', 'rank': 1},
        {'name': 'Galaxy', 'rank': 2},
        {'name': 'OPPO', 'rank': 3}
    ]
});

vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

模块划分

我把 MVVM 分红了五个模块去实现：编译模块 Compiler 、解析模块 Parser 、视图刷新模块 Updater 、数据订阅模块 Watcher 和数据监听模块 Observer 。流程能够简述为：Compiler 编译好指令后将指令信息交给解析器 Parser 解析，Parser 更新初始值并向 Watcher 订阅数据的变化，Observer 监测到数据的变化而后反馈给 Watcher ，Watcher 再将变化结果通知 Updater 找到对应的刷新函数进行视图的刷新。数组

上述流程如图所示：浏览器

下文就介绍下这五个模块实现的基本原理（代码只贴重点部分，完整的实现请到个人 Github 翻阅）

1. 编译模块 Compiler

Compiler 的职责主要是对元素的每一个节点进行指令的扫描和提取。由于编译和解析的过程会屡次遍历整个节点树，因此为了提升编译效率在 MVVM 构造函数内部先将 element 转成一个文档碎片形式的副本 fragment 编译对象是这个文档碎片而不该该是目标元素，待所有节点编译完成后再将文档碎片添加回到原来的真实节点中。

vm.complieElement 实现了对元素全部节点的扫描和指令提取：

vm.complieElement = function(fragment, root) {
    var node, childNodes = fragment.childNodes;
    // 扫描子节点
    for (var i = 0; i < childNodes.length; i++) {
        node = childNodes[i];
        if (this.hasDirective(node)) {
            this.$unCompileNodes.push(node);
        }
        // 递归扫描子节点的子节点
        if (node.childNodes.length) {
            this.complieElement(node, false);
        }
    }
    // 扫描完成，编译全部含有指令的节点
    if (root) {
        this.compileAllNodes();
    }
}

vm.compileAllNodes 方法将会对 this.$unCompileNodes 中的每一个节点进行编译（将指令信息交给 Parser ），编译完一个节点后就从缓存队列中移除它，同时检查 this.$unCompileNodes.length 当 length === 0 时说明所有编译完成，能够将文档碎片追加到真实节点上了。

2. 指令解析模块 Parser

当编译器 Compiler 把每一个节点的指令提取出来后就能够给到解析器解析了。每个指令都有不一样的解析方法，全部指令的解析方法只要作好两件事：一是将数据值更新到视图上（初始状态），二是将刷新函数订阅到 Model 的变化监测中。这里以解析 v-text 为例描述一个指令的大体解析方法：

parser.parseVText = function(node, model) {
    // 取得 Model 中定义的初始值 
    var text = this.$model[model];
    // 更新节点的文本
    node.textContent = text;
    // 对应的刷新函数：
    // updater.updateNodeTextContent(node, text);
    
    // 在 watcher 中订阅 model 的变化
    watcher.watch(model, function(last, old) {
        node.textContent = last;
        // updater.updateNodeTextContent(node, text);
    });
}

3. 数据订阅模块 Watcher

上个例子，Watcher 提供了一个 watch 方法来对数据变化进行订阅，一个参数是模型字段 model 另外一个是回调函数，回调函数是要经过 Observer 来触发的，参数传入新值 last 和旧值 old , Watcher 拿到新值后就能够找到 model 对应的回调（刷新函数）进行更新视图了。model 和刷新函数是一对多的关系，即一个 model 能够有任意多个处理它的回调函数（刷新函数），好比：v-text="title" 和 v-html="title" 两个指令共用一个数据模型字段。

添加数据订阅 watcher.watch 实现方式为：

watcher.watch = function(field, callback, context) {
    var callbacks = this.$watchCallbacks;

    if (!Object.hasOwnProperty.call(this.$model, field)) {
        console.warn('The field: ' + field + ' does not exist in model!');
        return;
    }

    // 创建缓存回调函数的数组
    if (!callbacks[field]) {
        callbacks[field] = [];
    }
    // 缓存回调函数
    callbacks[field].push([callback, context]);
}

当数据模型的 field 字段发生改变时，Watcher 就会触发缓存数组中订阅了 field 的全部回调。

4. 数据监听模块 Observer

Observer 是整个 mvvm 实现的核心基础，看过有一篇文章说 O.o (Object.observe) 将会引爆数据绑定革命，给前端带来巨大影响力，不过很惋惜，ES7 草案已经将 O.o 给废弃了！目前也没有浏览器支持！所幸的是还有 Object.defineProperty 经过拦截对象属性的存取描述符(get 和 set) 能够模拟一个简单的 Observer :

// 拦截 object 的 prop 属性的 get 和 set 方法
Object.defineProperty(object, prop, {
    get: function() {
        return this.getValue(object, prop);
    },

    set: function(newValue) {
        var oldValue = this.getValue(object, prop);
        if (newValue !== oldValue) {
            this.setValue(object, newValue, prop);
            // 触发变化回调
            this.triggerChange(prop, newValue, oldValue);
        }
    }
});

而后还有个问题就是数组操做 ( push, shift 等) 该如何监测？全部的 MVVM 框架都是经过重写该数组的原型来实现的：

observer.rewriteArrayMethods = function(array) {
    var self = this;
    var arrayProto = Array.prototype;
    var arrayMethods = Object.create(arrayProto);
    var methods = 'push|pop|shift|unshift|splice|sort|reverse'.split('|');
    
    methods.forEach(function(method) {
        Object.defineProperty(arrayMethods, method, function() {
            var i = arguments.length;
            var original = arrayProto[method];
            
            var args = new Array(i);
            while (i--) {
                args[i] = arguments[i];
            }
            
            var result = original.apply(this, args);

            // 触发回调
            self.triggerChange(this, method);

            return result;
        });
    });
    
    array.__proto__ = arrayMethods;
}

这个实现方式是从 vue 中参考来的，以为用的很妙，不过数组的 length 属性是不可以被监听到的，因此在 MVVM 中应避免操做 array.length

5. 视图刷新模块 Updater

Updater 在五个模块中是最简单的，只须要负责每一个指令对应的刷新函数便可。其余四个模块通过一系列的折腾，把最后的成果交给到 Updater 进行视图或者事件的更新，好比 v-text 的刷新函数为：

updater.updateNodeTextContent = function(node, text) {
    node.textContent = text;
}

v-bind:style 的刷新函数：

updater.updateNodeStyle = function(node, propperty, value) {
    node.style[propperty] = value;
}

双向数据绑定的实现

表单元素的双向数据绑定是 MVVM 的一个最大特色之一：

其实这个神奇的功能实现原理也很简单，要作的只有两件事：一是数据变化的时候更新表单值，二是反过来表单值变化的时候更新数据，这样数据的值就和表单的值绑在了一块儿。

数据变化更新表单值 利用前面说的 Watcher 模块很容易就能够作到：

watcher.watch(model, function(last, old) {
    input.value = last;
});

表单变化更新数据 只须要实时监听表单的值得变化事件并更新数据模型对应字段便可：

var model = this.$model;
input.addEventListenr('change', function() {
    model[field] = this.value;
});

其余表单 radio, checkbox 和 select 都是同样的原理。

以上，整个流程以及每一个模块的基本实现思路都讲完了，语言表达能力不太好，若有说的不对写的很差的地方，但愿你们可以批评指正！

结语

折腾这个简单的 mvvm.js 是由于原来本身的框架项目中用的是 vue.js 可是只是用到了它的指令系统，一大堆功能只用到四分之一左右，就想着只是实现 data-binding 和 view-refresh 就够了，结果没找这样的 javascript 库，因此我本身就造了这么一个轮子。

虽然说功能和稳定性远不如 vue 等流行 MVVM 框架，代码实现可能也比较粗糙，可是经过造这个轮子仍是增加了不少知识的 ~ 进步在于折腾嘛！

目前个人 mvvm.js 只是实现了最本的功能，之后我会继续完善、健壮它，若有兴趣欢迎一块儿探讨和改进~

源代码传送门: https://github.com/tangbc/sugar