Vue系列二十三：源码解析-模板解析

青旅半醒 2022-01-30 11:37 355阅读 0赞

模板解析(compile.js)  
1、模板解析的关键对象：compile对象  
2、模板解析的基本流程:  
（1）、将el的所有子节点取出, 添加到一个新建的文档fragment对象中  
（2）、对fragment中的所有层次子节点递归进行编译解析处理  
  对表达式文本节点进行解析  
  对元素节点的指令属性进行解析  
  事件指令解析  
  一般指令解析  
（3）、 将解析后的fragment添加到el中显示  
3、解析表达式文本节点: `textNode.textContent = value`  
（1）、根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1  
（2）、从data中取出表达式对应的属性值  
（3）、将属性值设置为文本节点的textContent  
4、事件指令解析: `elementNode.addEventListener(事件名, 回调函数.bind(vm))`  
`v-on:click="test"`  
（1）、从指令名中取出事件名  
（2）、根据指令的值(表达式)从methods中得到对应的事件处理函数对象  
（3）、给当前元素节点绑定指定事件名和回调函数的dom事件监听  
（4）、指令解析完后, 移除此指令属性  
5.一般指令解析：`elementNode.xxx = value`  
（1）、得到指令名和指令值(表达式)  
（2）、从data中根据表达式得到对应的值  
（3）、根据指令名确定需要操作元素节点的什么属性  
  v-text—textContent属性  
  v-html—innerHTML属性  
  v-class–className属性  
（4）、将得到的表达式的值设置到对应的属性上  
（5）、移除元素的指令属性

<body>
    
    <div id="test">
      <p>{
       {name}}</p>
    </div>
    
    <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: {
          name: 'Hello'
        }
      })
    </script>
    </body>

<body>
      <div id="test">
        <p>{
       {name}}</p>
        <button v-on:click="show">提示</button>
      </div>
    
      <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: {
            name: 'hello'
          },
          methods: {
            show () {
              alert(this.name)
            }
          }
        })
      </script>
    </body>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>06_模板解析_一般指令</title>
      <style>
        .aa {
          color: red;
        }
        .bb{
          font-size: 30px;
        }
      </style>
    </head>
    <body>
    <div id="test">
      <p v-text="msg"></p>
      <p v-html="msg"></p>
      <p class="bb" v-class="myClass">元宵快乐！</p>
    </div>
    
    <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="http://www.baidu.com">百度</a>',
          myClass: 'aa'
        }
      })
    </script>
    </body>
    </html>