vue2模版编译 render 方法 属性格式化介绍

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

经过vue2的AST方法的解析，我们得到了模版的AST树，可以看文章 vue2 模版编译start，end 和chars的方法介绍 我们得到的树形结构请看图片

上面是自己洗的的AST解析出来的树形结构，和vue本身相差不太多，我们下面需要吧把AST树转换为rendercode的形式，有_c()//在vue里是创建元素,_v()创建文本节点,_s()把{{}}里的变量转化为数据，我们就要用上面三个函数，对AST树的内容进行字符串拼接，可以看下我们使用函数拼接成的字符串样子，

 `_c('div',
             { id:"app",style:{ color:blue, font-size: 20px; },class: 'div' },
             _v("你好",  +_s(name),
             _c('h2',_v(_s(name)))
             _c('ul',_c('li',_v(_s(age)),_c(_s(info.waek)))
             )
             )
    )` 

就要用吧反回来AST转化为上面那种形式，拼接字符串很麻烦，一个符号错了，都会直接报废，拼接的时候一定要小心，下面我们用代码实现 新加了一个generate文件 generate.js

function generate(el) {
   let code = `
      _c(${el.tag}, // 这是对第一个标签进行处理
         ${el.attrs.length>0?`${formProps(el.attrs)}`:'undefined'}
        ) 
   `
}

// 介绍一下 formProps方法 主要是格式化属性用的

function formProps(attrs) { // 主要是对属性进行格式化的，也是字符串话
      // 处理的属性也需要拼接字符串
    let attrStr = '' 
    for (let i=0;i<attrs.length;i++) {
        let attr = attrs[i]
        // attrs 数组
        // 如果是style的话还是需要特殊处理的
        if (attr.tagname=="style") {
          let styleAttrs = {};
          // 这里主要是把style转成对象的那种形式而不是字符串
          attr.value.split(';').forEach(styleAttr=>{
              let [ key,value ] = styleAttr.split(':')
              styleAttrs[key] = value
          })
          attr.value = `${JSON.stringify(styleAttrs)}`
        } 
        str+=`${attr.name}:${attr.value},` // 需要拼接字符串
    }
    console.log(`${str.slice(0,-1)}`)
    return `{ ${str.slice(0,-1)} }` // 把字符串最后一个逗号去掉
}

方法已经写完了大家看下打印出来的属性

上是我们打印出来格式化后的字符串

属性格式化完成