JavaScript数据双向绑定的简单演示

snifes 发布于2019-08-19 17:57 / 2150人阅读

摘要：对于前端，有时候需要实现视图层和数据层的双向绑定例如当前流行的各种框架和类库。为代表前端数据劫持。参考资料实现数据双向绑定的三种方式谈谈中的双向数据绑定非常简单的双向数据绑定框架三

对于前端，有时候需要实现视图层和数据层的双向绑定(two-way-binding), 例如当前流行的各种框架和类库:Vue.js、Angular.js、React.js。然而，他们最原始的实现方式其实都相对比较简单，只不过是后来随着各种Bug的出现，才一如滚雪球般地被不断优化和壮大。

所以，不要畏惧，多多学习并摄取它们的精华。

这里, 我也希望通过简单的思路让你对数据的双向绑定有个大概了解，然后去看各种MVVM框架中对于数据双向绑定的实现才不会一头雾水。

先复习个知识点 Nodes 和 Elements 的区别

Element继承了Node,而Element是众多Node类型中的其中一个, nodeType === 1, 所以,属于Node的属性可以用于Element，但Element的属性无法用于Node，听起来好拗口，看一下代码吧.


  大
  轰        



var el = document.querySelector(".demo");

// true
console.log(el.children[0] instanceof Node);
// true
console.log(el.children[0] instanceof Element);

// true
console.log(el.childNodes[0] instanceof Node);
// false
console.log(el.childNodes[0] instanceof Element);

// undefined
console.log(typeof el.childNodes[0].children);
// object
console.log(typeof el.childNodes[0].childNodes);

什么是数据和视图的双向绑定？

双向绑定对于理解Flux等架构所提倡的单向数据流特性有很好的帮助, 简单点说，就是将数据的变化绑定到UI, 同时UI的变化又和数据同步。这样一来，假如你是全站Ajax,你不用去管数据对UI的影响,同时也不用去管UI变化造成的数据变化,统一了数据操作的入口,非常方便维护。(不知道这样理解对不对, 望指正)

总而言之，双向数据绑定的底层实现大概有两种:

1、手动绑定,同时使用dirty check去循环监听。(Angular.js为代表)

2、前端数据劫持。(使用defineProperty, Vue.js貌似就是使用这种)

手动绑定循环监听触发（一）

这种方法的实现类似**订阅者模式**,实现思路是通过DOM的*keydown* *keyup* 
*keypress* *change*等事件触发*dirty check*(当然你也可以用setTimeout),
然后循环监听并将value写入某实例变量里面,同时更新DOM。

若是有时间,推荐去看一下Angular.js文档中关于digest / $watch的介绍。

如果使用jQuery实现起来更加简单明了。
传送门在此

https://jsfiddle.net/fondadam/sdxhhoLx/2/embedded/js,html,result

前端数据劫持 (二)

第三种方法则是Vue.js等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。

https://jsfiddle.net/fondadam/a4qhp06s/embedded/js,html,result

参考资料：

javascript实现数据双向绑定的三种方式

谈谈JavaScript中的双向数据绑定

非常简单的js双向数据绑定框架（三）

混合云 idc机房托管双向数据绑定 js双向数据绑定 js双向绑定数据 asp双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79030.html

React+webpack+Antd从0到1开发一个todoMvc

摘要：在装载组件之前调用会组件的构造函数。当实现子类的构造函数时，应该在任何其他语句之前调用设置初始状态绑定键盘回车事件，添加新任务修改状态值，每次修改以后，自动调用方法，再次渲染组件。可以通过直接安装到项目中，使用或进行引用。首先我们看一下我们完成后的最终形态：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

sanyang 2019-08-20 14:47 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（二） --- 框架概览，双向数据绑定，MVC

摘要：本书的这一部分将为随后的章节打下基础，会涵盖模板，模块化，和依赖注入。本书的小例子中我们会使用未经压缩的，开发友好的版本，在的上。作用域也可以针对特定的视图来扩展数据和特定的功能。上一篇：【译】《精通使用AngularJS开发Web App》（一）下一篇：【译】《精通使用AngularJS开发Web App》（三）原版书名：Mastering Web Application D...

geekidentity 2019-08-19 14:26 评论0 收藏0
vue 双向数据绑定的实现学习（一）

摘要：双向数据绑定简言之数据动页面动，页面动，数据动典型的应用就是在做表单时候，输入框的内容改动后，跟该输入框的的值改动。看官网上的这个的演示案例双向数据绑定的好处要说出这个好处的时候，也只有在实际场景中才能对应的显示出来。前言：本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式 ...

anonymoussf 2019-08-23 13:47 评论0 收藏0
父子组件传值及v-model实现通信

摘要：子组件也属于当前实例。监听钩子函数的场景使用的不多，但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。一. 父组件向子组件传值创建parent和child组件，并在parent中注册child组件在父组件调用子组件标签中添加一个自定义属性(msg)， im...

lwx12525 2019-08-23 17:51 评论0 收藏0
一个基于Angular+Ionic+Phonegap的混合APP实战

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。这个项目做得比较早，当时是基于ionic1和angular1做的。做了四个tabs的app，首页模仿携程首页，第二页主要是phonegap调用手机核心功能，第三页模仿微信和qq聊天页，第四页模仿一般手机的表单设...

孙淑建 2019-08-26 11:46 评论0 收藏0