JavaScript简单的双向数据绑定
JavaScript简单的双向数据绑定
别人说我名字很长 发表于10个月前
JavaScript简单的双向数据绑定
  • 发表于 10个月前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

憋说话,看代码

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript简单的双向数据绑定</title>
	<meta charset="utf-8">
</head>
<body>
<input type="text" data-bind-123="name">

<script type="text/javascript">
function DataBinder(object_id){

	//创建一个简单的发布订阅对象
	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",

	//change事件的处理程序
	changeHandler = function(evt){
		var target = evt.target || evt.srcElement,
			prop_name = target.getAttribute(data_attr);

		if(prop_name && prop_name!==""){
			pubSub.publish(message,prop_name,target.value);
		}
	};

	//监听change事件和代理发布订阅对象
	if(document.addEventListener){
		document.addEventListener("change",changeHandler,false);
	}else{
		//IE8使用attachEvent监听事件
		document.attachEvent("onchange",changeHandler);
	}

	//PubSub的更改传播到所有绑定元素
	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;
}

function User(uid){
	var binder = new DataBinder(uid);

	var user = {
		attributes:{},

		//发布变更
		set:function(attr_name,val){
			this.attributes[attr_name] = val;
			binder.publish(uid+":change",attr_name,val,this);
		},

		get:function(attr_name){
			return this.attributes[attr_name];
		},

		_binder:binder
	};

	//订阅pubSub
	binder.on(uid+":change",function(evt,attr_name,new_val,initiator){
		if(initiator!==user){
			user.set(attr_name,new_val);
		}
	});

	return user;
}

var user = new User(123);
user.set("name","hello world");
</script>
</body>
</html>

本文摘自:http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ ,看的太晚了,这哥们12年就写出来了

共有 人打赏支持
粉丝 53
博文 225
码字总数 83765
×
别人说我名字很长
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: