var obv = (function() {

            var cache = new Map();

            var observe = function (proxy, fn) {
if (!cache.has(proxy)) {
cache.set(proxy, []);
};
cache.get(proxy).push(fn);
}; var observData = function(obj) {
return new Proxy(obj, {
set: function(target, key, value, receiver) {
var old = target[key];
if (old !== value) {
var result = Reflect.set(target, key, value, receiver);
var arr = cache.get(receiver);
arr && arr.forEach(function(observer) {
return observer.call(target, key, value, old);
});
return result;
};
}
});
}; return {
observe: observe,
observData: observData
};
}());

使用姿势:

1.使用

obv.observData

监听一个数组或者一个对象;

2.然后使用

obv.observe

来监听回调函数,第一个参数就是Proxy的实例,第二个参书就是其对应的回调
        var person = obv.observData({
name: '徐志伟',
age: 26
}); var pp = obv.observData({
personality: '哈哈',
abc: '去屎'
}); var dd = obv.observData([1, 2, 3, 4]); function print(key, value, old) {
console.log(key, value, old);
};
function print2(key, value, old) {
console.log(key, value, old);
}; obv.observe(dd, print);
obv.observe(dd, print2);
// person.name = '徐志伟1';
// pp.personality = '斤斤计较军军军军';
dd[0] = "111";

使用proxy来简单的实现一个观察者的更多相关文章

  1. Phaser提供了Button对象简单的实现一个按钮

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  2. java————数组 简单写出一个管理系统

    数组的特点 1,  数组是一块连续的空间,下标描述空间的位置. 2,  下标从0开始,最大下标为数组长度—1.(*.length-1) 3,  数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...

  3. 简单的做一个图片上传预览(web前端)

    转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...

  4. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  5. [Design Pattern] Proxy Pattern 简单案例

    Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...

  6. Java通过JDK动态代理简单的实现一个AOP

    首先说一下,因为自己还没有去研读spring的AOP的源码,只是大致知道其功能,便想着自己先手动实现一个先看看,觉得这样以后研读源码的时候会收获更多! 实现:做一个在添加注解的方法执行之前,可以先执行 ...

  7. Proxy:简单小巧又强大好用的代理系统

    之前的文章介绍了许多我们在用的DevOps相关的工具系统,例如:方便创建多套运行环境的Alodi,对运维友好的配置中心Kerrigan,强大的自定义任务引擎Probius以及专注于数据库自动化的ove ...

  8. 对Jena的简单理解和一个例子

    本文简单介绍Jena(Jena 2.4),使用Protégé 3.1(不是最新版本)创建一个简单的生物(Creature)本体,然后参照Jena文档中的一个例子对本体进行简单的处理,输出本体中的Cla ...

  9. swift:用UITabBarController、UINavigationController、模态窗口简单的搭建一个QQ界面

    搭建一个QQ界面其实是一个很简单的实现,需要几种切换视图的控制器组合一起使用,即导航控制器.标签栏控制器.模态窗口.其中,将标签栏控制器设置为window的rootViewController,因为Q ...

随机推荐

  1. windows使用笔记-安装64位windows7家庭普通版的方法

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 从msdn网站:http://msdn.itellyou.cn/ 下载<cn_windows_7_ultimate_wit ...

  2. python小练习:用户三次登陆, 购物车

    2018.12.1 周末练习: 1.用户三次登陆 from random import randint i = 1 while i < 4: num = 0 verify_code = '' w ...

  3. Ajax的实现及使用-zepto

    正文 之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于 ...

  4. BeanFactory和ApplicationContext的比较

    1.BeanFactory实例化后,不会马上实例化Bean:ApplicationContext在实例化后紧跟着就会实例化Bean 2.ApplicationContext还实现了ResourceLo ...

  5. svn下已add文件如何忽略

    正如官方指南所言:TortoiseSVN → Unversion and add to ignore list,取消版本控制并添加至忽略列表. http://www.cnblogs.com/huang ...

  6. 记录C/C++中遇到的一些小问题

    1. printf 比如 char a = \x90; printf("%02x", a); 想输出为90,没想到却是ffffff90,这个问题害我一个程序老是出错 最终发现只要改 ...

  7. MailKit帮助类

    public class EmailHelp { /// <summary> /// Smtp服务器地址 /// </summary> private static reado ...

  8. sql server 如何查询出数据库作业所有者的信息并完成批量替换

    今天数据库对入职一年的我建立了独立的数据库账号,之前我是和其他同事共享的,之前的所有者账号被废弃了,这时导致很多数据库作业执行失败. 下面是说明如何把之前所有的作业的所有者替换成正在使用的账号: 下面 ...

  9. LCD显示异常分析——开机闪现花屏【转】

    转自LCD显示异常分析--开机闪现花屏 最近在工作中,有同事遇到LCD开机瞬间会闪现雪花屏的问题,而这类问题都有个共同点,那就是都发生在带GRAM的屏上,同样的问题,在休眠唤醒时也会出现. 其实这类问 ...

  10. .net core 导出Excel(epplus 创建excel )

    [Route("getopenfrequencyexcel")] [HttpGet] public IActionResult GetOpenFrequencyExcel(int ...