Using proxy to implement a simple and complete MVVM Library

Keywords: Javascript Fragment github Vue Attribute


This article was first published in Front-end Development Blog

mvvm is a necessary mode of daily business development at the front end of the current era (such as react, vue, angular, etc.). Using mvvm, developers can concentrate more on business logic than on how to operate dom. Although it has been 9012 years now, the introduction of the related principles of mvvm has been rotten, but for the purpose of learning basic knowledge (vue3.0 implemented by proxy is still under development), after referring to the overall idea of vue.js before, I have realized a simple mvvm realized by proxy.

This project code has been source in github The project is continually improving. Welcome to exchange and study. If you like, please order a star.

Final effect

    <div id="app">
import MVVM from '@fe_korey/mvvm';
new MVVM({
  view: document.getElementById('app'),
  model: {
    title: 'hello mvvm!'
  mounted() {
    console.log('Host compilation completed,Welcome to use MVVM!');

Structural overview

  • Complier module implements parsing, collecting instructions, and initializing views
  • Observer module implements data monitoring, including adding subscribers and notifying subscribers
  • Parser module implements parsing instructions and provides a new way to update views of the instructions
  • Watcher Module Implements the Association of Instructions and Data
  • Dep module implements a subscription center responsible for collecting and triggering subscription lists for each value of the data model

The process is as follows: Complier collects and compiles instructions, chooses different Parsers according to different instructions, and updates the initial view according to the changes of Parser's subscription data in Watcher. Observer monitors data changes and notifies Watcher, who then notifies the update refresh function in the corresponding Parser to refresh the view.

Module Details


  • Import the whole data model data into Observer module for data monitoring

    this.$data = new Observer(option.model).getData();
  • The whole dom is traversed through a loop, and all instructions of each dom element are scanned and extracted.

    function collectDir(element) {
      const children = element.childNodes;
      const childrenLen = children.length;
      for (let i = 0; i < childrenLen; i++) {
        const node = children[i];
        const nodeType = node.nodeType;
        if (nodeType !== 1 && nodeType !== 3) {
        if (hasDirective(node)) {
        if (node.hasChildNodes() && !hasLateCompileChilds(node)) {
  • Compile each instruction and select the corresponding parser Parser

    const parser = this.selectParsers({ node, dirName, dirValue, cs: this });
  • Pass the resulting parser Parser into Watcher and initialize the view of the dom node

    const watcher = new Watcher(parser);
    parser.update({ newVal: watcher.value });
  • After all instructions are parsed, the MVVM compilation is triggered to complete the callback of $mounted()

  • The document fragment document. createDocument Fragment () is used to replace the real dom node fragment. After compiling all instructions, the document fragment is appended back to the real dom node.

    let child;
    const fragment = document.createDocumentFragment();
    while ((child = this.$element.firstChild)) {
    //After analysis
    delete $fragment;


  • After compiling the instructions in Complier module, choose different auditory parsers to parse. At present, they include ClassParser, Display Parser, ForParser, IfParser, Style Parser, TextParser, ModelParser, OnParser, Other Parser and other parsing modules.

    switch (name) {
      case 'text':
        parser = new TextParser({ node, dirValue, cs });
      case 'style':
        parser = new StyleParser({ node, dirValue, cs });
      case 'class':
        parser = new ClassParser({ node, dirValue, cs });
      case 'for':
        parser = new ForParser({ node, dirValue, cs });
      case 'on':
        parser = new OnParser({ node, dirName, dirValue, cs });
      case 'display':
        parser = new DisplayParser({ node, dirName, dirValue, cs });
      case 'if':
        parser = new IfParser({ node, dirValue, cs });
      case 'model':
        parser = new ModelParser({ node, dirValue, cs });
        parser = new OtherParser({ node, dirName, dirValue, cs });
  • Different parsers provide different view refresh functions update(), update the dom view through update

    function update(newVal) {
      this.el.textContent = _toString(newVal);
  • OnParser Resolve event binding with data model methodsField correspondence

    //See for details.
    el.addEventListener(handlerType, e => {
      handlerFn(scope, e);
  • ForParser parsing array

    // See for details.
  • ModelParser resolves bidirectional binding. At present, it supports input [text/password] & textarea, input [radio], input [checkbox], select four cases of bidirectional binding, double binding principle:

    • Data Change Update Form: Like other instructions to update views, the value of the update form is triggered by the update method

      function update({ newVal }) {
        this.model.el.value = _toString(newVal);
    • Form change update data: listen for form change events such as input,change, set data model in callbacks

      this.model.el.addEventListener('input', e => {


  • The core of MVVM model is to monitor the data through the get and set method of Object.defineProperty. Subscribers are added to get, and the subscribers are notified to update the view in set. In this project, Proxy is used to implement data monitoring, which has three advantages:

    • Proxy can listen directly to objects rather than attributes
    • Proxy can monitor array changes directly
    • Proxy has up to 13 interception methods. consult
      The disadvantage is compatibility and can not be smoothed by polyfill. consult Compatibility
  • Note that Proxy only listens to each of its attributes. If the attribute is an object, the object will not be listened on, so it needs to be listened on recursively.
  • After setting up the listener, return a Proxy instead of the original data object
var proxy = new Proxy(data, {
  get: function(target, key, receiver) {
    //Add subscribers if conditions are met
    return Reflect.get(target, key, receiver);
  set: function(target, key, value, receiver) {
    //Notify subscribers if conditions are met
    return Reflect.set(target, key, value, receiver);


  • In the Complier module, each parsed Parser is directly bound to the data model and triggers Observer's get listener to add a Watcher.

    this._getter(this.parser.dirValue)(this.scope || this.parser.cs.$data);
  • When the data model changes, it triggers - > Observer's set listener - > Dep's notfiy method (notifying subscribers of all subscription lists) - > Update method of executing all Watcher s of subscription list - > Perform update - > Complete update view of corresponding Parser
  • The set method in Watcher is used to set bidirectional binding values, paying attention to the access level


  • MVVM's subscription center, where subscription lists for each attribute of the data model are collected
  • Includes methods such as adding subscribers, notifying subscribers, etc.
  • Essentially a publish/subscribe model
class Dep {
  constructor() {
    this.dependList = [];
  addDep() {
  notfiy() {
    this.dependList.forEach(item => {


At present, the mvvm project only realizes the function of data binding and view updating. Through the implementation of this simple wheel, we have re-understood some basic knowledge such as dom operation, proxy, publishing and subscribing mode and so on. At the same time, we welcome you to discuss and exchange, and will continue to improve later!

Posted by phpnewbie81 on Tue, 10 Sep 2019 01:59:23 -0700