Interpretation of mobx source code (2): Observe objects, can other types be far behind

Interpretation of mobx source code (2): Observe objects, can other types be far behind

Original address: observable-other-type

The text is the second part of the mobx source code interpretation series

This series of articles all use the newer version of mobx : v5.13.0

Mobx source code interpretation issue, welcome to discuss

Technical premise

Before reading, I hope you have some ideas about the following techniques understanding or practice , otherwise it may affect your understanding of this article

  1. ES6 decorator: decorator

  2. ES6 proxy: proxy

  3. ES6 reflection: reflect

  4. Define object properties: Object.defineProperty

  5. Implement the simple observer mode

  6. Implement a simple version of MVVM (optional)


  1. The first source code interpretation published before, I thought no one would pay attention, but this week I received reminders from netizens, I am still very moved, and I am ready to continue writing

  2. This article and mobx source code interpretation series (1) . If your first article is gnawed down, this article will be relatively hydrology, but if you haven t gnawed down, emm... I guess. It will be difficult for you to see

  3. We know that the last article: , adm , , api, hijackingarray, Map, Set in fact the same token, then verifies it together at source

Source code

1. hijack the array

  1. Back to observableFactories, after it traverses, it hooks observables with methods to process various types of data

First call asCreateObservableOptions to calculate options, of course, the default is defaultCreateObservableOptions, which is to use deep and proxy hijacking

The getEnhancerFromOptions is of course deppEnhancer

  1. See what createObservableArray does

First create the ObservableArrayAdministration manager

Hang the hidden attribute $mobx to expose the api

Hang adm.values with a set of array apis implemented by yourself through arrayTraps (in a while)

Then call adm.spliceWithArray to initialize the initialValues value to adm.values (of course you can guess it is the use of enhancer to recursively hijack)

  1. Take a look at ObservableArrayAdministration

It expands around values and provides many methods to manipulate arrays at the mobx level

At the same time, it also provides support for "supporting native array api" for the arrayExtensions described later.

  1. The most important of these is spliceWithArray, which became the "magic oil"

It has made various compatibility, which can achieve the addition, deletion and modification of the array, and at the same time, it can also notify the change message (hasInterceptors, notifyArraySplice, etc., which is one of the reasons for rewriting the api)

Note that newItems, when initialized, the value is initialValues, and then go to the map to return a new array through the enhancer recursive hijacking

So the item type of adm.values is the value at the mobx level, such as:

[1, {a: 2 }, "c", [3], new Map(...)], will return as:

[1, Observableobject, "c", Observablearray, Observablemap]

After hijacking, call spliceItemsIntoValues, which finally calls values.splice

  1. The next step is how to use the "Essential Oil": arrayExtensions

Inside, I got adm through $mobx for a while (of course, the use of this[$mobx] in the object must be .call in the past)

After supporting the native array api, some mobx-level apis (toJS, observe, etc.) are then provided

Then do not change the api of the array itself, just let adm.values come out

  1. A complete set of apis is completed, and it must be hung on values in the end, arrayTraps comes on stage

In fact, it is the descriptor. There is nothing to say, and it hangs up when it cooperates with the previous proxy.

  1. Exposed api

Happiness is over

2. hijack Map

Nothing to say next

  1. Still return to observableFactories, after getting the parameters, an ObservableMap is returned

  1. Look at ObservableMap

It expands around this._data again, and assigns initial values through the merge method

You can guess with your eyes closed: foreach traverses the key, gets the value, and then uses the enhancer to recursively hijack

Then provide APIs at the native Map and mobx level

  1. Expose api, the diagram is omitted

3. hijack Set

  1. Starting from observableFactories, return ObservableSet

Expand around this._data, assign initial values through the replace method

Changing the soup without changing the medicine: foreach + _data.add(new ObservableValue(value))

Then implement the native api and expose it for use

4. hijack the box

  1. For the basic types of string, boolean, and number, you can use box to hijack, and you can use get and set methods.

  2. It specifically uses ObservableValue, which is also the value maintained by ObservableObjectAdministration in the mobx source code interpretation series (1) .

  3. Is the understanding of observableobject a step further?

At last

  1. Annotated mobx source code

  2. Welcome to discuss in the mobx source code interpretation issue ~

  3. Recommendation:, minbx: mini mobxfor learning, welcome pr: minbx project address

  4. Spoiler for the next chapter: talk about dependency collection in mobx

  5. The code word is not easy, remember to point it if you like it oh