RxJS入门(1)---Observer 和 Iterator模式简介

  • Rxjs的基础就是oberver观察这模式,但是单个数据的流确是Iterator模式(这个包装转化也可以转化为observer模式),也就是说rxjs的基础的Observable其实是observer模式和Iterator模式的混合,话回正题,回归下这两种模式
  • Observer模式(基于js的)
 <script type="application/javascript"> function Producer(){ this.listeners = []; } Producer.prototype.add = function(listener){ this.listeners.push(listener); }; Producer.prototype.remove = function(listener){ var index = this.listeners.indexOf(listener); this.listeners.splice(index,1); }; Producer.prototype.notify = function(message){ this.listeners.forEach(function(listener){ listener.update(message); }); }; var listener1 = { update:function(message){ console.log("listener1 received:",message); } }; var listener2 = { update:function(message){ console.log("listener2 received:",message); } }; var notifier = new Producer(); notifier.add(listener1); notifier.add(listener2); notifier.notify('hello world!'); </script>

结果如下:
》listener1 received: hello world!
》listener2 received: hello world!
以上例子很简单,但是比较好的阐述了观察者模式如何让事件和监听对象的解耦,并让它们产生反应。

  • Iterator模式
 <script type="application/javascript"> function iterateOnMultiples(arr, divisor) { this.cursor = 0; this.array = arr; this.divisor = divisor || 1; } iterateOnMultiples.prototype.next = function(){ while(this.cursor<this.array.length){ var value = this.array[this.cursor++]; if(value%this.divisor===0){ return value; } } }; iterateOnMultiples.prototype.hasNext = function(){ var cur = this.cursor; while(cur<this.array.length){ if(this.array[cur++]%this.divisor===0){ return true; } } return false; }; var consumer = new iterateOnMultiples([1,2,3,4,5,6,7,8,9,10],3); console.log(consumer.next(),consumer.hasNext()); console.log(consumer.next(),consumer.hasNext()); console.log(consumer.next(),consumer.hasNext()); </script>

结果:
》3 true
》6 true
》9 false
迭代器模型用来封装串型逻辑结构(任何类型数据结构)是很有用的。

你可能感兴趣的:(rxjs)