深入理解Javascript中的观察者模式


Posted in Javascript onFebruary 20, 2017

简介

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。讲道理,如果我们写的不是稍微底层的代码,可能不会用到它。 但是有了它会让代码更灵活,更加规整,减少冗余代码,方便分模块,分功能开发。

使用观察者模式的好处:

  1. 支持简单的广播通信,自动通知所有已经订阅过的对象。
  2. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
  3. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

引入

在前端业务中,可能用的比较多的地方可能就是自定义事件了。
其实浏览器的事件也是观察者模式

div.onclick = function click() {
 console.log('click')
}

这里function click 订阅了 div 的click 事件,当我们的鼠标点击操作,事件发布,对应的function就会执行。这个function click 就是一个观察者。

具象化理解

其实单纯的看代码实现,也可以理解。但是万物都是有联系的,这些编程模式设计之初也是来源于生活经验吧,所以,具象的理解也是很重要的体验。

我们举一个结婚办酒席的例子。比如你的一个好朋友要结婚了,'结婚'这件事情不是天天发生,一辈子就那么一… 两次(maybe more),所以我们的'去参加他的婚礼'肯定不是天天发生,只是在特定的时候。我肯定不能天天去问他,'今天你结婚吗,我来参加酒席啊'。一次两次还行,天天问,sb啊。假如是一个找不到对象的单身汪,被你天天这么问,还不得杀了你。。

那这里就需要有一个事件发布了,也就是'通知你'。

我作为一个观察者,去订阅他'结婚' 的这个事件,就是我们是好朋友,他的婚礼我肯定去,我们已经说好了。那么我就是观察者,'我去参加婚礼'就是对应而来的动作。当我订阅了'结婚' 这个事件,我就不需要天天去问他了,我该干嘛干嘛,该去泡妞,约饭,看电影,约… 就干嘛。

当他发布'结婚' 这个事件,通知到我了,我就在特定的时候,去do'参加婚礼酒席'这个行为function …

//模拟代码
//我订阅了'marry' 事件
wo.on('marry',function(){
 //去参加婚礼酒席
})
//然后他发布。比如浏览器的点击
// 对应的我的 function就会执行

解耦/模块/功能

其实在代码中是需要一个类似于中间服务的,管理发布订阅的中间者。

比如浏览器中的事件处理程序,他提供了订阅的接口,然后接收'事件' 信号 发布给你。让js代码跟浏览器之间有了联系,互动。而本来是两个不同的东西。

在我看来,观察者模式最大的好处就是在于解耦,会让我们一锅端的代码,分功能,分模块的抽离开,更加清晰,开发成本变低,也容易维护。

比如:

1、我们项目里的view 展示层跟model(数据处理)逻辑层,最开始写页面,ajax,字符串拼接,请求回一个接口拼一下,然后给dom。可能我们一个js文件,一个function里面又请求了接口,又去负责 view 的展示。

var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 divs.innerHTML = '<p>' + this.response + '</p>'
 //
 }
 }
 xhr.responseType = 'json'
 xhr.send(null)

其实应该是请求跟 展示渲染分开的。

//请求
function getData () {
 var xhr = new XMLHttpRequest ()
 xhr.open('get',url)
 xhr.onreadystatechange = function () {
 if(this.readyState !== 4) return
 if(this.status === 200) {
 this.emit('渲染')
 // 发布
 }
 }
 xhr.responseType = 'json'
 xhr.send(null)
}
//渲染
function view () {}
xhr.on('渲染',view)

直接在状态码200那里放个callback,也能做到。但是,如果我有两个甚至渲染函数,处理不同的东西,我每次还要改成不同的函数吗。 这个相同请求的过程是不是还要写一遍。

用观察者的话

function view1 () {}
function view2 () {}
function view3 () {}
function view4 () {}
if(我要渲染view1) {
 xhr.on('渲染',view1) //订阅
 xhr.on('渲染',view2)
}else{
 xhr.on('渲染',view3)
 xhr.on('渲染',view4)
}

好处就在于我的getData这个功能,方法就只负责请求数据,然后他会暴露一个接口,供我去添加方法。这样我的getData 就相对来说是比较完整的功能模块,就算我有再多的情况,我的getData 里面的代码是不会改动的了。

有时候我们经常为了实现业务,添加一个新的功能,而去更改我们之前写好的代码,导致我们本来的功能模块被改的面目全非。

而且会有好多的重复代码。

