XDM may be confused by the headline? No matter, after reading this article, you will feel suddenly enlightened

Here the observed refers to the objects observed in the Observer Pattern.

Iterator This refers to: Iterator objects in the Iterator Pattern;

Yes, next, I will explain these two modes respectively, chong (), ()

The observed

The observer model, we are always familiar with:

function clickHandler(event) { console.log('user click! '); } document.body.addEventListener('click', clickHandler)Copy the code

In the above code, the observed is Document.body, which actively registers a listener method to listen for the click event. Once the click occurs, the event is passed to the clickHandler method and executed. This is the observer model

Instead of using the native addEventListener API, we can write a more decoupled listener method ourselves:

Constructor () {this.listeners = []; If (typeof Listener === 'function') {this.listeners. Push (listener)} else {throw new Error('listener must be function')}} removeListener(listener) {// removeListener this.listeners.splice(this.listeners.indexOf(listener), 2)} notice (listeners => {listeners (message); }}})Copy the code

Build example:

var sub = new Subject(); Function listener1(message) {console.log(message + 'from listener1'); } function listener2(message) { console.log(message + 'from listener2'); } sub.addListener(listener1); Sub.addlistener (listener2); // add listener 2 sub.notify('I push a commit ') // add listener 1, 2Copy the code

Whenever notify is executed, sub pushes information to Listener1 and Listener2;

The typical observer pattern is that the observed actively pushes information (or data) to multiple observing objects (listeners).

As an aside, many XDS confuse the Observer mode with the Publish/subscribe mode, but here’s the difference:

  1. The Observer mode requires only two characters, the observer and the observed, of which the observed is the key.

  2. Publish and subscribe requires at least three roles, including publisher, subscriber and publish and subscribe center, among which the publish and subscribe center is the key.

Iteration is

We are also familiar with the JS Iterator, which was introduced in ES6:

Example code is as follows:

var arr = [1, 2, 3];

var iterator = arr[Symbol.iterator]();

iterator.next();
// { value: 1, done: false }

iterator.next();
// { value: 2, done: false }

iterator.next();
// { value: 3, done: false }

iterator.next();
// { value: undefined, done: true }
Copy the code

Iterator’s greatest appeal lies in deferred computation, which was discussed in a previous article on Hongua:

How do you think “lazy evaluation” is implemented in JS?

Listen to your words, such as listen to words, explain the explanation of “inert evaluation” ~

For example, 🌰

function* getNumbers(words) { for (let word of words) { if (/^[0-9]+$/.test(word)) { yield parseInt(word, 10); }}} const iterator = getNumbers(' Today is March 8 '); iterator.next(); // { value: 3, done: false } iterator.next(); // { value: 8, done: false } iterator.next(); // { value: undefined, done: true }Copy the code

The getNumbers method is used to get the numbers in the string. When we execute iterator = getNumbers(‘ Today is March 8th ‘), the program does not start counting. We won’t get the results one by one until we execute iterator.next() one by one. This is called delayed computation.

Iterator is like pulling data. Running.next() pulls data once;

summary

OK, combined with the above code, we analyzed “why is observed push data and iterator pull data?”

A picture is worth a thousand words:

But at the end of the day, why are we singling out these two design patterns?

Well, to understand RxJS Observable, it’s a combination of the two ideas;

It looks something like this:

var observable = Rx.Observable .create(function(observer) { observer.next('Jerry'); // Previous versions of RxJS 4.x use onNext observer.next('Anna'); })Copy the code

We will gradually uncover it later ~~ here only to understand its background ideas, a general concept and impression can be;

I’m Nuggets Anthony, output exposure input, technical insight into life, goodbye ~~