文档章节

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/

共有 人打赏支持
别人说我名字很长
粉丝 55
博文 254
码字总数 103692
作品 0
济南
程序员
angular js 自学笔记(一)

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

烽穹寒渊
2015/03/09
0
0
收藏好这篇,别再只说“数据劫持”了

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

VanMess
05/08
0
0
VC模式下javascript项目重构

项目现状 项目为单页web应用,只针对chrome浏览器,无开发文档。由于是追求进度的项目,开发约定极少,除了jquery、LAB.js、bootstrap以及一些UI组件外,没有使用其他开源组件。 项目简单封装...

lost_o0
2014/05/07
0
2
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
06/21
0
0
vitual-dom原理与简单实现

前言 目前广为人知的React和Vue都采用了virtual-dom,Virtual DOM凭借其高效的diff算法,让我们不再关心性能问题,可以随心所欲的修改数据状态。在实际开发中,我们并不需要关心Virtual DOM...

B_Cornelius
07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C++ std::function 和 std::bind

C++11提供了std::function和std::bind两个工具,用于引用可调用对象。这些可调用对象包括 普通函数,Lambda表达式,类的静态成员函数,非静态成员函数以及仿函数等。引用可调用对象,可以用于...

yepanl
今天
1
0
python:可迭代对象的索引

关于 python的range的用法: 注意是[ 开始,结束)的半开区间,不包括结束 http://www.runoob.com/python/python-func-range.html import collectionsfrom collections import Iterable字符串......

Oh_really
今天
2
0
docker-compose ,docker-stack

1.例子 version: "3"services: php: image: registry.cn-hangzhou.aliyuncs.com/lxepoo/apache-php5 ports: - "38080:80" networks: - my_php_mysql volum......

chenbaojun
今天
3
0
SQL_Server2000示例数据库NorthWind的分析(转)

SQL_Server2000示例数据库NorthWind的分析 表名:Categories(食品类别表) 表结构: 字段名称 数据类型 长度 允许为空 CategoryID(主键) int 4 否 CategoryName nvarchar 15 否 Description ...

QQZZFT
今天
1
0
laravel 5.5 Session store not set on request.

laravel 5.5 数据存入session,会出现Session store not set on request.错误。查了下laravel 5.5将session放到global middleware中,需要laravel的文件 ./app/Http/Kernel.php中的加上一句:...

MichaelShu
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部