看到标题，xdm 可能有点懵？没关系，看完本篇，就会有种豁然开朗的感觉~
这里的 被观察者 指的是：Observer Pattern（观察者模式）中的被观察对象；
迭代者 这指的是：Iterator Pattern（迭代器模式）中的迭代对象；
没错，接下来，将分别解析这两种模式，冲 （￣︶￣）↗
被观察者
观察者模式，我们总是常见：
function clickHandler(event) { console.log('user click!'); } document.body.addEventListener('click', clickHandler)
以上代码中，被观察者是 document.body，它主动注册了一个监听方法来监听点击事件，一旦发生点击，就把 event 信息带给 clickHandler 方法，然后执行；这便是观察者模式~
除了用原生 api addEventListener，其实我们也可以自己写一个更加解耦的监听方法：
class Subject { // 被观察者对象 constructor() { this.listeners = []; } addListener(listener) { // 加入监听 if(typeof listener === 'function') { this.listeners.push(listener) } else { throw new Error('listener 必須是 function') } } removeListener(listener) { // 移除监听 this.listeners.splice(this.listeners.indexOf(listener), 1) } notify(message) { // 发送通知 this.listeners.forEach(listener => { listener(message); }) } }
构建实例：
var sub = new Subject(); // new 一个 ob 实例 function listener1(message) { console.log(message + 'from listener1'); } function listener2(message) { console.log(message + 'from listener2'); } sub.addListener(listener1); // 加监听1 sub.addListener(listener2); // 加监听2 sub.notify('I push a commit ') // push 信息给监听器1、2
每当 notify 执行，sub 都会推送信息给 listener1 和 listener2；
被观察者会主动 push 信息（或者称为数据）给多个观察它的对象（监听器），就是典型的观察者模式。
题外说一句：很多 xd 会把【观察者模式】和【发布订阅模式】弄混，这里特意说明一下，二者区别在于：
- 观察者模式只需要 2 个角色便可成型，即 观察者 和 被观察者 ，其中 被观察者 是重点。
- 而发布订阅需要至少 3 个角色来组成，包括 发布者 、 订阅者 和 发布订阅中心 ，其中 发布订阅中心 是重点。
迭代者
JS Iterator（迭代器）我们也并不陌生，它在 ES6 被提出：
示例代码如下：
var arr = [1, 2, 3]; var iterator = arr[Symbol.iterator](); iterator.next(); // { value: 1, done: false } iterator.next(); // { value: 2, done: false } iterator.next(); // { value: 3, done: false } iterator.next(); // { value: undefined, done: true }
I
terator 最大的魅力在于 延迟计算，关于这点，在本瓜以前的文章可以找到一些相关讨论：
举个栗子🌰
function* getNumbers(words) { for (let word of words) { if (/^[0-9]+$/.test(word)) { yield parseInt(word, 10); } } } const iterator = getNumbers('今天是 3 月 8 号'); iterator.next(); // { value: 3, done: false } iterator.next(); // { value: 8, done: false } iterator.next(); // { value: undefined, done: true }
getNumbers 方法用于获取字符串里面的数字，当我们执行 iterator = getNumbers('今天是 3 月 8 号') 这一句代码时，程序并没有开始计算，直到我们逐个执行 iterator.next() 才会逐个得到运算结果。这就是延迟计算。
Iterator 就像是在 pull 数据，运行一次 .next() 就拉取一次数据；
小结
OK，结合以上代码，我们分析了 “为什么说：被观察者是 push 数据，迭代者是 pull 数据？”
一图胜千言：
不过说到底，我们为什么要把这两种设计模式单拎出来作这样解释呢？
噢，其实是为了理解 RxJS Observable，它是二者思想的结合；
它大致长这样：
var observable = Rx.Observable .create(function(observer) { observer.next('Jerry'); // RxJS 4.x 以前的版本用 onNext observer.next('Anna'); })
我们后面再来逐渐揭开它的面纱~~ 这里只用先理解其背景思想，有个大致概念和印象即可；
我是掘金安东尼，输出暴露输入，技术洞见生活，再会啦~~
