发布日期 » 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;
};