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));

//使用map
input$.map((ev) => ev.target.value).subscribe((text) => console.log(text));

//使用filter
input$.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));