Shulou(Shulou.com)06/03 Report--

Author: brother Dao (Zhu Jian)

Mvvm pattern is the abbreviation of model-view-viewmodel pattern. The implementation of single / two-way data binding frees front-end developers from complicated dom events and conveniently deals with the linkage between data and ui. This paper will start with the bidirectional data binding of vue and analyze the core code and idea of mvvm library design.

1. Demand arrangement and analysis

Demand:

Once the data is changed, update the ui corresponding to the data

When ui changes, events are triggered to change the data corresponding to ui.

Analysis:

Get the refresh function through the instruction of the dom node, which is used to refresh the specified ui.

Implement a bridging method to associate the refresh function with the required data.

Listen for data changes, and then call the refresh function through the bridge method after the data changes.

Ui changes trigger the corresponding dom events that change specific data.

2. Realization ideas

Implement observer, redefine data, and add setter,getter to each attribute on the data to listen for changes in data.

Implement compile, scan template template, and extract instruction information from each dom node.

To implement directive, the corresponding directive instance is instantiated through the instruction information, and different types of directive have different refresh function update.

To implement watcher, let the property listening function of observer correspond to the update function of directive one by one, so as to update the view after the data changes.

3. Module division

MVVM is currently divided into four observer,compile,directive,watcher modules.

4. Data monitoring module observer

The monitoring of data is realized by the way of object.defineProperty in es5 specification.

5. Thought of realization

Recursively traverse data and add set,get method to all attributes under data to intercept all attributes.

Note: the object may contain array properties, the array has built-in push,pop,splice and other methods to change the internal data.

The way to do this is to change the prototype chain of the array, add a layer of custom push,pop,splice methods to the prototype chain to intercept, add our own callback function to these methods, and then call the native push,pop,splice and other methods.

Export function defineProperty (obj, prop, val) {if (prop = ='_ observe__') {return;} val = val | | obj [prop]; var dep = new Dep (); obj.__observe__ = dep;var childDep = addObserve (val); Object.defineProperty (obj, prop, {get: function () {var target = Dep.target; if (target) {dep.addSub (target)) If (childDep) {childDep.addSub (target);}} return val;}, set: function (newVal) {if (newValuval) {val = newVal; dep.notify ();});}

6. Compiler module compiler

The idea of realization is:

Traverse the dom on the template template and save it to the document fragment frag

Traversing frag, getting attribute information of node through attributes, filtering attribute information through regular expression, and then getting instruction information of element node and document node var complieTemplate = function (nodes, model) {if ((nodes.nodeType = 1 | | nodes.nodeType = = 11) & &! isScript (nodes)) {paserNode (model, nodes); if (nodes.hasChildNodes ()) {nodes.childNodes.forEach (node= > {complieTemplate (node, model);})}

7. Instruction module directive

Instruction information, such as: vmurtextjigmt vsquire vsquire model and so on.

The initialization action required by each instruction information and the refresh function update of the instruction may be different, so we abstract it to make a separate module. Of course, there are also common properties such as public properties, unified watcher instantiation, unbind.

The update function defines how to render the ui. For example, the update function of the simple vtext instruction is as follows:

Vt.update = function (textContent) {this.el.textContent = textContent;}

9. Structure diagram

Cdn.xitu.io/2019/9/3/16cf5cc170b0c95d?w=640&h=522&f=png&s=22778 ">)

9. Data subscription module watcher

The function of watcher is to associate directive with observer modules. Do two things during initialization:

Pass in the update function of the directive module as an argument and store it in its own update property.

Call getValue to get the specific property value of the object data, which in turn triggers the getter method of the property function previously defined in observer.

Because the dep variable defined in the defineProperty function is referenced in the setter and getter functions, the dep variable is not released in the closure state. In this case, the subscriber watcher is obtained by judging the existence of Depend.target in the getter method and stored through the publisher dep. Each attribute of the data has a unique dep variable, which records the information of all subscribers' watcher. Once the property changes, dep.notify () is triggered when the setter function is called, notifying all subscribed watcher, then executing all refresh functions associated with the attribute, and finally updating the specified ui.

Watcher initialization part code:

Depend.target = this;this.value = this.getValue (); Depend.target = null

The observer.js attribute definition code:

Export function defineProperty (obj, prop, val) {if (prop = ='_ observe__') {return;} val = val | | obj [prop]; var dep = new Dep (); obj.__observe__ = dep;var childDep = addObserve (val); Object.defineProperty (obj, prop, {get: function () {var target = Dep.target; if (target) {dep.addSub (target)) If (childDep) {childDep.addSub (target);}} return val;}, set: function (newVal) {if (newValuval) {val = newVal; dep.notify ();});}

10. Flow chart

11. Summary

This paper basically collates and splits the mvvm library, as well as the realization of the split module one by one to achieve the overall two-way binding function, of course, the current market mvvm library function is definitely more than this, this article is only a brief description of the core code. If there are any problems in thinking and implementation, please correct them, thank you for reading!

Original code: https://github.com/laughing-pic-zhu/mvvm

Students who want to know more can visit the Qilan community and discuss and study with you.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.