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 ...
随机推荐
- Linux--多用户登录服务器端口抓包
以root身份登录1.新建用户组用命令groupadd test2.添加用户useradd -d /home/test/bei_1 -s /bin/sh -g test -m bei_1此命令新建了一 ...
- leetcode 18 4Sum JAVA
题目 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出 ...
- lua 5.3 英文手册 google机器翻译版
LUA Lua 5.3参考手册作者:Roberto Ierusalimschy,Luiz Henrique de Figueiredo,Waldemar Celes 版权所有©2015-2018 Lu ...
- 洛谷P4337 [ZJOI2018]线图(状压+搜索+乱搞)
题面 传送门 题解 妈呀调了我整整一天-- 题解太长了不写了可以去看\(shadowice\)巨巨的 //minamoto #include<bits/stdc++.h> #define ...
- Linux CentOs 下 安装 mysql nginx redis
SCP 的使用 来源于: https://blog.csdn.net/qq_30968657/article/details/72912070 scp [参数] <源地址(用户名@IP地址或主机 ...
- npm淘宝镜像和默认镜像切换
1.得到原本的镜像地址 npm get registry > https://registry.npmjs.org/ 设成淘宝的 npm config set registry http://r ...
- 使用bootstrap-table插件
1.用户提交信息过滤表格内容: a.设置表格查询参数,并在用户提交按钮时候更新表格 <form id="current_table" class="form-inl ...
- 进阶篇:4.4)DFA设计指南:面向高速自动化装配设计
本章目标:更进一步,设计出符合高速自动化装配的零件. 1.前言 中国的人口红利时代正在慢慢地过去,这是事实.同时,机器换人与大自动化的时代也在到来. 在这个时代中,人工成本越来越高,零部件的装配和库存 ...
- springboot(十)-监控应用
微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...
- 原来部署好的WCF(可以调用),因为部署.net core,而安装了DotNetCore.2.0.5-WindowsHosting,导致现在WCF站点不可以。
报错如下: 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 解决方法: 如果出现如下结果,则证明可以啦.