art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/

特性

  • 拥有接近 JavaScript 渲染极限的的性能
  • 调试友好：语法、运行时错误日志精确到模板所在行；支持支持在模板文件上打断点（Webpack Loader）
  • 支持压缩输出页面中的 HTML、CSS、JS 代码
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 兼容 EJS、Underscore、LoDash 模板语法
  • 模板编译后的代码支持在严格模式下运行
  • 支持 JavaScript 语句与模板语法混合书写
  • 支持自定义模板的语法解析规则
  • 浏览器版本仅 6KB 大小

用法

（1）、使用

引用简洁语法的引擎版本，例如： <script src="dist/template.js"></script>

（2）、表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

（3）、输出表达式

对内容编码输出： {{content}}  
不编码输出： {{#content}}

编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

（4）、条件表达式

{{if admin}}

 <p>admin</p>

{{else if code > 0}}

 <p>master</p>

{{else}}

 <p>error!</p>

{{/if}}

（5）、遍历表达式

{{each list as value index}}

 <li>{{index}} - {{value.user}}</li>

{{/each}}

（6）、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：{{include 'template_name' news_list}}

例子1

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>basic-demo</title>

<script src="../dist/template.js"></script>

</head>

<body>

<div id="content"></div>

<script id="test" type="text/html">

{{if isAdmin}}

<h1>{{title}}</h1>

<ul>

 {{each list as value i}}

  <li>索引 {{i + 1}} ：{{value}}</li>

 {{/each}}

</ul>

{{/if}}

</script>

<script>

var data = {

 title: '基本例子',

 isAdmin: true,

 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

</script>

</body>

</html>

例子2

<html>

<head>

<meta charset="UTF-8">

<title>no escape-demo</title>

<script src="../dist/template.js"></script>

</head> 

<body>

 <h1>不转义HTML</h1>

 <div id="content"></div>

 <script id="test" type="text/html">

 <p>不转义：{{#value}}</p>

 <p>默认转义： {{value}}</p>

 </script> 

 <script>

 var data = {

  value: '<span style="color:#F00">hello world!</span>'

 };

 var html = template('test', data);

 document.getElementById('content').innerHTML = html;

 </script>

</body>

</html>

art-template

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>include-demo</title>

<script src="../dist/template.js"></script>

</head> 

<body>

<div id="content"></div>

<script id="test" type="text/html">

<h1>{{title}}</h1>

{{include 'list'}}

</script>

<script id="list" type="text/html">

<ul>

 {{each list as value i}}

  <li>索引 {{i + 1}} ：{{value}}</li>

 {{/each}}

</ul>

</script> 

<script>

var data = {

 title: '嵌入子模板',

 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

</script>

</body>

</html>

js模板引擎art-template使用方法的更多相关文章

  1. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  2. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  3. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

  4. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

  5. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  6. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

  7. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  8. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...

  9. android webview 中 js 模板引擎的使用

    最近在项目中要求用 webview 展示几个界面, 而后台返回的不是 html 而是 json 数据. 起初用 StringBuilder 一个一个拼 html, 后来感觉太繁琐,拼一个还行,拼多了就 ...

随机推荐

  1. Linux实例安装VNC Server实现图形化访问

    引自阿里云: https://help.aliyun.com/knowledge_detail/41530.html

  2. RS：关于协同过滤，矩阵分解，LFM隐语义模型三者的区别

    项亮老师在其所著的<推荐系统实战>中写道: 第2章 利用用户行为数据 2.2.2 用户活跃度和物品流行度的关系 [仅仅基于用户行为数据设计的推荐算法一般称为协同过滤算法.学术界对协同过滤算 ...

  3. 【LeetCode】3. Longest Substring Without Repeating Characters (2 solutions)

    Longest Substring Without Repeating Characters Given a string, find the length of the longest substr ...

  4. fedora下安装运行keil uVision 4 (MDK v4.7)

    先准备好mdk4.73.exe和和谐文件. 1.安装 wine 1.7 添加ppa sudo add-apt-repository ppa:ubuntu-wine/ppa      安装wine 1. ...

  5. Docker LNMP环境搭建

    原文地址:https://www.awaimai.com/2120.html 1 快速使用 2 安装docker和docker-compose 3 使用国内镜像仓库 4 目录说明 4.1 目录结构 4 ...

  6. CTreeCtrl鼠标双击响应函数中怎么知道双击的是哪个子项？

    原帖链接: http://bbs.csdn.net/topics/310185501 楼主: CTreeCtrl鼠标双击响应函数中怎么知道双击的是哪个子项? 6楼: CPoint pt;GetCurs ...

  7. MySQL 死锁与日志二三事

    最近线上 MySQL 接连发生了几起数据异常,都是在凌晨爆发,由于业务场景属于典型的数据仓库型应用,白天压力较小无法复现.甚至有些异常还比较诡异,最后 root cause 分析颇费周折.那实际业务当 ...

  8. Tomcat7环境下面MySQL 56/Oracle数据库连接池的配置

    环境: Tomcat7 MySQL56 mysql-connector-java-3.1.10-bin.jar 步骤: 1. 配置context.xml 此文件位于~\tomcat7\conf目录下面 ...

  9. vim快速指南

    vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握这三种模式十分重要: 命令模式:vi启动后默认进入的是命令模式,任何模式下,按[Esc]键都可以返回命令模式.输入模式:可输入字符,在底部显示“ ...

  10. 基于SSD固态硬盘的数据库性能优化

    基于SSD固态硬盘的数据库性能优化 2010-11-08 00:0051cto佚名   关键字:固态硬盘 数据库管理 SSD 企业软件热点文章 Java内存结构与模型结构分析 Oracle触发器的语法 ...