过程? or 模块?

当然封好一个 好的完整的功能模块是挺难的一件事情,但我们起码要有个开始。

订阅去添加方法,发布了事件池就执行。

2、MV* 类框架

MVC也是一种设计模式,这里面也都应用了观察者。

他内部也都是各种发布订阅,好像是一个观察者模型,从而实现了一个模拟的内存中的dom改变,计算出那个DOM节点应该改变。当然具体实现要做好多事情…就不…

3、redux

简单实现一个createstore函数

//这是一个工厂函数,可以创建store
const createStore = (reducer) => {
 let state; // 定义存储的state
 let listeners = [];
 // getState的作用很简单就是返回当前是state
 const getState = ()=> state;
 //定义一个派发函数
 //当在外界调用此函数的时候,会修改状态
 const dispatch = (action)=>{
 //调用reducer函数修改状态,返回一新的状态并赋值给这个局部状态变量
 state = reducer(state,action);
 //依次调用监听函数,通知所有的监听函数
 listeners.forEach(listener => listener());
 }
 //订阅此状态的函数,当状态发生变化的时候记得调用此监听函数
 const subscribe = function(listener){
 //先把此监听 加到数组中
 listeners.push(listener);
 //返回一个函数,当调用它的时候将此监听函数从监听数组移除
 return function(){
  listeners = listeners.filter(l => l != listener);
 }
 }
 //默认调用一次dispatch给state赋一个初始值
 dispatch();
 return {
 getState,
 dispatch,
 subscribe
 }
}
let store = createStore(reducer);
//把数据渲染到界面上
const render = () => {
 document.body.innerText = store.getState();
}
// 订阅状态变化事件,当状态变化时用监听函数
store.subscribe(render);
render();
var INCREASE_ACTION = {type: 'INCREMENT'};
document.addEventListener('click', function (e) {
 //触发一个Action
 store.dispatch(INCREASE_ACTION);
})

4、在node 中的作用 大多数时候我们不会直接使用 EventEmitter,而是在对象中继承它。包括fs、net、 http 在内的,只要是支持事件响应的核心模块都是 EventEmitter 的子类。

实现一个可以发布订阅的类

'use strict'
class EmitterEvent {
 constructor() {
 //构造器。实例上创建一个事件池
 this._event = {}
 }
 //on 订阅
 on (eventName, handler) {
 // 根据eventName,事件池有对应的事件数组,
 就push添加,没有就新建一个。
 // 严谨一点应该判断handler的类型,是不是function
 if(this._event[eventName]) {
 this._event[eventName].push(handler)
 } else {
 this._event[eventName] = [handler]
 }
 }
 emit (eventName) {
 // 根据eventName找到对应数组
 var events = this._event[eventName];
 // 取一下传进来的参数,方便给执行的函数
 var otherArgs = Array.prototype.slice.call(arguments,1)
 var that = this
 if(events) {
 events.forEach((event) => {
 event.apply(that, otherArgs)
 })
 }
 }
 // 解除订阅
 off (eventName, handler) {
 var events = this._event[eventName]
 if(events) {
 this._event[eventName] = events.filter((event) => {
 return event !== handler
 })
 }
 }
 // 订阅以后,emit 发布执行一次后自动解除订阅
 once (eventName, handler) {
 var that = this
 function func () {
 var args = Array.prototype.slice.call(arguments,0)
 handler.apply(that, args)
 this.off(eventName,func)
 }
 this.on(eventName, func)
 }
}
var event = new EmitterEvent()
function a (something) {
 console.log(something,'aa-aa')
}
function b (something) {
 console.log(something)
}
 event.once('dosomething',a)
 event.emit('dosomething', 'chifan')
 //event.emit('dosomething')
// event.on('dosomething',a)
// event.on('dosomething',b)
// event.emit('dosomething','chifan')
// event.off('dosomething',a)
// setTimeout(() => {
// event.emit('dosomething','hejiu')
// },2000)

当我们需要用的时候,只需要继承一下这个EmitterEvent类。要操作的实例就可以用on,emit方法,也就是可以用发布订阅。比如XHR,组件…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JS中substring与substr的用法
Nov 16 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
浅谈js中function的参数默认值
Feb 20 #Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 #Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 #Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 #Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 #Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 #Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
文秘大学生求职信
2014/02/25 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
保护环境建议书400字
2014/05/13 职场文书
关爱老人标语
2014/06/21 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js