;!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+，火狐，谷歌，欧朋，苹果
效果图：
相关推荐
本篇文章将深入探讨如何从零开始构建一个简单的JavaScript模板引擎，逐步改进并理解其核心原理。 首先，我们需要理解模板引擎的基本工作流程。模板引擎接受两部分输入：数据和模板。模板通常是一段包含占位符的HTML...
在“性能卓越的js模板引擎”这一主题下，我们将深入探讨新一代JavaScript模板引擎的特点、工作原理以及其在实际开发中的应用。 新一代JavaScript模板引擎如`aui-art-template`（文件名9c6b385可能指的是该模板引擎...
腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。
百度JS模板引擎，简称baiduTemplate，是一个由百度公司开发的JavaScript模板引擎，主要用于前端开发中数据与HTML的绑定，实现动态内容的渲染。在1.0.6版中，百度Template进行了重构，修复了定义变量的bug，并且增加...
ArtTemplate，作为一款轻量级的JavaScript模板引擎，因其高效、易用和小巧的特点，在众多项目中得到了广泛应用。本教程将深入探讨ArtTemplate的基础知识、核心功能以及实际应用，帮助开发者更好地理解和掌握这一技术...
比较简单，又小巧的js模板引擎，非常好用的。
**基于jQuery开发的JavaScript模板引擎 - jTemplates** jTemplates是一个基于jQuery的JavaScript模板引擎，它允许开发者使用HTML模板来动态渲染数据，极大地提高了Web应用的界面更新效率和用户体验。通过将数据与...
**Mustache.js：JavaScript模板引擎详解** Mustache.js，又称为mustache，是一款轻量级且功能强大的模板引擎，专为JavaScript设计。它遵循“逻辑less”的理念，将视图和数据分离，使得代码更易于理解和维护。...
在这个只有20行的JavaScript模板引擎实例中，我们将深入理解如何实现这一功能。 首先，模板引擎的核心任务是找到模板字符串中的标识片段，即`<%...%>`，并用提供的数据对象替换这些片段。在给定的代码中，使用了一...
Template.js就是这样一个JavaScript模板引擎，它被设计用来帮助开发者快速、高效地实现动态内容的展示。 **template.js介绍** template.js是一款轻量级的JavaScript模板引擎，它提供了简洁的语法和高效的执行效率...
在网页开发中，图片轮播、JavaScript模板引擎和倒计时功能是常见的需求，它们能够增强用户体验，提高网站的互动性和吸引力。以下是对这些技术的详细介绍： ### 图片轮播 图片轮播（Image Carousel）是一种展示多张...
Template.js作为JavaScript模板引擎，具有以下优点： - **简洁的语法**：它的模板语法简单直观，易于学习和使用。 - **高效性能**：通过预编译模板为JavaScript函数，可以在运行时快速生成HTML，提高页面渲染速度。 ...
laytpl是一款颠覆性的JavaScript模板引擎，它用巧妙的实现方式，将自身的体积变得小巧玲珑，不仅性能接近极致，并且还具备传统js引擎的几乎所有功能。所有的变身魔法都由不到2KB的代码创造，laytpl视图用最轻量的...
Velocity 是基于Java的模板引擎，广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含 基本数据类型、变量赋值和函数等功能。Velocity.js 支持 Node.js 和浏览器环境。...
### artTemplate：高性能JavaScript模板引擎 #### 一、引言 随着Web技术的不断发展，前端应用日益复杂，JavaScript作为Web开发的重要组成部分，其作用愈发凸显。不仅在浏览器端发挥着核心作用，在服务器端（如Node...
Surge.js 是新的示例，更快的 Javascript 模板引擎，语法跟 Liquid 和 Django template一样 。Surge.js 会解析 Html 模板中的 JavaScript 函数，编译的函数会被缓存。教程速度测试 V8 Javascript engine 的测试...
JavaScript模板引擎是一种在JavaScript中处理数据和HTML组合的工具，它的主要目的是将数据逻辑与页面展示分离，提高代码的可维护性和复用性。在Web开发中，它扮演着一个预处理器的角色，允许开发者编写类似于HTML的...
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1