;!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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'").replace(/"/g, """) }, 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 Template Engine</title> <script type="text/javascript" src="tpl.js"></script> </head> <body> <script id="demo" type="text/html"> <!--The first step: write a template. You can use a script tag to store the template, such as: --> <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> <!--Step 2: Create a view. Used to render rendering results. --> <div id="view"></div> <script> //Step 3: Render the template var data = { title: 'onestopweb', list: [{name: 'Wu Zheran', city: 'Hehui'}, {name: 'Time City Lord', city: 'Demon City'}, {name: 'Jinglinjing', city: 'Suqian' }, {name: 'Bao Tianming', city: 'Qin Kingdom'}] }; var gettpl = document.getElementById('demo').innerHTML; laytpl(gettpl).render(data, function(html){ document.getElementById('view').innerHTML = html; }); </script> <!-- 1. Template syntax Output a normal field without escaping html: {{ d.field }} Output a normal field, with html escaped: {{= d.field }} JavaScript脚本: {{# JavaScript statement }} The built-in method 1): laytpl(template); //Core function, returns an object var tpl = laytpl(template); tpl.render(data, callback); //Rendering method, returns the rendering result, supports both asynchronous and synchronous modes a): asynchronous tpl.render(data, function(result){ console.log(result); }); b): Synchronization var result = tpl.render (data); console.log(result); 2): laytpl.config(options); //Initialize the configuration options is an object {open: 'opening tag', close: 'closing tag'} 3): laytpl.v //Get the version number --> </body> </html>
PS: Compatible with IE6+, Firefox, Google, Opera, Apple
Effect picture: