超简单的纯前端模板引擎,只有几十行。

简单好用的纯前端模板引擎,AJAX的好搭档!
github地址:https://github.com/shalldie/mini-tpl

引擎源码

/**
 * 简易模板 语法与ejs一样
 */
	(function(root, factory) {
		if (typeof define === "function" && define.amd) {
			define(factory);
		} else if (typeof exports === "object") {
			var mo = factory();
			mo.__esModule = true;
			mo["default"] = mo;
			module.exports = mo;
		} else {
			root.miniTpl = factory();
		}
	})(this, function() {
		function render(content, data) {
			data = data || {};
			var list = [ 'var tpl = "";' ];
			var codeArr = transform(content);
			for (var i = 0, len = codeArr.length; i < len; i++) {
				var item = codeArr[i];
				if (item.type == 1) {
					list.push(item.txt);
				} else if (item.type == 2) {
					var txt = "tpl+=" + item.txt + ";";
					list.push(txt);
				} else {
					var txt = 'tpl+="' + item.txt.replace(/"/g, '\\"') + '";';
					list.push(txt);
				}
			}
			list.push("return tpl;");
			return new Function("data", list.join("\n"))(data);
		}
		function transform(content) {
			var arr = [];
			var reg = /<%([\s\S]*?)%>/g;
			var match;
			var nowIndex = 0;
			while (match = reg.exec(content)) {
				appendTxt(arr, content.substring(nowIndex, match.index));
				var item = {
					type: 1,
					txt: match[1]
				};
				if (match[1].substr(0, 1) == "=") {
					item.type = 2;
					item.txt = item.txt.substr(1);
				}
				arr.push(item);
				nowIndex = match.index + match[0].length;
			}
			appendTxt(arr, content.substr(nowIndex));
			return arr;
		}
		function appendTxt(list, content) {
			content = content.replace(/\r?\n/g, "\\n");
			list.push({
				txt: content
			});
		}
		return render;
	});

使用方法

1、通过script标签定义模板

	 <script id="tplContent" type="text/html">
	 	<% for(var i=0; i < data.length; i++){
	 		var item = data[i];%>
	 		<tr>
	 			<td><%=item.id%></td>
	 			<%if(item.status == 0){%>
	 			<td>在线</td>
	 			<%}else{%>
	 			<td>离线</td>
	 			<%}%>
	 			<td><%=item.name%></td>
	 		</tr>
	 	<% } %>
	 </script>

2、使用模板

	 var _data = [{id:1, status:0, name: "张亮"},{id:2, status:1, name: "张良"},{id:3, status:0, name: "张梁"},{id:4, status:0, name: "张靓"}];
	 var myTemplate =  document.getElementById('tplContent').innerHTML; 
     var myHtml = miniTpl(myTemplate, _data);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值