Angular开发(九)-关于响应式基本认识

响应式编程就是一种异步数据流和变化传播的编程规范
可以简单的理解为是观察者模式与Rxj的开发模式

---

本节中与angular没有关系

• 1、在bootstrap的cdn中获取rxjs的地址<script src="http://cdn.bootcss.com/rxjs/5.4.0/Rx.js"></script>
• 2、fromEvent的使用情景是在获取dom元素绑定事件的时候使用
  例如:

//html代码<input type="text" id="input" /><input type="button" value="add" id="btn" />//js代码let inputDom = document.getElementById("input");let btnDom = document.getElementById("btn");let input$ = Rx.Observable.fromEvent(inputDom, "keyup");let btn$ = Rx.Observable.fromEvent(btnDom, "click");

上面代码实现将普通的dom事件转换为响应式编程的Observable事件,在别的地方我们就可以观察该事件

//获取事件名称input$.subscribe((ev) => console.log(ev));//直接拿到值input$.subscribe((text) => console.log(text.target.value));//使用mapinput$.map((ev) => ev.target.value).subscribe((text) => console.log(text));//使用filterinput$.filter(ev => ev.keyCode === 32).map(ev => ev.target.value).subscribe(val => console.log(val));//pluck直接获取值//input$.pluck("target", "value").subscribe(val => console.log(val));input$.pluck("target", "baseURI").subscribe(val => console.log(val));//按钮的点击事件btn$.mapTo("clicked").subscribe(val => console.log(val));

• 3、上面介绍了很多新词语
  
  • subscribe表示观察者
  • map表示对原来的数据流操作返回一个新的数据流
  • filter对符合条件的数据流发射出来，不符合的就不发射出来
  • pluck是从一系列的嵌套属性中获取值出来
• 4、combineLatest合并两个流，前提是必须两个都有流，不然是不会发射的
  使用案例:

//html代码<input type="text" id="weight" />kg <br/><input type="text" id="height" />cm <br/><div>    使用combineLatest计算结果:<span id="result"></span></div>//js代码let weight = document.getElementById("weight");let height = document.getElementById("height");let result = document.getElementById("result");let weight$ = Rx.Observable.fromEvent(weight, "keyup").pluck("target", "value");let height$ = Rx.Observable.fromEvent(height, "keyup").pluck("target", "value");let result$ = Rx.Observable.combineLatest(weight$, height$, (w, h) => w / (h * h / 100) / 100);result$.subscribe(re => result.innerHTML = re);

• 5、merge操作符的使用，与combineLatest的区别在于这个只会发射最后一个
  案例:

<input type="text" id="weight" />kg <br/><input type="text" id="height" />cm <br/><div>    使用merge计算结果:    <sapn id="merge"></sapn></div>//js代码:let weight = document.getElementById("weight");let height = document.getElementById("height");let result = document.getElementById("result");let weight$ = Rx.Observable.fromEvent(weight, "keyup").pluck("target", "value");let height$ = Rx.Observable.fromEvent(height, "keyup").pluck("target", "value");let merge$ = Rx.Observable.merge(weight$, height$);merge$.subscribe(val => document.getElementById("merge").innerHTML = val);

• 6、from将数组、类似数组的对象、promise、iterable的对象转换为ovseable
• 7、concat的认识，一个流必须要等待前面一个流执行完成后才会执行
  案例:

//使用cincat合并两个流let odd = Rx.Observable.from([1, 3, 5, 7, 9]);let event = Rx.Observable.from([2, 4, 6, 8]);odd.concat(event).subscribe(val => console.log(val));

• 8、debounceTime表示延后多少时间输出

//直接拿到值input$.debounceTime(500).subscribe((text) => console.log(text.target.value));