(四)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的使用:
随机推荐
- js十进制等互相转换
//十进制转其他 var x=110; alert(x); alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16)); / ...
- php知识点总结(待续)
function_exist()如果没有函数,返回空. is_string($str) 如果$str是布尔型的值,返回为空.是返回1,错误返回空is_array() 同上 字符串输出时,加逗号就自动空 ...
- 修改浏览器的User-Agent来伪装你的浏览器和操作系统
近期很多文章都提到了User-Agent (UA) 字符串,但大部分网友都不知道这个东西有什么用处.其实简单的说User-Agent就是客户端浏览器等应用程序使用的一种特殊的网络协议,在每次浏览器(邮 ...
- php如何做数据库攻击
PHP mysql_real_escape_string() 函数 PHP MySQL 函数 定义和用法 mysql_real_escape_string() 函数转义 SQL 语句中使用的字符串中的 ...
- Reaver v1.4 用法整理 含高级参数说明 pin必备资料
闲话少叙 使用方法: airmon-ng start wlan0 //启动mon0监控 reaver -i mon0 -b MAC -a -S -vv //普通用法 如果,90.9%进程后死机或停机, ...
- 一个正整数N,拆成任意个正整数之和,怎样使这些数的乘积最大
网上看到了如标题所示的题目,就开始想如果用程序来算的话,那么它的算法是怎样的. 自己想了半天,第一感觉要用递归, 如先算出 当 n=1 max=1 当 n=2 max=1 当 n=3 max=2 .. ...
- 转:SetWindowText 的用法
SetWindowText 函数功能:该函数改变指定窗口的标题栏的文本内容(如果窗口有标题栏).如果指定窗口是一个控件,则改变控件的文本内容.然而,SetWindowText函数不改变其他应用程序 ...
- UNIQUE NullAble
一般情况 UNIQUE 不应该出现nullable的 但是如果我们要支持也是有办法的,就是写一个filter. https://msdn.microsoft.com/en-us/library/ms1 ...
- BZOJ3403: [Usaco2009 Open]Cow Line 直线上的牛
3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 48 Solved: 41[S ...
- 【转】锋狂百科:手机也能接外设 OTG技术详解
原文网址:http://www.gfan.com/review/2014030346245.html 说到USB数据接口,相信大家并不陌生,在日常使用各类数码产品时我们几乎都会用到它.例如最常用的U盘 ...