文档章节

JavaScript简单的双向数据绑定

别人说我名字很长
 别人说我名字很长
发布于 2016/12/10 10:51
字数 315
阅读 18
收藏 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年就写出来了

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

共有 人打赏支持
别人说我名字很长
粉丝 55
博文 246
码字总数 97330
作品 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
JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro
05/30
0
0
Angular学习心得之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的。但是这显然不符...

lee1994522
2015/05/01
0
12
AngularJS Directive 隔离 Scope 数据交互

什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能...

Edens_Song
2015/07/27
0
0
Vue学习系列一 —— MVVM响应式系统的基本实现原理

MVVM是什么 MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。 Model负责用JavaScript对象表示,View负责UI界面显示,两者做到了最大限度的分离。 而把Model和View关联...

浩3108
05/23
0
0
AngularJS页面加载闪烁解决方案

AngularJS这个大杀器使得实现SPA(Single Page App)变得异常的简单,其双向绑定让页面内容的重新渲染无需编写大量JS代码,无需构造DOM字符串丑陋的,作为需要快速迭代,提高用户体现的下一代...

空心大白菜
2015/05/07
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
3分钟前
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
5分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
7分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
8分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
11分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
12分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
16分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
17分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
18分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部