轻松实现javascript数据双向绑定
作者:lijiao 发布时间:2024-03-26 20:23:50
双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值。同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变。
许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传。这并不意味着从头开始实现它很难,也不意味着当我们需要这种功能的时候,使用这些框架是我们唯一的选择。内部的潜在思想事实上是相当基础的,实现它可以归纳为以下三点:
我们需要一种方式确定哪个UI元素绑定在哪个属性上。
我们需要监控属性和UI的变化
我们需要把所有绑定的对象和UI元素的变化传播出去。
尽管有好多种方式去实现这几点,一种简单高效的方法是我们通过发布订阅者模式来实现。方法很简单:我们可以使用定制的data属性作为HTML代码中需要绑定的属性。所有的绑定在一起的Javascript对象和DOM元素将会订阅这个发布订阅对象。任何时候我们检测到无论是Javascript对象亦或是HTML的input元素的变化,我们都是把事件代理传递给发布订阅对象,然后通过它把所有发生在绑定的对象和元素的的变化传递和广播出去。
一个用jQuery实现的简单例子
通过jQuery实现我们上面讨论的东西是相当简单明了的,因为作为一个流行的库,它让我们很简单的实现订阅和发布DOM事件,同时我们也可以定制一个:
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 chagne events on elements with data-binding attribute and proxy
// then to the PubSub, so that the change is "broadcasted" to all connected objects
jQuery(document).on("change","[data-]"+data_attr+"]",function(eve){
var $input=jQuery(this);
pubSub.trigger(message,[$input.data(data_attr),$input.val()]);
});
// PubSub propagates chagnes to all bound elemetns,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("")){
$bound.val(new_val);
}else{
$bound.html(new_val);
}
});
});
return pubSub;
}
至于javascript对象,下面是最小化的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 PubSub
binder.on(uid+":change",function(evt,attr_name,new_val,initiator){
if(initiator!==user){
user.set(attr_name,new_val);
}
});
return user;
}
现在,无论何时我们想要绑定一个对象的属性到UI上,我们只要在对应的HTML元素上设置合适的data属性。
// javascript
var user=new User(123);
user.set("name","Wolfgang");
// html
<input type="number" data-bind-123="name" />
input输入框上值得变化会自动的映射到user的name属性,反之亦然。大功告成!
不需要jQuery的实现方式
现在的大部分项目一般jQuery都已经在使用啦,所以上面的例子是完全可以接受的。但是如果我们需要完全不依赖jQuery,那么该怎么实现呢?好吧,事实上其实也不难办到(特别是当我们把对IE的支持只提供IE8以上的支持)。最后,我们只是要通过发布订阅者模式来观察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 = 0, 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, // IE8 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 {
// IE8 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 = 0, 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;
}
数据模型可以保持不变,除了在setter中对jQuery中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完成了我们想要的结果,希望对大家实现javascript数据双向绑定有所帮助。
猜你喜欢
- 背景:实现用python的optimize库的fsolve对非线性方程组进行求解。可以看到这一个问题实际上还是一个优化问题,也可以用之前拟合
- 最近pytorch出了visdom,也没有怎么去研究它,主要是觉得tensorboardX已经够用,而且用起来也十分的简单pip insta
- MyISAM 是MySQL中默认的存储引擎,一般来说不是有太多人关心这个东西。决定使用什么样的存储引擎是一个很tricky的事情,但是还是值
- 最近老板叫做一个数据查重的小练习,涉及从一个包含中文字段的文件中提取出其中的中文字段并存储,使用php开发。中间涉及到php正则表达式中文匹
- import osimport sysimport MySQLdbdef getStatus(conn):  
- 前言Python是C语言实现的,因此Python对象在C语言层面应该是一个结构体 ,组织对象占用的内存。 不同类型的对象,数据及行为均可能不
- 三通道数组转成彩 * 片 img=np.array(img1)img=img.reshape(3,img1.shap
- 一.基本数据类型整数:int字符串:str(注:\t等于一个tab键)布尔值: bool列表:list 列表用[]元祖:tuple元祖用()
- 遇到两次mysql密码忘记了?最开始干了最傻的事,卸载了重装。现在有一个不用卸载也能把密码设置回来的办法。知识来源于网络,我这里稍加整理,遇
- ⭐️ requests的使用(一) 大家好,今天就来说说requests的基础用法。requests是一个很实用的Python H
- breakbreak可以用来立即退出循环语句(包括else)continuecontinue可以用来跳过当次循环注意:break和conti
- zipfile模块是python中一个处理压缩文件的模块,解决了不少我们平常需要处理压缩文件的需求 ,本文主要谈谈zipfile几个常用的用
- 在实际的工作中,尤其是在生产环境里边,SQL语句的优化问题十分的重要,它对数据库的性能的提升也起着显著的作用.我们总是在抱怨机器的性能问题,
- 1 引言形态学运算是针对二值图像依据数学形态学集合论方法发展起来的图像处理的方法.其主要内容是设计一整套的变换概念和算法,用以描述图像的基本
- QQ登录Banner增加了剧情的概念之后,已经推出了春节和情人节两期。这之后设想能围绕Banner做的更加丰富,对传统文化的体现也能更为深入
- 利用Python生成PDF文件时,对比了fpdf和reportlab两个库。fpdf最新更新还是2015年,另外reportlab的资料网上
- 起步在 Django 的模型中新加了一个日期的字段:import datetimeclass Instance(models.Model):
- 本文实例为大家分享了使用XML配置c3p0数据库连接池的具体代码,供大家参考,具体内容如下想通过JDBC来配置c3p0数据库连接池,上网想找
- 引言我们前面的文章介绍了数字和字符串,比如我计算今天一天的开销花了多少钱我可以用数字来表示,如果是整形用 int ,如果是小数用 float
- open(filename,mode,buffer) 其中第一个参数是要打开的文件的文件名,必选;第二个是打开方式,可选;第三个为缓冲区,可