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. ibatis和myBatis打印sql语句的log4j配置文件

    1/ibatis:  log4j.rootLogger=debug, stdout, logfile   log4j.logger.com.ibatis=DEBUG log4j.logger.com. ...

  2. tensorflow动态设置trainable

    tensorflow中定义的tf.Variable时,可以通过trainable属性控制这个变量是否可以被优化器更新.但是,tf.Variable的trainable属性是只读的,我们无法动态更改这个 ...

  3. 使用Servlet发布WebService

    首先感谢熔岩的文章: http://lavasoft.blog.51cto.com/62575/227988 1.Eclipse安装上tomcat插件,http://www.eclipsetotale ...

  4. iOS与H5交互

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互.技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回,反向可以处理异步回调 ...

  5. Hyperscan 介绍与安装【转】

    来源:http://blog.sina.com.cn/s/blog_913a533b0102wc38.html Hyperscan 介绍与安装 (2016-01-27 16:22:32) 转载▼   ...

  6. C语言学习笔记 (010) - 编写strcpy函数

    很多公司的面试官在面试程序员的时候,要求应聘者写出库函数strcpy()的工作方式或者叫实现,很多人以为这个题目很简单,实则不然,别看这么一个小小的函数,它可以从三个方面来考查: (1)编程风格 (2 ...

  7. mysql 1449 ： The user specified as a definer ('root'@'%') does not exist

    1)创建试图时抛出此错误信息,如下图所示: 2)从网上搜索了一下,是SQL权限问题,通过如下的方式便可以解决: 3)再次执行创建视图的语句,验证一下问题是否已经解决,可以了,如下所示: 4)参考如下所 ...

  8. Docker 学习笔记 ---Docker组件

    Docker组件 1.  客户端:dockerclient 2.  服务端:dockerserver 3.  Docker镜像 4.  Registry 5.  Docker 容器 Docker客户端 ...

  9. iOS runtime执行时具体解释

    什么是runtime? runtime直译就是执行时间,run(跑,执行) time(时间),网上大家都叫它执行时,它是一套比較底层的纯C语言API,属于一个C语言库,包括了非常多底层的C语言API, ...

  10. SQL中特殊符号的使用

    1. & 在Oracle中,& 是从需要外部输入输入的变量,PS:MySqL中可以直接用"P&G"这样的字符串,故不存在本文所说的问题 如下SQL语句就不能 ...