理解观察者模式

简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者。

观察者的使用场合

当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。

例如,用户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学习笔记 - 模式 - 观察者模式的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  3. 《Linux内核设计与实现》第四章学习笔记

    <Linux内核设计与实现>第四章学习笔记           ——进程调度 姓名:王玮怡  学号:20135116 一.多任务 1.多任务操作系统的含义 多任务操作系统就是能同时并发地交 ...

  4. 《Linux内核设计与实现》第四章学习笔记——进程调度

                                                                        <Linux内核设计与实现>第四章学习笔记——进程调 ...

  5. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  6. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

  7. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  8. Node.js学习笔记(1):Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. apache配置多站点

    在httpd.conf文件中,有如下配置(注:舍去httpd.conf文件的注释内容) Listen 80 ServerName localhost <Directory /> Allow ...

  2. PHPCMS V9 简单的二次开发

    更多二次开发技巧,查看phpcms系统帮助 ,前台模板解析后的缓存 caches\caches_template\default 前台控制类index.php,前台标签类*_tag.class.php ...

  3. 【结构型】Decorate模式

    装饰模式主要意图是为对象扩展额外的职责,但对于用户来说,在使用行为上并没有任何的变化.在此举一个例子来解释该模式的含义.假如你手上有一张照片,此时可以给它盖上一片玻璃片,同时再套上一个精美的相框.如此 ...

  4. string string.h=cstring=str

    <string.h> <string.h>是C版本的头文件,包含比如strcpy.strcat之类的字符串处理函数. <cstring> 在C++标准化(1998年 ...

  5. static变量的使用

    静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在静态存储区内分配存储单元),该区域中的数据在整个程序的运行期间一直占用这些存储空间(在程序整个运行期间 ...

  6. SQL Server 与 Entity Framework 级联删除

    SQL Server 级联设置我就不多说了,网上很多教程. 我想提的是 cycles or multiple cascade paths 的问题. 简单的说如果你的级联设置不是一个树型,而是一个带有循 ...

  7. 3个QT新闻网,2个发烧友网站

    http://planet.qt.io/ http://blog.basyskom.com/2015/introducing-qtopcua/ http://www.qtworldsummit.com ...

  8. COJ 0981 WZJ的数据结构(负十九)树综合

    WZJ的数据结构(负十九) 难度级别:E: 运行时间限制:3500ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 WZJ的数据结构中有很多都是关于树的.这让很多练习 ...

  9. Linux企业级项目实践之网络爬虫(29)——遵守robots.txt

    Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以 ...

  10. CSS(三)

    CSS又上完了,真是快!!! 预习了JS的一部分,写了几条简单的JS代码: 1.成绩判定: <!DOCTYPE html> <html lang="en"> ...