lyan-ap / svelte-vite Goto Github PK

Svelte store 简洁的原因得益于其总体的设计。

[示例](https://stackblitz.com/edit/typescript-1tbjxs?file=index.ts,utils.ts,index.html,store.ts)

• export type Subscriber<T> = (value: T) => void;
  
  export type Unsubscriber = () => void;
  
  export type Updater<T> = (value: T) => T;
  
  type Invalidator<T> = (value?: T) => void;
  
  export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
  
  export interface Readable<T> {
  	subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
  }
  
  /** Writable interface for both updating and subscribing. */
  export interface Writable<T> extends Readable<T> {
  	set(this: void, value: T): void;
  	update(this: void, updater: Updater<T>): void;
  }
  
  /** Pair of subscriber and invalidator. */
  type SubscribeInvalidateTuple<T> = [Subscriber<T>, Invalidator<T>];
  
  const subscriber_queue = [];
  export function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T> {
  	return {
  		subscribe: writable(value, start).subscribe
  	};
  }
  
  export function writable<T>(value?: T, start: StartStopNotifier<T> = noop): Writable<T> {
  	let stop: Unsubscriber;
  	const subscribers: Set<SubscribeInvalidateTuple<T>> = new Set();
  
  	function set(new_value: T): void {
  		if (safe_not_equal(value, new_value)) {
  			value = new_value;
  			if (stop) { // store is ready
  				const run_queue = !subscriber_queue.length;
  				for (const subscriber of subscribers) {
  					subscriber[1]();
  					subscriber_queue.push(subscriber, value);// push all [subscriber, value]
  				}
  				if (run_queue) {
  					for (let i = 0; i < subscriber_queue.length; i += 2) {
  						subscriber_queue[i][0](subscriber_queue[i + 1]);
  					// run all [subscriber, value]: 每次都将最新值赋给相应的订阅者
  					}
  					subscriber_queue.length = 0; // reset
  				}
  			}
  		}
  	}
  
  	// 上一次的 update 执行完之后才会执行本次的 update
  // 每次 update 都会拿最新值让 subscribers 一一执行
  	function update(fn: Updater<T>): void {
  		set(fn(value));
  	}
  
  	function subscribe(run: Subscriber<T>, invalidate: Invalidator<T> = noop): Unsubscriber {
  		const subscriber: SubscribeInvalidateTuple<T> = [run, invalidate];
  		subscribers.add(subscriber);
  		if (subscribers.size === 1) {
  			stop = start(set) || noop;
  		}
  		run(value);// initial run when subscribe
  
  		return () => {
  			subscribers.delete(subscriber);
  			if (subscribers.size === 0) {
  				stop();
  				stop = null;
  			}
  		};
  	}
  
  	return { set, update, subscribe };
  }

subscribe_queue 是这样的结构：

/**
 [
	[subscriber1, value1],
	[subscriber2, value2],
	[subscriber3, value3],
 ]
// in details
[
	[[run1, invalidate1], value1],
	[[run2, invalidate2], value2],
	[[run3, invalidate3], value3],
 ]
*/