实现非常简单的js双向数据绑定


Posted in Javascript onNovember 06, 2015

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个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比如下面:

function DataBinder( object_id ) {
 // Use a jQuery object as simple PubSub
 var pubSub = jQuery({});
 // We expect a `data` element specifying the binding
 // in the form: data-bind-<object_id>="<property_name>"
 var data_attr = "bind-" + object_id,
  message = object_id + ":change";
 // Listen to change events on elements with the data-binding attribute and proxy
 // them to the PubSub, so that the change is "broadcasted" to all connected objects
 jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
 var $input = jQuery( this );
 pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
 });
 // PubSub propagates changes to all bound elements, setting value of
 // input tags or HTML content of other tags
 pubSub.on( message, function( evt, prop_name, new_val ) {
 jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
  var $bound = jQuery( this );
  if ( $bound.is("input, textarea, select") ) {
  $bound.val( new_val );
  } else {
  $bound.html( new_val );
  }
 });
 });
 return pubSub;
}

对于上面这个实现来说,下面是一个User模型的最简单的实现方法:

function User( uid ) {
 var binder = new DataBinder( uid ),
  user = {
  attributes: {},
  // The attribute setter publish changes using the DataBinder PubSub
  set: function( attr_name, val ) {
   this.attributes[ attr_name ] = val;
   binder.trigger( uid + ":change", [ attr_name, val, this ] );
  },
  get: function( attr_name ) {
   return this.attributes[ attr_name ];
  },
  _binder: binder
  };
 // Subscribe to the PubSub
 binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
 if ( initiator !== user ) {
  user.set( attr_name, new_val );
 }
 });
 return user;
}

现在我们如果想要将User模型属性绑定到UI上,我们只需要将适合的数据特性绑定到对应的HTML元素上。

// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );
// html
<input type="number" data-bind-123="name" />

这样输入值会自动映射到user对象的name属性,反之

亦然。到此这个简单实现就完成啦!

不需要jQuery的实现

在如今的大多数项目里,可能已经使用了jQuery,因此上面的例子完全可以接受。不过,如果我们需要试着向另一个极端做,并且还删除对jQuery的依赖,那么怎么做呢?好,证实一下这么做并不难(尤其是在我们限制只支持IE 8及以上版本的情况下)。最终,我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:

function DataBinder( object_id ) {
 // Create a simple PubSub object
 var pubSub = {
  callbacks: {},
  on: function( msg, callback ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || [];
   this.callbacks[ msg ].push( callback );
  },
  publish: function( msg ) {
   this.callbacks[ msg ] = this.callbacks[ msg ] || []
   for ( var i = , len = this.callbacks[ msg ].length; i < len; i++ ) {
   this.callbacks[ msg ][ i ].apply( this, arguments );
   }
  }
  },
  data_attr = "data-bind-" + object_id,
  message = object_id + ":change",
  changeHandler = function( evt ) {
  var target = evt.target || evt.srcElement, // IE compatibility
   prop_name = target.getAttribute( data_attr );
  if ( prop_name && prop_name !== "" ) {
   pubSub.publish( message, prop_name, target.value );
  }
  };
 // Listen to change events and proxy to PubSub
 if ( document.addEventListener ) {
 document.addEventListener( "change", changeHandler, false );
 } else {
 // IE uses attachEvent instead of addEventListener
 document.attachEvent( "onchange", changeHandler );
 }
 // PubSub propagates changes to all bound elements
 pubSub.on( message, function( evt, prop_name, new_val ) {
 var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
  tag_name;
 for ( var i = , len = elements.length; i < len; i++ ) {
  tag_name = elements[ i ].tagName.toLowerCase();
  if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
  elements[ i ].value = new_val;
  } else {
  elements[ i ].innerHTML = new_val;
  }
 }
 });
 return pubSub;
}

除了设置器里调用 jQuery的trigger方法外,模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法:

// In the model's setter:
function User( uid ) {
 // ...
 user = {
 // ...
 set: function( attr_name, val ) {
  this.attributes[ attr_name ] = val;
  // Use the `publish` method
  binder.publish( uid + ":change", attr_name, val, this );
 }
 }
 // ...
}

我们又一次通过一百行不到,又可维护的纯javascript完成了我们想要的结果。

以上内容就是关于js双向数据绑定的相关教程,希望对大家学习有所帮助。

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
浅析javascript中的事件代理
Nov 06 #Javascript
详解javascript中的事件处理
Nov 06 #Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 #Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 #Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 #Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
聊天室php&amp;mysql(五)
2006/10/09 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
python同时遍历两个list用法说明
2020/05/02 Python
英语自我评价范文
2014/01/24 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
催款函范文
2015/06/24 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
《日月潭》教学反思
2016/02/20 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL