JS 模板引擎

;!function() {
	"use strict";
	var f, b = { open: "{{", close: "}}" },
		c = { exp: function(a) { return new RegExp(a, "g") }, query: function(a, c, e) { var f = ["#([\\s\\S])+?", "([^{#}])*?"][a || 0]; return d((c || "") + b.open + f + b.close + (e || "")) }, escape: function(a) { return String(a || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;") }, error: function(a, b) { var c = "Laytpl Error："; return "object" == typeof console && console.error(c + a + "\n" + (b || "")), c + a } },
		d = c.exp,
		e = function(a) { this.tpl = a };
	e.pt = e.prototype, e.pt.parse = function(a, e) {
		var f = this,
			g = a,
			h = d("^" + b.open + "#", ""),
			i = d(b.close + "$", "");
		a = a.replace(/[\r\t\n]/g, " ").replace(d(b.open + "#"), b.open + "# ").replace(d(b.close + "}"), "} " + b.close).replace(/\\/g, "\\\\").replace(/(?="|')/g, "\\").replace(c.query(), function(a) { return a = a.replace(h, "").replace(i, ""), '";' + a.replace(/\\/g, "") + '; view+="' }).replace(c.query(1), function(a) { var c = '"+('; return a.replace(/\s/g, "") === b.open + b.close ? "" : (a = a.replace(d(b.open + "|" + b.close), ""), /^=/.test(a) && (a = a.replace(/^=/, ""), c = '"+_escape_('), c + a.replace(/\\/g, "") + ')+"') }), a = '"use strict";var view = "' + a + '";return view;';
		try { return f.cache = a = new Function("d, _escape_", a), a(e, c.escape) } catch(j) { return delete f.cache, c.error(j, g) }
	}, e.pt.render = function(a, b) { var e, d = this; return a ? (e = d.cache ? d.cache(a, c.escape) : d.parse(d.tpl, a), b ? (b(e), void 0) : e) : c.error("no data") }, f = function(a) { return "string" != typeof a ? c.error("Template not found") : new e(a) }, f.config = function(a) { a = a || {}; for(var c in a) b[c] = a[c] }, f.v = "1.1", "function" == typeof define ? define(function() { return f }) : "undefined" != typeof exports ? module.exports = f : window.laytpl = f
}();

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 模板引擎</title>
<script type="text/javascript" src="tpl.js"></script>
</head>
<body>
<script id="demo" type="text/html">
<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
	<li>
		<span>姓名：{{ d.list[i].name }}</span>
		<span>城市：{{ d.list[i].city }}</span>
	</li>
{{# } }}
</ul>
</script>

<!--第二步：建立视图。用于呈现渲染结果。-->
<div id="view"></div>

<script>
//第三步：渲染模版
var data = {
	title: 'onestopweb',
	list: [{name: '吴者然', city: '禾惠'}, {name: '时间城主', city: '妖都'}, {name: '景临境', city: '宿迁'}, {name: '暴天明', city: '秦国'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
	document.getElementById('view').innerHTML = html;
});
</script>
<!--
 一、模版语法
输出一个普通字段，不转义html：   {{ d.field }}
输出一个普通字段，并转义html：   {{= d.field }}
JavaScript脚本： {{# JavaScript statement }}

二、内置方法
1)：laytpl(template);   //核心函数，返回一个对象
  
  var tpl = laytpl(template);
  tpl.render(data, callback);   //渲染方法，返回渲染结果，支持异步和同步两种模式
    a)：异步
    tpl.render(data, function(result){
      console.log(result);
    });
    
    b)：同步
    var result = tpl.render(data);
    console.log(result);

  
2)：laytpl.config(options); //初始化配置
  options是一个对象
  {open: '开始标签', close: '闭合标签'}
  
3)：laytpl.v  //获取版本号
-->
</body>
</html>

PS：兼容IE6+，火狐，谷歌，欧朋，苹果

效果图：

猜你喜欢