利用jquery实现双向数据绑定，网友：哎呦不错哦！

首先我们要明确数据绑定的定义：数据绑定指的是将一个用户界面元素（控件）的属性绑定到一个类型（对象）实例上的某个属性，当对象的属性发生变化时能够同时改变对应的UI。

在不了解原理就直接使用过前端框架的开发者眼中，数据绑定的效果即是某个变量和某个输入框的数据能保持同步，一者变另一者随之改变，这种效果用简单的js语句即可实现，1是当变量改变时将变量赋值给输入框，2是给输入框添加change或input事件。这仅仅是实现数据绑定的基础，真正意义上的数据绑定是封装内部操作过程，做到当变量变化时绑定了该变量的所有元素都自动更新。

目前主流的框架都实现了单向数据绑定，而双向数据绑定不过是在单向数据绑定的基础上，给可输入元素添加change或input事件。

实现数据绑定的方式大致有如下三种：1、观察者模式，2、脏值检查，3、数据劫持。本文采用第一种方式实现数据绑定。观察者模式又名发布-订阅模式，GOF给观察者模式如下定义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

通过jQuery实现数据双向数据绑定的方法就是使用自定义的data属性作为HTML代码中需要绑定的属性，所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。

html代码：

js代码：

以下代码简单的实现一个User模型:

将User模型属性绑定到UI上:

最终输入值会自动映射到user对象的name属性，反之亦然。

自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

加Q Q群：956940552（招募中）

利用jquery实现双向数据绑定，网友：哎呦不错哦！相关推荐

JQuery 类似Vue.js的双向数据绑定器。
类似Vue.js双向数据绑定器.依赖于JQuery. 实时更新数据,兼容IE9以上浏览器. IE8则是失去焦点更新数据. ;(function($) {BindSysnc.pt = BindSysnc ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
JS双向数据绑定的原理介绍
1.双向数据绑定的原理:属性拦截 2.属性拦截实现方式 : 使用Object.defineProperty()将对象的属性变成访问器属性. 3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈 ...
vue 实例化几种方式_Vue双向数据绑定
一.vue实现数据双向绑定的主要是: 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter.getter,在数据变动时发布消息给订阅 ...
vue双向数据绑定的原理
有关双向数据绑定的原理最近两次面试的时候,被问到了vue中双向数据绑定的原理,因为初学不精,只是使用而没有深入研究,所以答不出来.之后就在网上查找了别人写的博客,学习一下. 下面是博客园一篇博客,以 ...
[转]js实现简单的双向数据绑定
转自:http://www.see-source.com/blog/300000038/444 双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然.换种说法,如果我们有一个use ...
vue的双向数据绑定的原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 代码演示:defineProp ...
Angularjs进阶笔记（1）—不同类型的双向数据绑定
[摘要] Angularjs1.X中两种不同的双向数据绑定聊聊 Angularjs1.x中那些活见鬼的事情.一. html与Controller中的双向数据绑定html-Controller的双向数据 ...

利用jquery实现双向数据绑定，网友：哎呦不错哦！

利用jquery实现双向数据绑定，网友：哎呦不错哦！相关推荐

最新文章

热门文章