字符串模板的实现

字符串模板的实现

• 字符串模板是针对大批量、多频率操作dom的解决方案，比如我们要根据数据动态创建一个多嵌套的元素并将其插入到页面中，如果我们采用常规创建dom元素的方式进行插，代码量会极其庞大，下面就是常规方式实现的功能

// 源数据
let data = {
   
  data: {
   
    li: [
      {
   
        span: '我是span',
        strong: '我是strong'
      },
      {
   
        span: '我是span',
        strong: '我是strong'
      },
      {
   
        span: '我是span',
        strong: '我是strong'
      }
    ],
    h2: '我是第二标题',
    p: '我是p标签'
  },
  id: 'containter',
}

function createDom(data){
   
  let div = document.createElement('div')
  div.id = data.id
  let ul = document.createElement('ul')
  let p = document.createElement('p')
  let pt = document.createTextNode(data.data.p)
  let h2 = document.createElement('h2')
  let ph = document.createTextNode(data.data.h2)
  p.app