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. （原+转）使用anaconda遇到的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6669434.html 使用anaconda怎么感觉都是问题啊.... 1. Intel MKL FAT ...

  2. [转载]将archlinux&nbsp;2013-06-01版，安装配置为个人工作站

    原文地址:将archlinux 2013-06-01版,安装配置为个人工作站作者:老圃无蔓 安装所使用的镜像为:archlinux-2013.06.01-dual.iso.首先请看看我安装完成之后的效 ...

  3. WordPress固定链接修改后访问文章页面404

    如题, 修改固定链接为自定义结构后, 访问文章页面出现404的nginx错误. 解决:修改nginx.conf配置文件(/usr/local/nginx/conf/nginx.conf). 在serv ...

  4. Python字典按值排序的方法

    Python字典按值排序的方法: 法1: (默认升序排序,加  reverse = True 指定为降序排序) # sorted的结果是一个list dic1SortList = sorted( di ...

  5. windows下如何生成gitlab ssh公钥

    1.查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备份删除2.生存密钥: $ ssh-keygen -t rsa -C “你的邮箱”按3个回车,密码为空. Your ...

  6. mysql的内存使用

    Mysql Server Memory Usage = Sum of Global Buffers + (number of Connection * Per thread memory variab ...

  7. stm8 I/O口模式配置

    复位后的默认配置 :复位之后,所有的引脚都是悬浮输入模式. However, a few pins may have a different behavior. Refer to the datash ...

  8. hashCode方法

    hashCode方法: 当覆写(override)了equals()方法之后,必须也覆写hashCode()方法,反之亦然.这个方法返回一个整型值(hash code value),如果两个对象被eq ...

  9. Maven 遇到的问题记录及解决

    1. 打包或clean时报错:To see the full stack trace of the errors, re-run Maven with the -e switch [WARNING] ...

  10. Java 8 – How to sort a Map

    Java 8 – How to sort a Map 1. Quick ExplanationMap result = map.entrySet().stream() .sorted(Map.Entr ...