使用proxy来简单的实现一个观察者
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来简单的实现一个观察者的更多相关文章
- Phaser提供了Button对象简单的实现一个按钮
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- 简单的做一个图片上传预览(web前端)
转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- [Design Pattern] Proxy Pattern 简单案例
Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...
- Java通过JDK动态代理简单的实现一个AOP
首先说一下,因为自己还没有去研读spring的AOP的源码,只是大致知道其功能,便想着自己先手动实现一个先看看,觉得这样以后研读源码的时候会收获更多! 实现:做一个在添加注解的方法执行之前,可以先执行 ...
- Proxy:简单小巧又强大好用的代理系统
之前的文章介绍了许多我们在用的DevOps相关的工具系统,例如:方便创建多套运行环境的Alodi,对运维友好的配置中心Kerrigan,强大的自定义任务引擎Probius以及专注于数据库自动化的ove ...
- 对Jena的简单理解和一个例子
本文简单介绍Jena(Jena 2.4),使用Protégé 3.1(不是最新版本)创建一个简单的生物(Creature)本体,然后参照Jena文档中的一个例子对本体进行简单的处理,输出本体中的Cla ...
- swift:用UITabBarController、UINavigationController、模态窗口简单的搭建一个QQ界面
搭建一个QQ界面其实是一个很简单的实现,需要几种切换视图的控制器组合一起使用,即导航控制器.标签栏控制器.模态窗口.其中,将标签栏控制器设置为window的rootViewController,因为Q ...
随机推荐
- 微信小程序开发BUG经验总结
摘要: 常见的微信小程序BUG! 小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家. 1. new Date跨平台兼容性问题 在Andriod使用new Da ...
- 大型Vuex应用程序的目录结构
译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...
- css清楚浮动的class
.clearfix:after { display: table; visibility: hidden; clear: both; height:; content: ''; } 直接在浮动元素的父 ...
- BUGList
Django : a. MySQL数据表还未创建时,不可在视图内直接使用模型类对象,产生报错 django.db.utils.ProgrammingError: (1146, "Table ...
- GIS性能策略
当一个地理平台上线运行,我们经常会遇到这些问题:1.系统刚上线时速度较快,一段时间后访问较慢?2.在地理平台目前的配置下,发布多少个服务才合理?一个服务配置多少个实例数才合适?这些问题,都涉及整个地理 ...
- Backbone.js学习之旅(一)
前言 刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下…… 希望能合您胃口^_^!!! The First(文件准备) backobone 强制依赖于 underscore.j ...
- 项目 插件 -下载- 使用,jar包-下载
插件 -下载- 使用 BootCDN前端开源项目https://www.bootcdn.cn/all/ bootstrap:HTML.CSS 和 JS 框架 插件https://v3.bootc ...
- go xorm增删改查
1.增加 如果传入的bean不是完整的bean,并且传入了地址,则调用结束后会被赋值// InsertOne insert only one struct into database as a rec ...
- [MapReduce_7] MapReduce 中的排序
0. 说明 部分排序 && 全排序 && 采样 && 二次排序 1. 介绍 sort 是根据 Key 进行排序 [部分排序] 在每个分区中,分别进行排序 ...
- apache 80端口占用问题
今天安装mongodb后发现apache无法启动 命令行 services.msc 打开服务 在服务里启动Apache2a服务,报错误码1 网上查有很多情况都报的1 可以通过命令行下 执行apach ...