vue源码分析之模版解析的一般指令

- 日理万妓 2023-07-03 03:16 16阅读 0赞

#### 一、模版解析之一般指令的分析 ####

1.  **一般指令**：在`vue`中是比较常见的，比如`v-text`、`v-html`等等的一般指令。
2.  **模版解析之一般指令的实现过程**：

*  得到指令名和指令值(表达式) `text/html/class msg/myClass`
 *  从 `data` 中根据表达式得到对应的值
 *  根据指令名确定需要操作元素节点的什么属性 \* `v-text---textContent` 属性 \*`v-html---innerHTML` 属性 \* `v-class---className` 属性
 *  将得到的表达式的值设置到对应的属性上
 *  移除元素的指令属性

1.  **模版解析之一般指令的关键过程**：

// 解析: v-text/{ {}}
      text: function (node, vm, exp) { 
        this.bind(node, vm, exp, 'text');
      },
      // 解析: v-html
      html: function (node, vm, exp) { 
        this.bind(node, vm, exp, 'html');
      },
    
      // 解析: v-model
      model: function (node, vm, exp) { 
        this.bind(node, vm, exp, 'model');
    
        var me = this,
          val = this._getVMVal(vm, exp);
        node.addEventListener('input', function (e) { 
          var newValue = e.target.value;
          if (val === newValue) { 
            return;
          }
    
          me._setVMVal(vm, exp, newValue);
          val = newValue;
        });
      },
    
      // 解析: v-class
      class: function (node, vm, exp) { 
        this.bind(node, vm, exp, 'class');
      }

1.  **对于实现解析指令的核心过程**：

// 真正用于解析指令的方法
      bind: function (node, vm, exp, dir) { 
        /*实现初始化显示*/
        // 根据指令名(text)得到对应的更新节点函数
        var updaterFn = updater[dir + 'Updater'];
        // 如果存在调用来更新节点
        updaterFn && updaterFn(node, this._getVMVal(vm, exp));
    
        // 创建表达式对应的watcher对象
        new Watcher(vm, exp, function (value, oldValue) { /*更新界面*/
          // 当对应的属性值发生了变化时, 自动调用, 更新对应的节点
          updaterFn && updaterFn(node, value, oldValue);
        });
      },

1.  通过`_getVMVal()`和`_setVMVal()`的方法进行获取到值，以及对于值进行监听变化，相应进行值的变化，核心过程如下：

// 得到表达式对应的value
      _getVMVal: function (vm, exp) { 
        var val = vm._data;
        exp = exp.split('.');
        exp.forEach(function (k) { 
          val = val[k];
        });
        return val;
      },
    
      _setVMVal: function (vm, exp, value) { 
        var val = vm._data;
        exp = exp.split('.');
        exp.forEach(function (k, i) { 
          // 非最后一个key，更新val的值
          if (i < exp.length - 1) { 
            val = val[k];
          } else { 
            val[k] = value;
          }
        });
      }

1.  对于**更新节点方法的对象**，核心过程如下：

// 更新节点的textContent
      textUpdater: function (node, value) { 
        node.textContent = typeof value == 'undefined' ? '' : value;
      },
    
      // 更新节点的innerHTML
      htmlUpdater: function (node, value) { 
        node.innerHTML = typeof value == 'undefined' ? '' : value;
      },
    
      // 更新节点的className
      classUpdater: function (node, value, oldValue) { 
        var className = node.className;
        className = className.replace(oldValue, '').replace(/\s$/, '');
    
        var space = className && String(value) ? ' ' : '';
    
        node.className = className + space + value;
      },
    
      // 更新节点的value
      modelUpdater: function (node, value, oldValue) { 
        node.value = typeof value == 'undefined' ? '' : value;
      }

#### 二、模版解析之一般指令的实现 ####

1.  **Compile.js**

1.  **模版解析之一般指令的实现**：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模版解析之一般指令_MVVM</title>
        <style> .aClass { color: red; } .bClass { color: greenyellow; } </style>
    </head>
    <body>
        <div id="test">
            <p v-text="msg"></p>
            <p v-html="msg"></p>
            <p class="aClass" v-class="myClass">测试类名</p>
        </div>
    
    </body>
    <script type="text/javascript" src="./js/mvvm/compile.js"></script>
    <script type="text/javascript" src="js/mvvm/mvvm.js"></script>
    <script type="text/javascript" src="./js/mvvm/observer.js"></script>
    <script type="text/javascript" src="./js/mvvm/watcher.js"></script>
    <script type="text/javascript"> new MVVM({ el: "#test", data: { msg: '<a href="www.baidu.com">百度</a>', myClass: 'bClass' } }) </script>
    </html>