MVVM

Mechanism of MVVM frameworks

README 中文

Key concepts

tree traverse, get/set event, listener/publish-subscribe pattern, interpreter pattern, single-way data-binding

Mechanism

Implement a data observer, which can listen get/set event on the sub-properties of the data object. Implement a dependency object, which add a list of watchers for each sub-property of a data object. Implement a directive & expression compiler. It scan, analyze the directive or expression in each element node, evaluate the value of the directives according to their names. Implement a watcher object, and add it into as a observer of the sub-properties of the data object. When the sub-properties of the data object get mutated, the dependency object will get notified, & it will update all subscribers of the sub-property - the watcher objects, automatically.

Table of contents

1. Observe operation
2. Property dependencies
3. Collect subscribers
4. Template compiler
5. View update
6. MVVM

Demo1: Observe operation(Source)

Use tree recursion to traverse all sub-property nodes of the data object. For each node, bind get/set event using object.defineProperty() .

Demo2: Property dependencies(Source)

Define a Dependency class, which is a property dependency for a data object. Also, define a Watcher class, which is a dep listener/subscriber. This class stores a exp field, which is an expression in directives and interpolations of a Vue component.

Demo3: Collect subscribers(Source)

When the sub-property of the data object is accessed, a dep object starts to collect subscribers/listener. It will add a watcher object as a subscriber of it.

Demo4: Template compiler(Source)

A compiler will receive a node tree(That's way must have a root tag), and return a token stream. The compiler analyzes each directive & interpolation, then it will create a watcher object for evaluating each value of them. When a watcher object is created, it will evaluate the exp field, which stores the expressions of the directives or interpolations. So, all the sub-properties of the data object will be accessed. It starts to collect subscribers, as shown in Demo4.

Demo5: View update(Source)

When create a watcher object using an expression in directives or interpolations, it also binds a update view function to update the view. If the dependent sub-property of the data object get mutated, the dep object of it will be notified, and all subscribers(watchers) of the dep object will be updated. Then, each watcher will call its update view function to update the view.

Demo6: MVVM(Source)

The main program of a Vue instance. It need to traverse all sub-properties of a data objects, as shown in Demo1. Then, start to compile the template to collect subscribers of each sub-property of the data object, as shown in Demo4.

MVVM architecture

• Subscriber collections

          init              trigger get event              add subscribers
Template --------> Watcher  ------------------> Observe --------------------> Dep 

• One-way data binding

       set                     notify              update           view update
Data -------> Observe --------------------> Dep  ---------> Watcher -------------> View

The overall patterns of MVVM is like this

License

MIT

Reference

[1] Design patterns: elements of reusable object-oriented software
[2] <<JavaScript设计模式与开发实践>>
[3] Wikipedia Observer pattern