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 对象数据观察者实现的更多相关文章

  1. MVC 从控制器将数据对象赋值给前端JS对象

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  2. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  3. JSON(JS 对象简谱,一种数据交换格式)

    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 存储和表示数据的文本格式 层次结构清晰.简洁 JSON是一个序列化的对象或数组 1.js ...

  4. JS对象复制

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

  5. JSON与js对象序列化

    JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语 ...

  6. zoeDylan.js框架-数据底层

    zoeDylan.js是墨芈自己写的一套前端框架,不过由于墨芈经验不足,所以框架内部代码有些混乱. 墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩. 这套 ...

  7. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  8. jquery对象与js对象的相互转换

    jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...

  9. JS对象与json字符串格式

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. 通过api获取句柄控制其他窗体

    很多时候,编写程序模拟鼠标和键盘操作可以方便的实现你需要的功能,而不需要对方程序为你开放接口.比如,操作飞信定时发送短信等.我之前开发过飞信耗子,用的是对飞信协议进行抓包,然后分析协议,进而模拟协议的 ...

  2. Tomcat源码(一):整体架构

    由于tomcat的组件较多,处理流程比较复杂 ,这里是 由浅到深来解释tomcat的整体架构 1.首先应该大致了解下tomcat的 /conf/server.xml  配置文件:在tomcat启动的时 ...

  3. Python3.6引入的f-string 与 Python 3的新的特性:类型注解;

    f-string 1.介绍 f-string(formatted string literals):格式化字符串常量,是Python3.6新引入的一种字符串格式化方法,使格式化字符串的操作更加简便. ...

  4. Java-代理模式的理解

    引言 设计模式是语言的表达方式,它能让语言轻便而富有内涵.易读却功能强大.代理模式在Java中十分常见,有为扩展某些类的功能而使用静态代理,也有如Spring实现AOP而使用动态代理,更有RPC实现中 ...

  5. hasattr(object, name)

    查看object有没name属性 有返回True 没有返回 False

  6. ionic基础知识

    ion-header-bar(头部 页眉) 在内容顶部添加一个固定header栏. 用法 <ion-header-bar align-title="left" class=& ...

  7. getLong not implemented for class oracle.jdbc.driver.T4CRowidAccessor

    症状: SpringMVC+MyBatis向数据库插入数据,主键应用ORACLE中自己设置的自增序列会发生如下错误: nested exception is Java.sql.SQLException ...

  8. error C2955: “std::xx”: 使用 类 模板 需要 模板 参数列表

    一般出现这个错误 最可能是一种情况 queue q;//这样写 这样写肯定错 [笑哭] queue<int> q; //正确的 我想静静了

  9. Linux 高级安全SELinux的关闭

    Linux有一个高级安全组件,如果开启会输出打了的日志文件messages.如下: 导致/var/log/messages 达到11g root@cpp11 ~]# df -l文件系统         ...

  10. 论文阅读 | CornerNet:Detecting Objects as Paired Keypoints

    论文地址:https://arxiv.org/abs/1808.01244v1 论文代码:https://github.com/umich-vl/CornerNet 概述 CornerNet是一篇发表 ...