实现非常简单的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 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
js有序数组的连接问题
Oct 01 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
vue webpack打包优化操作技巧
Feb 22 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
配置php网页显示各种语法错误
2013/09/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
python语言中有算法吗
2020/06/16 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
元旦获奖感言
2014/03/08 职场文书
房屋委托书范本
2014/04/04 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
环保建议书100字
2014/05/14 职场文书
公司授权委托书范文
2014/08/02 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
女儿满月酒致辞
2015/07/29 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