Vue源码学习笔记-模板引擎(一)

107 阅读1分钟

字符串模板

渲染字符串 是 慢于DOM的

  1. DOM方式
  2. 数据JOIN方式 [ "
  3. ", "", "master", "", "
  4. " ].join() // 为了格式清晰换行 3.反引号法 ES 6 4.mustache 小胡子

正则模式

// replace 第二个参数可以是函数 
// () 捕获内容, {} 次数
const templateSr = '<h1>打开个字符串{{thing}},好{{adj}}字符串</h1>'
const data = {
  thing: '哈哈哈',
  adj: '长长的',
}
templateSr.replace(/\{\{(\w+)\}\}/g, (findStr, $i) => {
  console.log(findStr)
  return data[$i]
})
// ------------------------log------------
{{thing}}
{{adj}}
"<h1>打开个字符串哈哈哈,好长长的字符串</h1>"