(四)JS学习笔记 - 模式 - 观察者模式
理解观察者模式
简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者。
观察者的使用场合
当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。
例如,用户A,B,C分别订阅某服务,当服务有更新是可设定更新、下载等操作。
模拟实现
定义Observable对象,其内部包含了2个方法:add(订阅)与fire(发布)方法
// 观察者
var Observable = {
callbacks: [],
add: function(fn) {
this.callbacks.push(fn);
},
fire: function() {
this.callbacks.forEach(function(fn) {
fn();
})
}
}
订阅
Observable.add(function() {
console.log(1);
})
Observable.add(function() {
console.log(2);
})
发布
Observable.fire(); // 1, 2
实际应用
实际业务中,如请求某个ajax后需要执行多个方法,数据处理、渲染页面、其他业务等,可以使用观察者
Observable.add(function() {
//pocessData
})
Observable.add(function() {
$('test').html(data.a)
$('test2').html(data.b)
$('test3').html(data.c)
})
Observable.add(function() {
//pocessOther
})
$.ajax({
url: "test.html",
context: document.body
}).done(function(data) {
Observable.fire(data)
})
(四)JS学习笔记 - 模式 - 观察者模式的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- 《Linux内核设计与实现》第四章学习笔记
<Linux内核设计与实现>第四章学习笔记 ——进程调度 姓名:王玮怡 学号:20135116 一.多任务 1.多任务操作系统的含义 多任务操作系统就是能同时并发地交 ...
- 《Linux内核设计与实现》第四章学习笔记——进程调度
<Linux内核设计与实现>第四章学习笔记——进程调 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- Node.js学习笔记(1):Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
- .net防止刷新重复提交(转)
net 防止重复提交 微软防止重复提交方案,修改版 Code ; i < cookie.Values.Count; i++) log.Info(" ...
- JS函数定义与匿名函数的调用
一.函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字 声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName ...
- Sicily connect components in undirected graph
题目介绍: 输入一个简单无向图,求出图中连通块的数目. Input 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n<=1000,0<=m<=10000. 以 ...
- Android上传文件之FTP
android客户端实现FTP文件(包括图片)上传应该没什么难度.写下来就了为了记录一下,望能帮到新手. 需要用到 commons-net-3.0.1.jar,后面附上jar包. 直接上代码: /** ...
- nosql newsql
http://www.cnblogs.com/end/archive/2011/10/19/2217244.html http://www.csdn.net/article/2011-09-26/30 ...
- 用javascript向一个网页连接接口发送请求,并接收该接口返回的json串
一般前端与后端的互交都是通过json字符串来互交的,我的理解就是与网页接口的来回数据传递采用的数据结构就是json.一般是这样. 比如后端的代码是这样的: @RequestMapping(value ...
- 2015第29周二AOP
1.问题:想要添加日志记录.性能监控.安全监测 2.最初解决方案 2.1.最初解决方案:在每个需要的类函数中重复写上面处理代. 缺点:太多重复代码,且紧耦合 2.2.抽象类进行共性设计,子类进行个性设 ...
- Java正则表达式详解教程
public class Test { private static Scanner scanner; public static void main(String[] args) { scanner ...
- 将汉字转为UTF-8编码
01./** 02. * 将文件名中的汉字转为UTF8编码的串,以便下载时能正确显示另存的文件名. 03. * @param s 原文件名 04. * @return 重新编码后的文件名 05. */ ...
- HDU5125--magic balls(LIS)
题意:求a数组的LIS,但是加了一个条件,为了LIS最大 b[i] a[i]可以交换.最多交换mci: 赤果果的dp啊,可是这个题用线段树的话却会TLE,,由于查询的只是1-x的最大值 因此我们可以用 ...