图标库
❤️ ✨⭐ ❗❓❕❔ ✊✌️ ✋✋ ☝️
☀️ ☔ ☁️ ❄️ ⛄ ⚡ ⛅
☎️ ☎️ ⌛ ⏳ ⏰ ⌚ ➿ ✉️ ✉️ ✂️ ✒️ ✏️ ⚽ ⚾️ ⛳ ♠️ ♥️ ♣️ ♦️ ☕
⛪ ⛺ ⛲ ⛵ ⛵ ⚓ ✈️ ⛽ ⚠️ ♨️
1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 0️⃣ #️⃣ ◀️ ⬇️ ▶️ ⬅️ ↙️ ↘️ ➡️ ⬆️ ↖️ ↗️ ⏬ ⏫ ⤵️ ⤴️ ↩️ ↪️ ↔️ ↕️ ⏪ ⏩ ℹ️ ️ ️ ️ ♿ ㊙️ ㊗️ Ⓜ️ ⛔ ✳️ ❇️ ✴️ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ⛎ ❎ ️ ️ ️ ♻️ ©️ ®️ ™️ ❌ ❗ ‼️ ⁉️ ⭕ ✖️ ➕ ➖ ➗ ✔️ ☑️ ➰ 〰️ 〽️ ▪️ ▫️ ◾ ◽ ◼️ ◻️ ⬛ ⬜ ✅ ⚫ ⚪
内容来源于网络,仅为个人理解记忆方便
参考文档:
1,rxjs中的几个概念
rxjs是基于可观测数据流在异步编程中应用的库。
基于观察者模式,迭代器模式和函数式编程。
观察者模式:
window.addEventListener('click', function(){
console.log('click!');
})
JS的事件监听就是天生的观察者模式。
迭代器模式:
提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示。
函数式编程:
函数式编程是声明式编程的体现。
命令式编程:
const arr = [1, 2, 3];
let total = 0;
for(let i = 0; i < arr.length; i++) {
total += arr[i] * 2;
}
声明式编程:
const arr = [1, 2, 3];
let total = arr.map(x => x * 2).reduce((total, value) => total + value)
声明式编程专注于描述结果本身,不关注于到底怎么到达结果。而命令式编程是真正实现结果的步骤。
现在前端流向的mvvm框架,都提倡:编写UI结构时使用声明式编程,在编写业务逻辑时使用命令式编程。
参考文档:
1,Observable
可观察者,换言之就是数据源和事件源。这种数据源有可被观察的能力,和主动去捞数据有本质区别。
2, 高阶函数
高阶函数的概念来自于函数式编程,简单的定义就是函数的入参或者返回值是函数。
3,Subscription
订阅,订阅是所有observable统一具备的操作。
表示Observable的执行,主要用于取消Observable的执行。
4,Subject
主体。
相当于与EventEmitter,并且是将值或者事件多路推送给多个观察者的唯一方式。
5,Schedulers
调度器。
用来控制并发。
2, rxjs操作符
0.9 rxjs可视化学习网站
1,组合
1,concat
按顺序订阅Observable,只有当前面的完成了,才会执行下一个。
// 模拟 HTTP 请求
const getPostOne$ = Rx.Observable.timer(3000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({id: 2});
Rx.Observable.concat(getPostOne$, getPostTwo$).subscribe(res => console.log(res));
2,combineAll
3,combineLatest
import { combineLatest, interval} from 'rxjs';
const intervalOne$ = interval(1000);
const intervalTwo$ = interval(2000);
combineLatest(
intervalOne$,
intervalTwo$
).subscribe(all => console.log(all));
当任一个observable完成就输出,并加上其他的observable的最新值。
4,concatAll
5,forkJoin
forkJoin是Rx版的Promise.all()。
直到所有的Observables都完成了,再一次性的传递值。
import { forkJoin, timer } from 'rxjs';
import { mapTo } from 'rxjs/operators';
const getPostOne$ = timer(3000).pipe(mapTo({id: 1}));
const getPostTwo$ = timer(2000).pipe(mapTo({id: 2}));
//输出的结果和Observable的发出时间没有关系,
//与在forkJoin中的排列顺序有关系。
forkJoin(getPostOne$, getPostTwo$).subscribe(res => console.log(res))
//输出
//[ { id: 1 }, { id: 2 } ]
6,merge
7,mergeAll
8,pairwise
9,race
10,stratWith
11,withLatestFrom
12,zip
2,条件
1,defaultEmpty
2,every
3,创建
1,create
2,empty
3,from
4,fromEvent
5,fromPromise
6,interval
7,of
8,range
9,throw
10,timer
4,错误处理
1,catchError
2,retry
3,retryWhen
5,多播
1,publise
2,multicast
3,share
4,shareReplay
6,过滤
1,debounce
2,debounceTime
3,distinctUntilChanged
4,filter
5,first
6,ignoreElements
7,last
8,sample
9,single
10,skip
11,skipUntil
12,skipWhile
13,take
14,takeUntil
15,takeWhile
16,throttle
17,throttleTime
7,转换
1,buffer
2,bufferCount
3,bufferTime
4,bufferToggle
5, bufferWhen
6,concatMap
7,concatMapTO
8,exhaustMap
9,expand
10,groupBy
11,map
12,mapTo
13,mergeMap
import { mapTo, mergeMap } from 'rxjs/operators';
import { forkJoin, of, timer } from 'rxjs';
const post$ = of({id: 1});
const getPostInfo$ = timer(3000).pipe(mapTo({title: "Post title"}));
const posts$ = post$.pipe(mergeMap(post => getPostInfo$)).subscribe(res => console.log(res));
当前一个observable完成之后,将值传入下一个observable并继续。
14,partition
15,pluck
16,reduce
17,scan
18,switchMap
19,window
21,windowCount
22,windowTime
23,windowToggle
24,windowWhen
8,工具
1, do
2, delay
3, delayWhen
4, dematerialize
5, let
6, timeout
7, toPromise
3,rxjs演进
2021年7月1日09:56:40 ,目前rxjs的最新版为6.5.3,共有103个操作符。