;!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 模板引擎</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+,火狐,谷歌,欧朋,苹果
效果图:
相关推荐
记录一个js模板引擎从无到有一步步实现改进的过程,内容直接以一个个html文件直观呈现
腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。
比较简单,又小巧的js模板引擎,非常好用的。
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。所有的变身魔法都由不到2KB的代码创造,laytpl视图用最轻量的...
Velocity 是基于Java的模板引擎,广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含 基本数据类型、变量赋值和函数等功能。Velocity.js 支持 Node.js 和浏览器环境。...
Surge.js 是新的示例,更快的 Javascript 模板引擎,语法跟 Liquid 和 Django template一样 。Surge.js 会解析 Html 模板中的 JavaScript 函数,编译的函数会被缓存。教程速度测试 V8 Javascript engine 的测试...
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
ECT是一个新兴的JavaScript模板引擎,主要致力于性能表现。 ECT开发者称,与其他引擎(如Dust、Hogan.js、Fest、Handlebars.js、doT、Swig、Eco、EJS、CoffeeKup和Jade等)相比,ECT目前是最快的,见基准测试。你...
template.js的fis编译插件——一款javascript模板引擎
template.js的webpakc编译loader——一款javascript模板引擎
doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 标签:doTjs
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。特性:模版编译,渲染支持所有主流浏览器及Node...
前端js模板引擎artTemplate视频教程,wangpan链接下载
consolidate.js是一款javascript 模板引擎整合库.支持现今流行的多种模板引擎. 标签:consolidate
DustJS 是一个支持浏览器和 Node.js 的异步模板引擎。特点:async/streaming operationbrowser/node compatibilityextended Mustache/ctemplate syntaxclean, low-level APIhigh performancecomposable templates ...
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又...
新一代 javascript 模板引擎
Tempos高效的Javascript模板引擎
Nunjucks 是一个更复杂的 JavaScript 模板引擎,提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。示例代码:{% extends "base.html" %} {% block header %} <h1>{{ title }} {% endblock %...
百度JS模板引擎 baiduTemplate 1.0.6 版 重构代码,修改定义变量的bug,增加对版本号的标注