JavaScript实现简单的双向数据绑定

什么是双向数据绑定

双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变。反之,当UI视图改变之后相应的数据也同步改变。

双向数据绑定最常见的应用场景就是表单输入和提交。一般情况下,表单中各个字段都对应着某个对象的属性,这样当我们在表单输入数据的时候相应的就改变对应的对象属性值,反之对象属性值改变之后也反映到表单中。

目前流行的 MVVM 框架(Angular、Vue)都实现了双向数据绑定,这样也就实现了视图层和数据层的分离。相信使用过 jQuery 的人都知道,往往我们在获取到数据之后就直接操作 DOM ,这样数据操作和 DOM 操作就高度耦合在一起了。

实现方式

发布者-订阅者模式

这种实现方式就是使用自定义的 data 属性在 HTML 代码中指明绑定。所有绑定起来的 JavaScript 对象以及 DOM 元素都将 “订阅” 一个发布者对象。任何时候如果 JavaScript 对象或者一个 HTML 输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。具体实现可看这篇文章:http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day

脏值检查

Angularjs(这里特指AngularJS 1.x.x版本,不代表AngularJS 2.x.x版本)双向数据绑定的技术实现是脏值检查。原理就是:Angularjs内部会维护一个序列,将所有需要监控的属性放在这个序列中,当发生某些特定事件时(并不是定时的而是由某些特殊事件触发的,比如:DOM事件、XHR事件等等),Angularjs会调用 $digest 方法,这个方法内部做的逻辑就是遍历所有的 watcher,对被监控的属性做对比,对比其在方法调用前后属性值有没有发生变化,如果发生变化,则调用对应的 handler。

这种方式的缺点很明显,遍历轮训 watcher 是非常消耗性能的,特别是当单页的监控数量达到一个数量级的时候。

访问器监听

vue.js 实现数据双向绑定的原理就是访问器监听。它使用了 ECMAScript5.1(ECMA-262)中定义的标准属性 Object.defineProperty 方法。通过 Object.defineProperty 设置各个属性的 setter,getter,在数据变动时更新UI视图。

实现

本文将采用 访问器监听 这种方式来实现一个简单的双向数据绑定,主要实现:

  • obverse:对数据进行处理,重写相应的 set 和 get 函数
  • complie:解析指令(e-bind、e-model、e-click)等,并在这个过程中对 view 与 model 进行绑定
  • Watcher:作为连接 obversecomplie 的桥梁,用来绑定更新函数,实现对视图的更新

首先看下我们的视图代码:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="赖祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>
    <title>实现简单的双向数据绑定</title>
    <style>
        #app {
            text-align: center;
        }
    </style>
    <script src="eBind.js"></script>
    <script>
        window.onload = function () {
            new EBind({
                el: '#app',
                data: {
                    number: 0,
                    person: {
                        age: 0
                    }
                },
                methods: {
                    increment: function () {
                        this.number++;
                    },
                    addAge: function () {
                        this.person.age++;
                    }
                }
            });
        };
    </script>
</head>
<body>
<div id="app">
    <form>
        <input type="text" e-model="number">
        <button type="button" e-click="increment">增加</button>
    </form>
    <h3 e-bind="number"></h3>
    <form>
        <input type="text" e-model="person.age">
        <button type="button" e-click="addAge">增加</button>
    </form>
    <h3 e-bind="person.age"></h3>
</div>
</body>

从视图代码可以看出,在 <div id="app"> 的子元素中我们应用了三个自定义指令 e-binde-modele-click, 然后我们通过 new EBind({***}) 应用双向数据绑定。

分析

EBind

EBind 构造函数接收应用根元素、数据、方法来初始化双向数据绑定:

function EBind(options) {
    this._init(options);
}

EBind.prototype._init = function (options) {

    // options 为上面使用时传入的结构体,包括 el, data, methods
    this.$options = options;

    // el 是 #app, this.$el 是 id 为 app 的 Element 元素
    this.$el = document.querySelector(options.el);

    // this.$data = {number: 0}
    this.$data = options.data;

    // this.$methods = {increment: function () { this.number++; }}
    this.$methods = options.methods;

    // _binding 保存着 model 与 view 的映射关系,也就是我们定义的 Watcher 的实例。当 model 改变时,我们会触发其中的指令类更新,保证 view 也能实时更新
    this._binding = {};

    // 重写 this.$data 的 set 和 get 方法
    this._obverse(this.$data);

    // 解析指令
    this._complie(this.$el);
};

obverse

_obverse 的关键是使用 Object.defineProperty 来定义传入数据对象的 getter 及 setter,通过 setter 来监听对象属性的变化从而触发 Watcher 中的更新方法。

EBind.prototype._obverse = function (currentObj, completeKey) {
    var _this = this;
    Object.keys(currentObj).forEach(function (key) {
        if (currentObj.hasOwnProperty(key)) {

            // 按照前面的数据,_binding = {number: _directives: [], preson: _directives: [], preson.age: _directives: []}
            var completeTempKey = completeKey ? completeKey + '.' + key : key;
            _this._binding[completeTempKey] = {
                _directives: []
            };
            var value = currentObj[key];

            // 如果值还是对象,则遍历处理
            if (typeof value === 'object') {
                _this._obverse(value, completeTempKey);
            }
            var binding = _this._binding[completeTempKey];

            // 双向数据绑定的关键
            Object.defineProperty(currentObj, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    console.log(key + '获取' + JSON.stringify(value));
                    return value;
                },
                set: function (newVal) {
                    if (value !== newVal) {
                        console.log(key + '更新' + JSON.stringify(newVal));
                        value = newVal;

                        // 当 number 改变时,触发 _binding[number]._directives 中的绑定的 Watcher 类的更新
                        binding._directives.forEach(function (item) {
                            item.update();
                        });
                    }
                }
            });
        }
    })
};

