js观察者模式代码示例

观察者模式：定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并自动更新

创建一个主题对象，用于接受状态变化，通知每个观察者对象

 class SubObserve {constructor() {this.state = 0this.observers = []}//获取状态getState() {return this.state}//设置状态setState(state) {this.state = statethis.notify()}//新增观察者attach(observer) {this.observers.push(observer)}//通知每个观察者notify() {this.observers.forEach(observer =>{observer.update(this.state)})}}

2.创建观察者对象

 class Observe{constructor(name){this.name = name}update(state){console.log(`${this.name} 观察者更新了state：${state}`);} }

3.在主题对象当中添加观察者对象

   let s1 = new SubObserve ()let observer1 = new Observe('observer1')s1.attach(observer1)

4.使用一个输入框使用输入的内容作为输入的状态，观察改变控制台变化

<input type="text" id="app" oninput="handleInput(event)">function handleInput(e){let event = e || events1.setState(event.target.value)}

效果如下

js观察者模式代码示例相关推荐

【设计模式】观察者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
文章目录一.观察者模式简介二.观察者模式适用场景三.观察者模式优缺点四.观察者模式代码示例 1.被观察者 2.观察者 3.通知类 4.测试类五.JDK 中的观察者模式支持类 1.Observ ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
kewail node 短信_Node.js代码示例_Node.js短信短信 | 微米-中国领先的短信彩信接口平台服务商...
Node.js短信接口一代码示例请求 var http = require('http'); var querystring = require('querystring'); var postDa ...
html登录界面设计代码_最简洁实现Github登录的JS代码示例
本文源码地址:https://github.com/Spring-Security-China/oauth2-client-login-js-github 大纲概述实现思路分析在Github官网 ...
flask与js交互的示例代码_Frida Java Hook 详解（安卓9）：代码及示例（上）
Frida Java Hook 详解(安卓9):代码及示例(上) 前言 1.1 FRIDA SCRIPT的"hello world" 1.1.1 "hello world ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
css3 烟蚊香_css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
php js特效代码如何用,Javascript实现吸顶特效（代码示例）
本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 知识点 1.scroll家族和offset家族的结合运用 2. ...
php钓鱼代码,PHP和JS实现模仿登录钓鱼的代码示例
本篇文章给大家带来的内容是关于PHP和JS实现模仿登录钓鱼的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 目录介绍 login.php 正常登录的文件 selfLogin. ...

js观察者模式代码示例

js观察者模式代码示例相关推荐

最新文章

热门文章