（四）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();})}
}

1 Observable.add(function() {
2     console.log(1);
3 })
4 Observable.add(function() {
5     console.log(2);
6 })

发布

Observable.fire();     // 1, 2

实际应用

实际业务中，如请求某个ajax后需要执行多个方法，数据处理、渲染页面、其他业务等，可以使用观察者

 1 Observable.add(function() {
 2   //pocessData
 3 })
 4
 5 Observable.add(function() {
 6   $('test').html(data.a)
 7   $('test2').html(data.b)
 8   $('test3').html(data.c)
 9 })
10
11 Observable.add(function() {
12   //pocessOther
13 })
14
15 $.ajax({
16   url: "test.html",
17   context: document.body
18 }).done(function(data) {
19   Observable.fire(data)
20 })

转载于:https://www.cnblogs.com/huair_12/p/4175549.html

（四）JS学习笔记 - 模式 - 观察者模式相关推荐

Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...

（四）JS学习笔记 - 模式 - 观察者模式

理解观察者模式

观察者的使用场合

模拟实现

实际应用

（四）JS学习笔记 - 模式 - 观察者模式相关推荐

最新文章

热门文章