Observabily-other-type

This article is the second in the Mobx source code interpretation series

This series uses the newer mobx version, V5.13.0

Mobx source code interpretation issue, welcome to discuss

Technical premises

Before reading, you are expected to have some knowledge or practice of the following techniques, otherwise it may affect your understanding of this article

  1. ES6 decorator: decorator

  2. ES6 proxy: proxy

  3. ES6 Reflect: Reflect

  4. Define Object attributes: Object.defineProperty

  5. Implement the simple observer mode

  6. Implementing a simplified VERSION of MVVM (optional)

To prepare

  1. Before the first source code interpretation, this thought should be no one will pay attention to, but this week actually received users to urge more, or very moved, ready to continue to write

  2. This article and mobx source code interpretation series (1), there is a strong correlation, if you bite down the first article, this article will be relatively hydrology, but you did not bite down, EMM… It’s gonna be tough for you

  3. Last article we know: universal decorator, recursive hijacking, ADM manager, support and expose API, hijacking array, Map, Set actually the same, next to verify the source code together

On the source code

Hijacking array

  1. Back to observableFactories, which hang observables with methods for handling various types of data after traversing them

First call asCreateObservableOptions calculation options, of course, the default is defaultCreateObservableOptions, namely the use of deep and proxy

So getEnhancerFromOptions gets deppEnhancer

  1. What does the createObservableArray do

First create ObservableArrayAdministration manager

Hang the hidden property $mobx to expose the API

Use arrayTraps (in a moment) to hook up adm. Values with your own array API

Then call adm.spliceWithArray to initialize the initialValues value for adm.values.

  1. Look at the ObservableArrayAdministration

It revolves around values and provides a number of methods for manipulating arrays at the MOBx level

It also provides support for implementing the “support native array API” for the arrayExtensions section below

  1. One of the most important is spliceWithArray, which is called the “elixirs.”

There are various compatibilities. it can add, delete, and change arrays, and it can also notify change messages (hasInterceptors, notifyArraySplice, etc., which is one of the reasons for rewriting the API).

Note that newItems is initialized with initialValues, and then goes through the map to return the new array via enhancer recursive hijacking

So the adm.values item type is the value at the Mobx level, as in:

[1, { a: 2 }, “c”, [3], new Map(…)] , returns:

[1, Observableobject, “c”, Observablearray, Observablemap]

After hijacking, spliceItemsIntoValues is called, which eventually calls Values.splice

  1. Next up: arrayExtensions

$this[$mobx] = $this[$mobx]

After supporting the native Array API, some MOBx-level apis (toJS, Observe, etc.) are available.

Then leave the API of the array itself unchanged and let adm.values appear

  1. Complete a whole set of apis, and eventually you’ll have to hang on values. ArrayTraps

It’s just descriptor, nothing to say, just hang it up in conjunction with the proxy before

  1. Exposure of the API

Happiness is over

Hijacking Map

There’s nothing more to say

  1. Again, we go back to observableFactories, and after getting the parameter, we return an ObservableMap

  1. See ObservableMap

Again around this._data, the merge method is used to assign initial values

You can guess it with your eyes closed: Foreach iterates over the key, gets the value and then uses enhancer to recursively hijack it

It then provides apis at the native Map and MOBx levels

  1. Exposed API, omitted in figure

3, Hijack Set

  1. From observableFactories, return to ObservableSet

Expand around this._data and assign an initial value using the replace method

Foreach + _data. Add (new ObservableValue(value))

Then implement the native API and expose it for use

Hijacking Box

  1. For basic string, Boolean, number can be hijacked by box, hang get, set methods

  2. Is its specific use ObservableValue, but also in our interpretation mobx source series (a) ObservableObjectAdministration to maintain the value of the values

  3. This is another step towards understanding observableObject

The last

  1. Annotated mobx source code

  2. Welcome to discuss in the Mobx source code Interpretation issue

  3. Recommended: Minbx: Mini Mobx for learning to use, welcome pr: Minbx project address

  4. The next chapter reveals the plot: Talk about dependency collection in Mobx

  5. Code word is not easy, like to remember ❤️ oh