Open clcs opened 9 months ago
clcs
commented
9 months ago 在对象之间实现一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。
有几个重要概念，observable 也叫 subject 我们可以把它类比为一个新闻公众号，observers 可以类比为人群，observers 可以 suscribe 订阅到 observable，之后一旦大事件发生，observable 就可以 notify 通知所有订阅它的 observers，当然 observers 必须还要有 unsubsribe 取消订阅的方式。
这样，observable 只负责监视事件，而 observers 只负责处理收到的数据，两者可以随时解耦。
与观察者模式不同，发布订阅模式中的发布者和订阅者并不知道对方的存在，它们会通过代理 broker 组件进行通信。
clcs
commented
9 months ago Observable 是一种可以 emit one or more values over time 的对象。
使用 of(...values) 可以创建一个 Observable 示例，示例会同步传递提供给它的参数值。
import { of } from 'rxjs';
const numbers$ = of(1, 2, 3); // simple observable that emits three values末尾的 $ 是一种命名约定，代表该变量是一个 observable $stream。
当有人订阅 observable 时，它才开始 publish values。
numbers$.subscribe();不关心值是什么或是什么时候完成发布，可以不带任何参数调用。
numbers$.subscribe(
value => console.log('Observable emitted the next value: ' + value)
);使用 next handler 可以在每次 observable emit values 时执行某些操作。
Observer 包含处理 notfication 通知的处理程序，next, error, complete 分别对应三种不同类型的通知。
numbers$.subscribe({
next: value => console.log('Observable emitted the next value: ' + value),
error: err => console.error('Observable emitted an error: ' + err),
complete: () => console.log('Observable emitted the complete notification')
});
// or
numbers$.subscribe({
next(value) { console.log('Observable emitted the next value: ' + value); },
error(err) { console.error('Observable emitted an error: ' + err); },
complete() { console.log('Observable emitted the complete notification'); }
});Observable 构造器接收一个 subscriber function，这个订阅者函数接收 Observer object，并且可以 publish values 到 observer 的通知处理函数。
// This function runs when subscribe() is called
function sequenceSubscriber(observer: Observer<number>) {
// synchronously deliver 1, 2, and 3, then completes
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
// Return the unsubscribe function.
// This one doesn't do anything
// because values are delivered synchronously
// and there is nothing to clean up.
return {unsubscribe() {}};
}
// Create a new Observable that will deliver the above sequence
const sequence = new Observable(sequenceSubscriber);
// Execute the Observable and print the result of each notification
sequence.subscribe({
next(num) { console.log(num); },
complete() { console.log('Finished sequence'); }
});
// Logs:
// 1
// 2
// 3
// Finished sequence当 Observer 调用 Observable 的 subscribe 方法时，Observable 会开始执行其内部的订阅函数。订阅函数接收 Observer 作为参数，并通过调用 Observer 的 next, error, 和 complete 方法来向 Observer 发送数据、错误或完成通知。
Observer 的 next, error, 和 complete 方法则是用来接收和处理 Observable 发送的数据、错误或完成通知的。当 Observable 的订阅函数调用这些方法时，Observer 会执行相应的处理逻辑。
// Create an Observable that will start listening to browser geolocation updates
// when a consumer subscribes.
const locations = new Observable((observer) => {
let watchId: number;
// The geolocation API (if it exists) provides values to publish
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position: GeolocationPosition) => observer.next(position),
(error: GeolocationPositionError) => observer.error(error)
);
} else {
observer.error('Geolocation not available');
}
// When the consumer unsubscribes, stop listening to geolocation changes.
return {
unsubscribe() {
navigator.geolocation.clearWatch(watchId);
}
};
});
// Call subscribe() to start listening for geolocation updates.
const locationsSubscription = locations.subscribe({
next(position) {
console.log('Current Position: ', position);
},
error(msg) {
console.log('Error Getting Location: ', msg);
}
});
// Stop listening for location after 10 seconds
setTimeout(() => {
locationsSubscription.unsubscribe();
}, 10000);JS 中的 Map 与 Object 类似，最大的区别就是 Map 允许任何类型的 key 值（包括 Object 也可以作为 key），Object 只允许字符串或 Symbol 类型（其他类型虽然可以作为 key，但会被自动转换为字符串形式）。
new Map()map.set(key, value)map.get(key)，不要用 map[key] 的形式map.has(key)map.delete(key)map.clear()map.size使用 SameValueZero 算法来比较 key 值是否相等，算法具体规则如下：
边插入边找 map 里有没有
var twoSum = function(nums, target) {
let map = new Map()
for (let j = 0; ;j++) {
let x = target - nums[j]
if (map.has(x)) {
return [j, map.get(x)]
}
map.set(nums[j], j)
}
};
TIL
RxJS