js模板

Posted 土豆zhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js模板相关的知识,希望对你有一定的参考价值。

参考连接:

http://www.jiangkunlun.com/2012/05/js_%E6%A8%A1%E6%9D%BF/

http://www.360doc.com/content/16/0115/10/597197_528136785.shtml

核心是将模板代码转变成了一个拼接字符串的 function,每次拿数据 call 这个 function。

因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给 IE 使用,最好将字符串拼接方法改为 Array.push() 的形式。

简单实用的js模板引擎

 

不足50行的js模板引擎,支持各种js语法:

<script id="test_list" type="text/html">
<%=
	for(var i = 0, l = p.list.length; i < l; i++){
		var stu = p.list[i];
=%>
	<tr>
		<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
		<td><%==stu.age=%></td>
		<td><%==(stu.address || ‘‘)=%></td>
	<tr>
 
<%=
	}
=%>
</script>

“<%= xxx =%>”内是js逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数,也可以在调用“new JTemp”时设置成别的参数名

调用:

$(function(){
	var temp = new JTemp(‘test_list‘),
		html = temp.build(
			{list:[
           		{name:‘张三‘, age:13, address:‘北京‘},
        		{name:‘李四‘, age:17, address:‘天津‘},
        		{name:‘王五‘, age:13}
        	]});
	$(‘table‘).html(html);
});

上面的temp生成以后,可以多次调用build方法,生成html

一下是模板引擎的代码:

var JTemp = function(){
	function Temp(htmlId, p){
		p = p || {};//配置信息,大部分情况可以缺省
		this.htmlId = htmlId;
		this.fun;
		this.oName = p.oName || ‘p‘;
		this.TEMP_S = p.tempS || ‘<%=‘;
		this.TEMP_E = p.tempE || ‘=%>‘;
		this.getFun();
	}
	Temp.prototype = {
		getFun : function(){
			var _ = this,
				str = $(‘#‘ + _.htmlId).html();
			if(!str) _.err(‘error: no temp!!‘);
			var str_ = ‘var ‘ + _.oName + ‘=this,f=\‘\‘;‘,
				s = str.indexOf(_.TEMP_S),
				e = -1,
				p,
				sl = _.TEMP_S.length,
				el = _.TEMP_E.length;
			for(;s >= 0;){
				e = str.indexOf(_.TEMP_E);
				if(e < s) alert(‘:( ERROR!!‘);
				str_ += ‘f+=\‘‘ + str.substring(0, s) + ‘\‘;‘;
				p = _.trim(str.substring(s+sl, e));
				if(p.indexOf(‘=‘) !== 0){//js语句
					str_ += p;
				}else{//普通语句
					str_ += ‘f+=‘ + p.substring(1) + ‘;‘;
				}
				str = str.substring(e + el);
				s = str.indexOf(_.TEMP_S);
			}
			str_ += ‘f+=\‘‘ + str + ‘\‘;‘;
			str_ = str_.replace(/\n/g, ‘‘);//处理换行
			var fs = str_ + ‘return f;‘;
			this.fun = Function(fs);
		},
		build : function(p){
			return this.fun.call(p);
		},
		err : function(s){
			alert(s);
		},
		trim : function(s){
			return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); 
		}
	};
	return Temp;
}();

核心是将模板代码转变成了一个拼接字符串的function,每次拿数据call这个function。

因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给IE实用,最好将字符串拼接方法改为Array.push()的形式

以上是关于js模板的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Eclipse 中的通用代码片段或模板

简易前端模板引擎