文档章节

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
博文 255
码字总数 105359
作品 0
济南
程序员
私信 提问
angular js 自学笔记(一)

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

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

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

VanMess
05/08
0
0
说说 Vue.js 实例及数据绑定能力

1 创建实例 通过 Vue() 构造函数就可以创建一个 Vue 的根实例: 1.1 el 选项 el 选项用于绑定页面中的某个 DOM 元素。它可以是 HTMLElement 或是 CSS 选择器。 在上例中: HTMLElement 方式为...

deniro
09/23
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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 懒床是对冬天最起码的尊重

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念 :分享daniwellP/桃音モモ的单曲《Nyan Cat》 《Nyan Cat》- daniwellP/桃音モモ 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪...

小小编辑
35分钟前
7
1
码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部