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. （原)ubuntu中安装kate

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6339642.html 参考网址: https://kate-editor.org/build-it/# ...

  2. HDUOJ-----1074 Integer Inquiry

    Integer Inquiry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. [Spring学习笔记 1 ] Spring 简介，初步知识--Ioc容器详解 基本原理。

    一.Spring Ioc容器详解(1) 20131105 1.一切都是Bean Bean可是一个字符串或者是数字,一般是一些业务组件. 粒度一般比较粗. 2.Bean的名称 xml配置文件中,id属性 ...

  4. 单个APP页面支持屏幕旋转

    1.info中支持所有的方向 2.APPDelega.h中添加属性 @property (nonatomic,assign) BOOL allowRotate; APPdelegate.m中实现方法 ...

  5. nfs的优化

    总结和测试了一下自己的经验: NFS中的rsize.wsize rsize.wsize对于NFS的效能有很大的影响.wsize和rsize设定了SERVER和CLIENT之间往来数据块的大小,这两个参 ...

  6. Elasticstack 5.1.2 集群日志系统部署及实践

    Elasticstack 5.1.2 集群日志系统部署及实践 一.ELK Stack简介 ELK Stack 是Elasticsearch.Logstash.Kibana三个开源软件的组合,在实时数据 ...

  7. Javascript将html转成pdf,下载（html2canvas 和 jsPDF）

    最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-h ...

  8. 【JavaScript】浅析JavaScript对象如何添加属性和方法

    向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...

  9. 【Algorithm】选择排序

    一. 算法描述 选择排序:比如在一个长度为N的无序数组中,在第一趟遍历N个数据,找出其中最小的数值与第一个元素交换,第二趟遍历剩下的N-1个数据,找出其中最小的数值与第二个元素交换......第N-1 ...

  10. 《JAVA与模式》之简单工厂与工厂方法

    一.简单工厂 1.1 使用场景 1.工厂类负责创建的对象比较少: 2.客户只知道传入工厂类的参数,对于如何创建对象(逻辑)不关心: 3.由于简单工厂很容易违反高内聚责任分配原则,因此一般只在很简单的情 ...