发布日期 » 2018年5月25日 星期五

版权声明 » 帅华君原创文章,未经允许不得转载。

javascript简易模版解析

事情的起因源自实在受不了js脚本中夹杂者html,于是想着在页面中预先存放需要用到的html片段,但是如何替换html片段中的一些数据呢。解析模版片段并使用传入的数据替换模版片段中的内容。

其实引起这个问题的本质是前端如何优雅地将数据的改变(状态的更新)反映到UI的改变。

流程大致是这样子的:

  • 1、获取html代码片段
  • 2、清洗html代码片段
  • 3、解析html代码片段中的变量
  • 4、将需要渲染的变量对号入座
var cleanTemplate = function(script){
  return script ? script.innerHTML.replace(/\s+?</g,'<').replace(/\n/g,'') : ''
}
var parseTemplate = function(t, o){
  if(!t || typeof t != 'string') return ''
  let res = t
  if(o){
    var temp, re = /#{(.+?)}/g
    while(temp = re.exec(t)){
      if(!o.hasOwnProperty(temp[1])) continue
      if(temp[1] in o){
        var _re = new RegExp(temp[0])
        res = res.replace(_re, o[temp[1]])
      }
    }
  }
  res = res.replace(/#{(.+?)}/g,'')
  return res
}
window.onclick = function(){
  var template = cleanTemplate(document.querySelector('#SAYHITEMPLATE'))
  console.log(template)
  var html = parseTemplate(template, {
    url: 'http://www.shuaihua.cc/',
    message: 'hi leo chen!'
  })
  document.querySelector('#wrap').innerHTML = html
}