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. [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader

    上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做成圆角矩形 例3:圆角矩形Shader好吧我承认在做这个例子的时候走了不少弯路,由于本人对矩 ...

  2. XSSFWorkbook实现导出excel

    1.pom.xml中加入poi依赖: <!-- poi -->        <dependency>            <groupId>org.apache ...

  3. OCP 12c最新考试原题及答案(071-4)

    4.(4-11) choose two:View the Exhibit and examine the data in the PRODUCT_INFORMATION table.Which two ...

  4. 【maven】---pom.xml-dependencies

    前言 Maven在做项目开发的时候,需要用到多个jar包,这个时候,maven提供的中央仓库,就会根据依赖项,自动download需要的jar包,自动引用到项目中. 内容 具体依赖配置,集中在pom. ...

  5. PHP删除一个目录下的所有文件,不删除文件夹

    /*删除指定目录下的文件,不删除目录文件夹*/ function delFile($dirName){ if(file_exists($dirName) && $handle=open ...

  6. [AIR] 对存储器(Storage Volume)监听

    AIR 2.0及以上提供了对系统的存储器信息访问和监听的API.通过这些API,你不仅可以访问到硬盘文件系统,同时还可以监听通过USB或火线进行连接的移动存储设备,例如移动硬盘和以存储方式连接到计算机 ...

  7. [Swift]扩展String类:extension String

    请参考本博客另一篇技术博文: <[Swift]字符串(String类.NSString类)常用操作> extension String { //获取字符串首字符 var first: St ...

  8. Web App三年将取代原生App?

    从技术角度讲,html5现在是可以获取很多用户的资源,上传提交服务器,与用户进行交互.但是你可以观察一下PC或Mac,web网页发展了这么长时间了,取代了客户端了吗? 对于现在而言,html5虽已可以 ...

  9. HashSet存储过程中如何排除不同的自定义对象?

    HashSet HashSet存储过程中如何排除不同的自定义对象? 先看一个小demo public class Demo1 { public static void main(String[] ar ...

  10. dynamics crm 365 附件上传图片并且显示。

    参考了几篇博客做的: 新增websource文件(html): <!DOCTYPE html> <html> <head> <title>注释</ ...