博客
关于我
观察者模式的理解以及在前端的广泛应用
阅读量:332 次
发布时间:2019-03-04

本文共 1192 字,大约阅读时间需要 3 分钟。

文章目录

观察者模式的理解

观察者模式(Observer):定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新

  • 发布 订阅
  • 一对多关系(1:n)//n可以是1

在这里插入图片描述

左侧是观察者,被定义好后等待被触发,触发就执行update(),右侧的subject是一个被观察者,他可以被多个观察者观察,当它的状态改变时,所有观察它的观察者都会触发update()方法,知道它的状态已经改变

js代码

// 被观察者Subjectclass Subject{       constructor(){           this.state = 1        this.observers = [] //能够被这个数组里面的多个观察者被观察    }    addObserver(observer){           this.observers.push(observer)    }    setState(state){           this.state = state        this.notifyAllObservers()    }    notifyAllObservers(){           this.observers.forEach((observer)=>{               observer.update()        })    }}class Observer{       constructor(name,subject){           this.name = name        this.subject = subject        this.subject.addObserver(this) //将自己添加到Subject中去才能观察他的状态    }    update(){           console.log(`${   this.name} update,state; ${   this.subject.state}`);    }}const sub  =  new Subject()const o1 = new Observer('observer1',sub)const o2 = new Observer('Observer2',sub)const o3 = new Observer('Observer3',sub)sub.setState(5)

应用场景

事件绑定

所有的事件监听机制都是观察者模式。挺好理解的。

在这里插入图片描述

Promise

promise有三个状态,pending,resolved,rejected状态,.then()方法监听resolved状态,.catch()监听rejected状态。也是一种观察模式

转载地址:http://suue.baihongyu.com/

你可能感兴趣的文章
EXTJS4.2——10.Tab+Iframe
查看>>
WEB基础——AJAX
查看>>
one + two = 3
查看>>
echart关系图平分节点删除时自动平衡问题
查看>>
PHP serialize && unserialize Security Risk Research
查看>>
sctf_2019_easy_heap
查看>>
ASP.NET Core分布式项目实战(oauth2 + oidc 实现 server部分)--学习笔记
查看>>
PyQt5之音乐播放器
查看>>
Redis进阶实践之十八 使用管道模式提高Redis查询的速度
查看>>
SQL注入
查看>>
#2036:改革春风吹满地
查看>>
MPI Maelstrom POJ - 1502 ⭐⭐ 【Dijkstra裸题】
查看>>
P1379 八数码难题 ( A* 算法 与 IDA_star 算法)
查看>>
算法学习笔记: 珂朵莉树
查看>>
算法学习笔记:母函数详解
查看>>
Codeforces Round #664 题解(A ~ C)
查看>>
Problem A - Sequence with Digits (数学推导)
查看>>
Problem 330A - Cakeminator (思维)
查看>>
Codeforces Global Round 11 个人题解(B题)
查看>>
LeetCode75 颜色分类 (三路快排C++实现与应用)
查看>>