[转]js实现简单的双向数据绑定
转自:http://www.see-source.com/blog/300000038/444
双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地,如果UI包含了一个输入用户姓名的输入框,输入一个新值就应该会使user对象的name属性做出相应的改变。
很多热门的JS框架客户端如Ember.js,Angular.js 或者KnockoutJS ,都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难,也不是说需要这些功能的时候,采用这些框架是唯一的选择。下面的想法实际上很基础,可以被认为是3步走计划:
- 我们需要一个UI元素和属性相互绑定的方法
- 我们需要监视属性和UI元素的变化
- 我们需要让所有绑定的对象和元素都能感知到变化
还是有很多方法能够实现上面的想法,有一个简单有效的方法就是使用PubSub模式。 这个思路很简单:我们使用数据特性来为HTML代码进行绑定,所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时,就会触发绑定到PubSub对象上的事件,从而其他绑定的对象和元素都会做出相应的变化。
用jQuery做一个简单的实现
对于DOM事件的订阅和发布,用jQuery实现起来是非常简单的,接下来我们就是用Jquery比如下面:
1 function DataBinder( object_id ) { 2 // Use a jQuery object as simple PubSub 3 var pubSub = jQuery({}); 4 5 // We expect a `data` element specifying the binding 6 // in the form: data-bind-<object_id>="<property_name>" 7 var data_attr = "bind-" + object_id, 8 message = object_id + ":change"; 9 10 // Listen to change events on elements with the data-binding attribute and proxy 11 // them to the PubSub, so that the change is "broadcasted" to all connected objects 12 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) { 13 var $input = jQuery( this ); 14 15 pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] ); 16 }); 17 18 // PubSub propagates changes to all bound elements, setting value of 19 // input tags or HTML content of other tags 20 pubSub.on( message, function( evt, prop_name, new_val ) { 21 jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() { 22 var $bound = jQuery( this ); 23 24 if ( $bound.is("input, textarea, select") ) { 25 $bound.val( new_val ); 26 } else { 27 $bound.html( new_val ); 28 } 29 }); 30 }); 31 32 return pubSub; 33 }
对于上面这个实现来说,下面是一个User模型的最简单的实现方法:
1 function User( uid ) { 2 var binder = new DataBinder( uid ), 3 4 user = { 5 attributes: {}, 6 7 // The attribute setter publish changes using the DataBinder PubSub 8 set: function( attr_name, val ) { 9 this.attributes[ attr_name ] = val; 10 binder.trigger( uid + ":change", [ attr_name, val, this ] ); 11 }, 12 13 get: function( attr_name ) { 14 return this.attributes[ attr_name ]; 15 }, 16 17 _binder: binder 18 }; 19 20 // Subscribe to the PubSub 21 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) { 22 if ( initiator !== user ) { 23 user.set( attr_name, new_val ); 24 } 25 }); 26 27 return user; 28 }
现在我们如果想要将User模型属性绑定到UI上,我们只需要将适合的数据特性绑定到对应的HTML元素上。
JS代码:
1 var user = new User( 123 ); 2 user.set( "name", "Wolfgang" );
HTML代码:
1 <input type="number" data-bind-123="name" />
不需要jQuery的实现
在如今的大多数项目里,可能已经使用了jQuery,因此上面的例子完全可以接受。不过,如果我们需要试着向另一个极端做,并且还删除对jQuery的依赖,那么怎么做呢?好,证实一下这么做并不难(尤其是在我们限制只支持IE 8及以上版本的情况下)。最终,我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:
1 function DataBinder( object_id ) { 2 // Create a simple PubSub object 3 var pubSub = { 4 callbacks: {}, 5 6 on: function( msg, callback ) { 7 this.callbacks[ msg ] = this.callbacks[ msg ] || []; 8 this.callbacks[ msg ].push( callback ); 9 }, 10 11 publish: function( msg ) { 12 this.callbacks[ msg ] = this.callbacks[ msg ] || [] 13 for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) { 14 this.callbacks[ msg ][ i ].apply( this, arguments ); 15 } 16 } 17 }, 18 19 data_attr = "data-bind-" + object_id, 20 message = object_id + ":change", 21 22 changeHandler = function( evt ) { 23 var target = evt.target || evt.srcElement, // IE8 compatibility 24 prop_name = target.getAttribute( data_attr ); 25 26 if ( prop_name && prop_name !== "" ) { 27 pubSub.publish( message, prop_name, target.value ); 28 } 29 }; 30 31 // Listen to change events and proxy to PubSub 32 if ( document.addEventListener ) { 33 document.addEventListener( "change", changeHandler, false ); 34 } else { 35 // IE8 uses attachEvent instead of addEventListener 36 document.attachEvent( "onchange", changeHandler ); 37 } 38 39 // PubSub propagates changes to all bound elements 40 pubSub.on( message, function( evt, prop_name, new_val ) { 41 var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"), 42 tag_name; 43 44 for ( var i = 0, len = elements.length; i < len; i++ ) { 45 tag_name = elements[ i ].tagName.toLowerCase(); 46 47 if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) { 48 elements[ i ].value = new_val; 49 } else { 50 elements[ i ].innerHTML = new_val; 51 } 52 } 53 }); 54 55 return pubSub; 56 }
除了设置器里调用 jQuery的trigger方法外,模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法:
1 // In the model's setter: 2 function User( uid ) { 3 // ... 4 5 user = { 6 // ... 7 set: function( attr_name, val ) { 8 this.attributes[ attr_name ] = val; 9 // Use the `publish` method 10 binder.publish( uid + ":change", attr_name, val, this ); 11 } 12 } 13 14 // ... 15 }
再次说明一下,我们用一般的纯javascript的少于100行的维护代码获得了同样的结果。
转载于:https://www.cnblogs.com/zhixianyuanyangbuxianxian/p/4128018.html
[转]js实现简单的双向数据绑定相关推荐
- 手写简单的双向数据绑定
github.com/logictuLuoq- 简单介绍一下MVVM MVVM是Model-View-ViewModel的简写 MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI ...
- JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/72999948 ...
- 原生js简单实现双向数据绑定原理
根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...
- 【AngularJs】Angular双向数据绑定
1.什么是双向数据绑定 双向数据绑定: Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面.即数据模型(Module)和视图(View)之 ...
- [Vue源码分析]谷歌翻译后,Vue双向数据绑定失效了?
前言: 最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额. 首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是运营没有通过语言栏 ...
- c语言一次绑定多个控件,一入前端深似海,从此红尘是路人系列第九弹之如何实现一个双向数据绑定...
前言 简单介绍一下双向数据绑定实现的是一个什么样的东西.首先有两个东西,他们分别是: V-视图层 M-数据层 1.视图层传向数据层:V发生改变,M也发生改变 2.数据层传向视图层:M发生改变,V也发生 ...
- vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
- JS双向数据绑定的原理介绍
1.双向数据绑定的原理:属性拦截 2.属性拦截实现方式 : 使用Object.defineProperty()将对象的属性变成访问器属性. 3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈 ...
- js 取得input绑定的datalist中的值_javascript基础修炼(9)——MVVM中双向数据绑定的基本原理...
[小宅按] 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Pag ...
最新文章
- LeetCode实战:环形链表
- 乐迪机器人正确操作_什么是机器人示教器?
- Linux中error while loading shared libraries错误解决办法
- ubuntu 安装 opengl
- How do I sort groups of data items?(WPF)
- gateway调用后台系统时选择RFC的决定逻辑
- PHP Calendar 函数,wordpress函数get_calendar()用法示例
- 搭建配置cacti,采集信息监控
- 大数据_Flink_Java版_数据处理_流处理API_Transform(5)_connect合流---Flink工作笔记0033
- TensorFlow2.0:tensorboard使用
- 六种异常处理的陋习(转自http://www.blogjava.net/freeman1984/archive/2007/09/27/148850.html)...
- django mysql 修改密码_Django更改sqlite数据库使用mysql数据库 - 李金龙
- linux5分钟打印一次的脚本,centos7中crontab定时计划任务5分钟一次命令写法
- h5居中loading_H5样式与布局 --常用居中方法
- hl3150cdn废粉仓清零_常见施乐联想兄弟等打印机加粉清零(废粉仓清零)方法
- 模糊综合评价(清风建模学习笔记)
- 如何下载网页中加了限制的Flash、RM、WMV等视频文件
- RDT 协议 (可靠数据传输协议)
- 应届生,你为什么那么想做产品经理
- 初试Android原生弹窗
热门文章
- Python的构造函数和析构函数,对象和类的不一样
- 不要以为学java,.net或VB的就很牛
- js冒泡排序,简单的冒泡排序
- [Redux/Mobx] 为什么redux能做到局部渲染呢?
- [html] 实现一个居中半透明的模态窗
- [软技能] 请说说使用iconfont图标的优点和缺点
- 前端学习(2868):vue3数据劫持解析3
- [js] 如何判断对象是否属于某个类?
- 工作286:v-model没有值会报错
- 前端学习(2823):sitemap配置