概述

今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(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. Android应用开发中，第三方集成新浪微博（sinaWeiboSDK）的过程记录

    作为一个android开发人员,不可避免的要学会使用和集成第三方API的能力 而新浪微博作为现在最主要的新闻速递媒体,使用十分普遍,并且提供了较为详细的API接入方法,故此选择集成sinaWeibiS ...

  2. ReactiveX 学习笔记（24）使用 RxCpp + C++ REST SDK 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  3. React Native在window下的环境搭建（一）

    React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...

  4. JAVA四则运算（读写文件）

    完成时间:17:10 package 四则运算试题; import java.io.BufferedReader; import java.io.PrintStream; import java.ut ...

  5. elasticsearch template

    # curl -XPUT localhost:9200/_template/template_1 -d '{"template" : "te*","s ...

  6. Handler相关

    1.延迟方法 Message msg = new Message(); msg.what = 0x111; // netWorkHandler.sendMessage(msg);   //延迟方法三 ...

  7. mysql查询语句中自定义变量（转）

    转:http://blog.sina.com.cn/s/blog_1512521570102wrfl.htmlselect cost,@a:=@a+1 from testone,(select @a: ...

  8. [leetcode]62. Unique Paths 不同路径

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  9. JAVA初学者的JDB 尝试

    使用JDB调试简单递归程序 跟着娄老师的博客学习, 首先在终端使用Ctrl+Shift+T打开三个标签,方便操作. 使用Vim编辑自己的程序,练习程序如下 1 public class Factori ...

  10. iOS10 UIImageWriteToSavedPhotosAlbum程序奔溃crash解决办法

    Xcode报错: This app has crashed because it attempted to access privacy-sensitive data without a usage ...