概述

今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其中用Object.defineProperty的(vue)特别简单,今天顺便记录下供以后开发时参考,相信对其他人也有用.

我参考了这篇文章:Vue.js双向绑定的实现原理.

类似双向绑定的效果

其实用事件代理就可以实现类似双向绑定的效果,原理是当检测到数据改动时会触发一个keyup事件或者表单的change事件,通过监听这个事件做出响应,对应改变dom的内容.

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<input type="text" id="a">

<span id="b"></span>

<script>

  var b = document.getElementById('b');

  document.addEventListener('keyup', function (e) {

    b.innerText = e.target.value;

  });

</script>

</body>

</html>

通过在输入框里面输入内容,内容会在右边同步显示或改变.

需要注意的是,react其实是一种单向数据流,那么怎么用react实现双向绑定呢?就是用的这个原理!

可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):

Document

<script>

var b = document.getElementById('b');

document.addEventListener('keyup', function (e) {

b.innerText = e.target.value;

});

</script>

vue的双向绑定

但是所谓双向绑定,所谓MVC,所谓MVVM,都强调的是数据的改变,数据(model)即是MVC里面的M,所以我们在双向绑定中必须有数据(model).怎么加进去呢?

原理就是getter和setter函数,重写setter函数,使数据改变的同时进行一些其它的操作(改变视图),在视图改变的时候触发事件改写数据.

而怎么把数据和setter结合在一起呢?那就是利用Object.defineProperty方法,给对象定义一个属性(数据),同时重写setter方法.

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<input type="text" id="a">

<span id="b"></span>

<script>

  var obj = {};

  Object.defineProperty(obj, 'hello', {

    set: function (newVal) {

      document.getElementById('a').value = newVal;

      document.getElementById('b').innerText = newVal;

    }

  });

  document.addEventListener('keyup', function (e) {

    obj.hello = e.target.value;

  });

</script>

</body>

</html>

可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):

Document

<script>

var obj = {};

Object.defineProperty(obj, 'hello', {

set: function (newVal) {

document.getElementById('a').value = newVal;

document.getElementById('b').innerText = newVal;

}

});

document.addEventListener('keyup', function (e) {

obj.hello = e.target.value;

});

</script>

vue中的双向绑定的更多相关文章

  1. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  2. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  3. 利用JS实现vue中的双向绑定

    Vue 已经是主流框架了 它的好处也不用多说,都已经是大家公认的了 那我们就来理解一下Vue的单向数据绑定和双向数据绑定 然后再使用JS来实现Vue的双向数据绑定 单向数据绑定 指的是我们先把模板写好 ...

  4. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  5. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  6. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

随机推荐

  1. 解决:win10在空白处右键资源管理器重启的故障

    一,查看windows日志 win+R,输入eventvwr,打开事件查看器,展开左边Windows日志,双击圆形红底白色感叹号图标所在的行． 查找错误模块名称． 对比图标和名称,这是＂飞鸽传书＂的安 ...

  2. Hibernate 再接触 总结

  3. jq 切换功能toggle

    ---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...

  4. MFC---关于string.h相关函数

    1.在VS2005中使用strcpy.strcat.sprintf出现如:mfc中'strcpy' was declared deprecated警告 这是因为VS2005中认为CRT中的一组函数如果 ...

  5. 配置MQTT服务器

    第一步:下载一个Xshell 链接:https://pan.baidu.com/s/16oDa5aPw3G6RIQSwaV8vqw 提取码:zsb4 打开Xshell 前往MQTT服务器软件下载地址: ...

  6. 动态加载、移除js、css

    本文简单介绍动态加载.移除.替换js/css文件 .有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率.下面贴出代码.//JS写法 <s ...

  7. 651. 4 Keys Keyboard复制粘贴获得的最大长度

    ［抄题］: Imagine you have a special keyboard with the following keys: Key 1: (A): Print one 'A' on scre ...

  8. 452. Minimum Number of Arrows to Burst Balloons扎气球的个数最少

    ［抄题］: There are a number of spherical balloons spread in two-dimensional space. For each balloon, pr ...

  9. ios tableView的header高度不对

    tableView的header高度不对,一般都是header是从xib加载出来的 第一步: 新建xib的时候选择的是View,当选择 Size 为 Freeform 时,view的约束就变成这样了, ...

  10. 为什么说Redis是单线程的以及Redis为什么这么快！

    参考文章:https://blog.csdn.net/xlgen157387/article/details/79470556 redis简介 Redis是一个开源的内存中的数据结构存储系统,它可以用 ...