美文网首页
观察者模式理解和实践

观察者模式理解和实践

作者: 前端开发小匠 | 来源:发表于2018-06-14 23:10 被阅读0次

观察者模式理解和实践

最近在看观察者模式,于是乎就结合vue写了个小例子,算是实践一下观察者模式吧。

实例地址

观察者模式主要包含 目标对象观察者 两个基类。目标提供维护观察者的一系列方法,观察者提供更新接口。具体观察者和具体目标继承各自的基类,然后具体观察者把自己 注册 到具体目标里,在具体目标发生变化时候,调度观察者的更新方法

个人觉得这里需要注意几个点:

  1. 观察者需要将自己注册到目标中,这样才能使两者产生依赖关系。这样在目标对象发生变化的时候才能够通知到观察者。
  2. 观察者要有处理通知的能力,也就是说观察者需要有一个能够处理消息的方法(Function)。
观察者模式

关于观察者模式还需要注意的一点就是 观察者模式发布/订阅模式 的区别,这里有几个比较直观的对比便于理解。

关于项目

项目地址: https://github.com/aoxiaoqiang/hello

项目是通过 vue 和 Element UI组件库通过观察模式的方式比较直观的展示了目标对象和观察者之间的关系。下面是一些简要的说明:

  • Course: 课程(目标对象)
  • StudentList -> Course 课程有一个学生列表的属性用于存储订阅课程的学生。
  • Student: 学生(观察者)
  • 添加课程(new Course()), 也就是创建目标对象, 目标对象可以有一个也可以有多个。
  • 添加学生(new Student), 创建观察者。
  • 学生订阅课程, 也就是观察者把自己注册到目标对象的过程。
  • 实例中还添加了一个学生取消订阅课程的功能,取消订阅后,学生将不再收到取消的课程通知;如有需要可以重新订阅课程。
const c = new Course('《JavaScript高级程序设计》'); // 创建课程(目标)

// 学生 s 处理消息的方法
const msgHandle = function (data) {
  // 处理接收到的 data 数据
  // 这里根据也业务需要进行处理,能拿到通知数据就可以自己玩儿了 -_-!
}
const s = new Student('张小明', msgHandle); // 创建学生(观察者)

// 订阅课程(观察者将自己注入到目标中)
s.subscribe(c);
// 发送通知到该课程的每个订阅者(发送通知),此时s就会收到有关c课程的消息通知。
// 之s所以能够收到消息是因为c.notify会遍历每个订阅者并把消息内容传递给每个订阅者, 让订阅者根据自己的需要处理(msgHandle)收到的消息。
c.notify('课程更新啦~');

项目运行

运行前确保安装了nodeVue 提供 官方的CLI, 具体配置参考官网说明

npm install -g @vue/cli

相关命令,项目中我用的yarn(和npm类似)的方式安装模块。如果没有yarn使用npm也是ok的。

yarn
yarn serve
yarn build
build:dev
# 安装依赖模块
npm install
# 本地运行
npm run serve
# 编译打包(注意根据需要修改vue.config.js中的配置)
npm run build
npm run build:dev

相关文章

  • 观察者模式理解和实践

    观察者模式理解和实践 最近在看观察者模式,于是乎就结合vue写了个小例子,算是实践一下观察者模式吧。 实例地址 观...

  • vue响应式数据理解

    前言 观察者模式理解 首先需要对发布订阅和观察者模式有所了解。发布-订阅vs观察者模式。 观察者模式是一种 一对多...

  • 透彻理解 KVO 观察者模式(附基于runtime实现代码)

    透彻理解 KVO 观察者模式(附基于runtime实现代码) 透彻理解 KVO 观察者模式(附基于runtime实...

  • 小点知识——观察者模式,由浅谈到理解

    观察者模式 自己对观察者模式的理解:定义:Define a one-to-many dependency betw...

  • 谈谈观察者模式和发布订阅模式

    在网上看到许多关于观察者模式和发布订阅模式的博文,发现很多人都认为观察者模式即发布订阅模式,经过进一步的学习和理解...

  • Android观察者模式的理解

    观察者模式理解 观察者模式 Observer 观察者模式定义了一个一对多的依赖关系,让多个观察者对象同时监听一个主...

  • java设计模式--观察者模式

    观察者模式 观察者--OOD线程 简单理解 起一个被观察者线程和一个观察者线程。观察者不断的循环检查被观察者状态是...

  • 设计模式

    实践:zookeeper 观察者模式JDBC 桥接模式SNMP Plugin 对象的适配器模式 、代理模式 创建型...

  • 观察者模式

    1、观察者模式,个人理解为发布/订阅关系。订阅者为观察者,发布者为被观察者。同时观察者模式jdk提供了自带的版本。...

  • 第十三章 RecyclerView解析

    详细请看设计模式与实践 观察者模式解析 一、RecyclerView是什么 RecyclerView 比 List...

网友评论

      本文标题:观察者模式理解和实践

      本文链接:https://www.haomeiwen.com/subject/rswueftx.html