文档章节

JavaScript简单的双向数据绑定

别人说我名字很长
 别人说我名字很长
发布于 2016/12/10 10:51
字数 315
阅读 20
收藏 1

憋说话,看代码

<!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年就写出来了

本文转载自:http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

共有 人打赏支持
别人说我名字很长
粉丝 56
博文 258
码字总数 108335
作品 0
济南
程序员
私信 提问
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0
JavaScript 实现简单的双向数据绑定

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了...

aiasfina
2013/07/08
24.2K
5
Git@OSC 项目推荐 —— bingoJS 前端框架,文档巨详细

大家经常吐槽国内很多开源项目文档非常简陋,不少项目的确如此,包括我自己的项目,有时候就是给自己很多借口,懒得去完善文档。 但是今天在 Git@OSC 上看到 bingoJS 这个项目,着实让我非常...

红薯
2015/06/05
7.7K
35
收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,...

VanMess
2018/05/08
0
0
HIJK 0.4 发布,自动化JavaScript WebAPI开发包

HIJK是一个自动化的WebAPI开发包,全程使用JavaScript语言,只需要写一个标准JavaScript函数,复制到 js/目录下,就会自动加载为 WebAPI, 可以通过HTTP提供网络服务,同时支持最新的WebSock...

iBoxDB
2014/07/14
2.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
1
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部