1. 观察者模式介绍
观察者模式又叫做发布 - 订阅模式, 是我们最常用的设计模式之一. 它定义对象间的一种一对多的依赖关系, 当一个对象的状态发生改变时, 所有依赖于它的对象都将得到通知和更新.
而观察者模式属于行为型模式, 行为型模式关注的是对象之间的通讯, 观察者模式就是观察者和被观察者之间的通讯.
JS 中的事件监听机制, 还有曾经在 DOM 节点上面绑定过事件函数, 其实就是一种观察者模式.
2. 为什么要有观察者模式
之所以要有观察者模式, 是因为有时候和传统事件无关的事件, 比如: 2 个或者更多模块, 组件的直接通信问题.
实际一点的场景就是: 因需求的改动, 需要任意组件都可以修改组件 A 的 State, 而组件 A 的 State 与组件内的方法耦合性太紧密, 修改代码进行数据共享太繁琐. 此时使用观察者模式会简单很多.
3. 观察者模式在 React 中的运用
注册 trueOrFalse 事件
用户点击时, 观察者发布 trueOrFalse 事件, 从而引发方法的执行.
流向图
这种方法的性质与 "事件监听" 类似, 但是明显优于后者. 因为可以通过查看观察者, 了解存在有多少订阅者, 从而监控程序的运行.
4. 观察者模式的优点
观察者模式本质上就是将数据的产生于数据的处理逻辑相分离开来, 被观察者模式负责数据的产生, 观察者则负责处理数据, 即产生的数据流与处理数据的逻辑分离开来.
5. 观察者模式的不足
观察者模式的有点非常明显: 一是时间上的解耦, 二是对象之间的解耦. 既可用于异步编程中, 也可以用帮助我们完成更松耦合的代码编写. 但它仍然有所不足:
1. 创建订阅者本身要消耗一定的时间和内存
2. 当订阅一个消息时, 也许此消息并没有发生, 但这个订阅者会始终存在内存中.
3. 观察者模式弱化了对象之间的联系, 这本是好事情, 但如果过度使用, 对象与对象之间的联系也会被隐藏的很深, 会导致项目的难以跟踪维护和理解.
6. 观察者模式源码
来源: http://www.jianshu.com/p/3332c24a1468