深深明白Javascript中的观望者方式_底蕴知识_脚本之家

简介

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

使用观察者模式的好处:

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

引入

深深明白Javascript中的观望者方式_底蕴知识_脚本之家。在前端业务中,可能用的比较多的地方可能就是自定义事件了。其实浏览器的事件也是观察者模式

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

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

具象化理解

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

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

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

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

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

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

解耦/模块/功能

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

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

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

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

var xhr = new XMLHttpRequest  xhr.onreadystatechange = function () { if(this.readyState !== 4) return if { divs.innerHTML = '' + this.response + '' // } } xhr.responseType = 'json' xhr.send

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

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

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

function view1  {}function view3  {}if { xhr.on //订阅 xhr.on}else{ xhr.on xhr.on}

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

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

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

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

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

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

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

简单实现一个createstore函数

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

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

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

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

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

总结

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注