实现简易的模板引擎

1.实现步骤

(1)定义模板结构

(2)预调用模板引擎

(3)封装template函数

(4)导入并使用自定义的模板引擎

 

 

定义模板结构

 

//定义数据
  var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }

  //调用模板引擎
  var htmlStr = template('tpl-user', data)

  //渲染HTML结构
  document.getElementById('user-box').innerHTML = htmlStr

封装函数调用

function template(id, data) {
  var str = document.getElementById(id).innerHTML
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/

  var pattern = null
  while ((pattResult = pattern.exec(str))) {
    str = str.replace(pattResult[0], data[pattResult[1]])
  }

  return str
}