_complie

_complie 的关键是简析自定义指令,根据不同的自定义指令实现不同的功能。如 e-click 就解析为将对应 node 绑定 onclick 事件,e-model 必须绑定在 INPUT 和 TEXTAREA 上,然后监听 input 事件,更改 model 的值,e-bind 就直接将绑定的变量值输出到DOM元素中。

EBind.prototype._complie = function (root) {
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];

        // 对所有元素进行遍历,并进行处理
        if (node.children.length) {
            this._complie(node);
        }

        // 如果有 e-click 属性,我们监听它的 onclick 事件,触发 increment 事件,即 number++
        if (node.hasAttribute('e-click')) {
            node.onclick = (function () {
                var attrVal = node.getAttribute('e-click');

                // bind 是使 data 的作用域与 method 函数的作用域保持一致
                return _this.$methods[attrVal].bind(_this.$data);
            })();
        }

        // 如果有 e-model 属性且元素是 INPUT 和 TEXTAREA,我们监听它的 input 事件,更改 model 的值
        if (node.hasAttribute('e-model') && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA')) {
            node.addEventListener('input', (function (index) {
                var attrVal = node.getAttribute('e-model');

                // 添加指令类 Watcher
                _this._binding[attrVal]._directives.push(new Watcher({
                    name: 'input',
                    el: node,
                    eb: _this,
                    exp: attrVal,
                    attr: 'value'
                }));

                return function () {
                    var keys = attrVal.split('.');
                    var lastKey = keys[keys.length - 1];
                    var model = keys.reduce(function (value, key) {
                        if (typeof value[key] !== 'object') {
                            return value;
                        }
                        return value[key];
                    }, _this.$data);
                    model[lastKey] = nodes[index].value;
                }
            })(i));
        }

        // 如果有 e-bind 属性
        if (node.hasAttribute('e-bind')) {
            var attrVal = node.getAttribute('e-bind');

            // 添加指令类 Watcher
            _this._binding[attrVal]._directives.push(new Watcher({
                name: 'text',
                el: node,
                eb: _this,
                exp: attrVal,
                attr: 'innerHTML'
            }));
        }
    }
};

Watcher

作为连接 _obverse_complie 的桥梁,用来绑定更新函数,通过 update 实现对视图的更新。

function Watcher(options) {
    // options 属性:
    // name 指令名称,例如文本节点,该值设为"text"
    // el 指令对应的DOM元素
    // eb 指令所属EBind实例
    // exp 指令对应的值,本例如"number"
    // attr 绑定的属性值,本例为"innerHTML"
    this.$options = options;
    this.update();
}

/**
 * 根据 model 更新 view
 */
Watcher.prototype.update = function () {
    var _this = this;
    var keys = this.$options.exp.split('.');

    // 比如 H3.innerHTML = this.data.number; 当 number 改变时,会触发这个 update 函数,保证对应的 DOM 内容进行了更新。
    this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
        return value[key];
    }, _this.$options.eb.$data);
};

总结

这样我们就使用原生 JavaScript 实现了简单的双向数据绑定。

源码:https://github.com/laixiangran/e-bind

本文分享自微信公众号 - 前端布道(FontendPreach)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏雪胖纸的玩蛇日常

vue学习(3)

webpack:打包机,它能将我们的html、css、js,font,png进行打包,交给服务器。

23820
来自专栏从零开始学自动化测试

Selenium+python自动化82-只截某个元素的图

前言 selenium截取全图小伙伴们都知道,曾经去面试的时候,面试官问:如何截图某个元素的图?不要全部的,只要某个元素。。。小编一下子傻眼了, 苦心人,天不负...

54240
来自专栏黒之染开发日记

【easeljs】事件汇总

文章说明:为了方便我自己查找easeljs的所有事件,所以我从easeljs的文档里抄过来加上自己的翻译,会慢慢补全,漏了的,错了的,评论一下我会补上去哦。(不...

15220
来自专栏小樱的经验随笔

【亲测有效】Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer i

我在开发游戏的时候,发现一个python脚本,本来都运行好好的,然后写了几行代码,而且也都确保每行都对齐了,但是运行的时候,却出现语法错误:  Indentat...

34050
来自专栏软件开发

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

31870
来自专栏GreenLeaves

Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(functio...

1K50
来自专栏我的博客

XML和PHP

1、XML知识 Xml就是可扩展标记语言与html一样,都是通用标记语言。 用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允...

37770
来自专栏web前端教室

[每周日-先行者课堂笔记] -- react版的倒计时实现

image.png 各位同学们大家好,今天是4月9号周日,今天我们继续来做“倒计时”这个前端组件。之前我们是使用原生js来实现的,其实更多的只是实现了功能。 这...

45170
来自专栏木制robot技术杂谈

常用命令行快捷键

19150
来自专栏阮一峰的网络日志

CSS Modules 用法教程

学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法。 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言。从...

30550

扫码关注云+社区

领取腾讯云代金券