js 对象数据观察者实现
var observer = function (originalData) {
var newData = {};
newData.observer = {};
newData.$data = {};
for (var key in originalData) {
(function (key) {
newData.$data[key] = originalData[key];
Object.defineProperty(newData, key, {
set: function (val) {
newData.$data[key] = val;
this.dispatch(key, val);
},
get: function () {
return newData.$data[key];
}
});
newData.observer[key] = [];
})(key);
}
newData.on = function (key, callback) {
newData.observer[key].push(callback);
};
newData.dispatch = function (key, val) {
for (var i in newData.observer[key]) {
newData.observer[key][i](val);
}
};
return newData;
};
var data = observer({age: 1, name: 'mahuan'});
data.on('name', function (val) {
console.log('hello, ' + val);
});
data.on('age', function (val) {
console.log('oh, you are ' + val);
});
data.name = "mahuan";
data.age = 3;
hello, mahuan
oh, you are 3
js 对象数据观察者实现的更多相关文章
- MVC 从控制器将数据对象赋值给前端JS对象
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- JSON(JS 对象简谱,一种数据交换格式)
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 存储和表示数据的文本格式 层次结构清晰.简洁 JSON是一个序列化的对象或数组 1.js ...
- JS对象复制
在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...
- JSON与js对象序列化
JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语 ...
- zoeDylan.js框架-数据底层
zoeDylan.js是墨芈自己写的一套前端框架,不过由于墨芈经验不足,所以框架内部代码有些混乱. 墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩. 这套 ...
- 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...
- jquery对象与js对象的相互转换
jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...
- JS对象与json字符串格式
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- [HNOI2003]消防局的设立(树上距离为k的最小覆盖问题)
题目的大概意思现在有一棵树,在树上找半径小于等于2的最小覆盖点的最小个数. 题目链接 讲一讲此类题的贪心策略: 就是每次寻找最低没有被覆盖的点,显然对于覆盖它的所有点中,在他的祖先处设立一个点最优.所 ...
- 《锋利的jQuery 第二版》chapter 1~
chapter 1 认识 jQuery jquery.js(开发版),jquery.min.js(生产版) window.onload 与 $(document).ready() 的对比: jquer ...
- AOP之 Filter实用
前言 开心一笑~~~ 一个年轻的程序员和一个项目经理登上了一列在山里行驶的火车,他们发现列车上几乎都坐满了,只有两个在一起的空位,这个空位的对面是一个老奶奶和一个年轻漂亮的姑娘.两个上前坐了下来.程序 ...
- logstash--使用ngxlog收集windows日志
收集流程 1nxlog => 2logstash => 3elasticsearch 1. nxlog 使用模块 im_file 收集日志文件,开启位置记录功能 2. nxlog 使用模块 ...
- CF765F Souvenirs 离线+线段树+主席树
$ \color{#0066ff}{ 题目描述 }$ A县旁,连绵着一条长度为 n 的山脉,这条山脉由 n 座山峰组成,第 i 座山 峰的高度为 ai.作为著名的旅游县城,每天来到山脉游玩的旅客络绎不 ...
- 扩展欧拉定理【洛谷P4139】 上帝与集合的正确用法
P4139 上帝与集合的正确用法 \(2^{2^{2^{\dots}}}\bmod p\) 卡最优解倒数第一祭. 带一下扩展欧拉定理就好了. code: #include <iostream&g ...
- js的常用方法和对象学习
js的常用方法和对象学习String对象:操作字符的. 使用:字符串.函数名. 大小写转换: toUpperCase() 转换大写 toLowerCase() 转换小写 function testSt ...
- weex 自定义Component
扩展iOS的功能 ~ Component 与UI控件相关 ,即通过原生方法创建UI界面,返回给weex 使用 一. 新建 WXComponent 的子类 在子类实现WXComponent 的 ...
- java web 工程创建及servlet简单使用
1.java web工程创建 (1)File--->new--->project (2)选择java enterprise,按照下图操作 (3)点击next后,会进入如下界面,修改工程名后 ...
- Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)
关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...