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;
};

文章标签:javascript

永久链接:http://www.shuaihua.cc/article/javascript-front-end-template-parse

快速跳转:陈帅华 - 心头好文 - javascript - javascript简易模版解析

javascript-front-end-template-parse

发表日期:2018-5-25

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证