preface

Some time ago, I was inspired to write a promise by myself. Promise just happens to be the subscription and publishing model. The MOBx I developed in my work is also the observer model. Put together a summary of yourself and the simplest implementation (which is also easy to understand because it is simple) to share and deepen your understanding of both

Subscribe to the published

  1. Implementation approach
  • Arr acts as the cache center for subscribed events
  • Push what you need to do into the ARR cache array by passing on
  • Emit execution events in turn while waiting for the event to fire

2. Code implementation

interface eventHub { arr: Array<Function>; on(fn: Function): void; emit(): void; } interface Person { age: number; name: string; } let eventHub: eventHub = {arr: [] as Array<Function>, // on(fn: Function) {this.arr.push(fn); {}, / / release emit () this. Arr. ForEach ((fn) = > fn ()); }}; let person: Person = {} as Person; If (object.keys (person).length == 2) {console.log(person); }}); setTimeout(function () { person.age = 27; // Go through this.arr and emit eventhub.emit () for the first time; }, 10); setTimeout(function () { person.name = "Zoe"; // Go through this.arr and emit eventhub.emit () a second time; }, 20);Copy the code

3. The result was released twice, but the console in ON was executed only once due to external conditions

Observer model

1: The implementation idea is similar to the observer mode, but it needs to be divided into one observer and the observed

  • The observer is associated with the observed (internal publish-subscribe model)

2: code implementation

// Class Subject {name: string; // Define a name attribute on the instance. State: string; observers: any[]; constructor(name:string) { this.name = name; this.observers = []; this.state = ""; } astute (o) {// This. Observers. Push (o); } setState(newState) { this.state = newState; this.observers.forEach((o) => o.update(this)); } // Class Observer {name: string; constructor(name) { this.name = name; } update(advantageous) {console.log(' ${advantageous. Name} say to: ${this.name} ZOE's ${advantageous. } } let hr = new Subject("HR"); Let observer1 = new Observer(" observer1 "); Let observer2 = new Observer(" observer2 "); hr.attach(observer1); hr.attach(observer2); Hr.setstate (" Passed the interview "); // baby. SetState (" failed the interview ");Copy the code

3: Achieve results

The difference between the two

EventHub publishes and subscribes

  • There is no direct connection between on(subscription) and emit (emit). Instead, we rely on the intermediate ARR to link up and subscribe each push to THE ARR, and then execute the ARR while emit

Observer model

  • The observer is associated with the observed (internal publish-subscribe model)
  • Pass an instance of an observer as a parameter to the observed attach method and cache it in the observers array
  • Update methods for observers in the cache array Observers are called in turn when observers setState

summary

Since I have not yet written a complex JS tool library with these two design patterns, so the writing is still very rough, but if my article is helpful to your study, or if you have suggestions, please leave a comment