rxjs入门4之rxjs模式设计
2019-05-13 16:08
405 查看
观察者模式 (Observer Pattern)
观察者模式其实在日常编码中经常遇到,比如DOM的事件监听,代码如下
function clickHandler(event) { console.log('user click!'); } document.body.addEventListener('click', clickHandler)
简而言之:观察者模式就如同上代码,有一个事件源‘dom 的click事件’ 也就是abservable,有一个观察者abserver clickHandler函数,有一个订阅机制(addEventLister),当dom的click事件触发时候,会通过订阅机制通知abserver 执行函数clickHandler函数。
下面是构建一个观察者模式的简单例子
function Producer() { // 这个 if 只是避免使用者不小心把 Producer 当作函式来调用 if(!(this instanceof Producer)) { throw new Error('请用 new Producer()!'); // 仿 ES6 行为可用: throw new Error('Class constructor Producer cannot be invoked without 'new'') } this.listeners = []; } // 加入监听的方法 Producer.prototype.addListener = function(listener) { if(typeof listener === 'function') { this.listeners.push(listener) } else { throw new Error('listener 必须是 function') } } // 移除监听的方法 Producer.prototype.removeListener = function(listener) { this.listeners.splice(this.listeners.indexOf(listener), 1) } // 发送通知的方法 Producer.prototype.notify = function(message) { this.listeners.forEach(listener => { listener(message); }) }
接下来建立实例
var egghead = new Producer(); // new 出一个 Producer 实例叫 egghead function listener1(message) { console.log(message + 'from listener1'); } function listener2(message) { console.log(message + 'from listener2'); } egghead.addListener(listener1); // 注册监听 egghead.addListener(listener2); egghead.notify('A new course!!') // 当某件事情方法时,执行 //a new course!! from listener1 //a new course!! from listener2
迭代器模式 (Iterator Pattern)
Iterator 是一个物件,它的就像是一个指针(pointer),指向一个资料结构并产生一个序列(sequence),这个序列会有资料结构中的所有元素(element)。
迭代者(Iterator,也称为“迭代器”)指的是能够遍历⼀个数据集合的对象,因为数据集合的实现⽅式很多,可以是⼀个数组,也可以是⼀个树形结构,也可以是⼀个单向链表……迭代器的作⽤就是提供⼀个通⽤的接口,让使⽤者完全不⽤关⼼这个数据集合的具体实现⽅式。
自己实现简单的迭代器
function IteratorFromArray(arr) { if(!(this instanceof IteratorFromArray)) { throw new Error('请用 new IteratorFromArray()!'); } this._array = arr; this._cursor = 0; } IteratorFromArray.prototype.next = function() { return this._cursor < this._array.length ? { value: this._array[this._cursor++], done: false } : { done: true }; }
补充 - ES6 生成器
生成器是一种返回迭代器的函数,通过function关键字后的星号(*)来表示,函数中会用到新的关键字yield。星号可以紧挨着function关键字,也可以在中间添加一个空格
// 生成器 function *createIterator() { yield 1; yield 2; yield 3; } // 生成器能像正规函数那样被调用,但会返回一个迭代器 let iterator = createIterator(); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3 function *createIterator(items) { for (let i = 0; i < items.length; i++) { yield items[i]; } } let iterator = createIterator([1, 2, 3]); console.log(iterator.next()); // "{ value: 1, done: false }" console.log(iterator.next()); // "{ value: 2, done: false }" console.log(iterator.next()); // "{ value: 3, done: false }" console.log(iterator.next()); // "{ value: undefined, done: true }" // 之后的所有调用 console.log(iterator.next()); // "{ value: undefined, done: true }"
Observable 其实就是这两个 Pattern 思想的结合,Observable 具备生产者推送资料的特性,同时能像序列,拥有序列处理资料的方法(map, filter...)!
更简单的来说,Observable 就像是一个序列,裡面的元素会随著时间推送。
相关文章推荐
- 入门js设计模式——构造函数模式
- RxJS入门(1)---Observer 和 Iterator模式简介
- JS设计模式——构造函数模式
- JS设计模式之单例模式篇
- js架构设计模式——前端MVVM框架设计及实现(二)
- js设计模式--代理模式
- js的36个设计模式:前奏
- js设计模式之外观模式
- Appium+Python+PO 设计模式 入门笔记
- 关于js设计模式的一些总结和理解
- JS设计模式之桥接模式
- 书评--设计模式入门
- JS设计模式四:组合模式
- js的观察者设计模式
- 设计模式入门之原型模式Prototype
- RxJS入门(3)----深入Sequence
- 从实际案例入门设计模式——外观模式
- js设计模式——建造者模式
- 书评--设计模式入门
- js设计模式-原型模式