js模板引擎art-template.js使用方法

偏执的太偏执、 2022-06-04 05:48 171阅读 0赞

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

中文文档地址[https://aui.github.io/art-template/zh-cn/docs/][https_aui.github.io_art-template_zh-cn_docs]

下载地址: [https://github.com/aui/art-template][https_github.com_aui_art-template]

# 特性 #

[![chart][]][chart 1]

*  拥有接近 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）、条件表达式

![复制代码][copycode.gif]

{
        {
        if admin}} 
     <p>admin</p> 
    {
        {
        else if code > 0}} 
     <p>master</p> 
    {
        {
        else}} 
     <p>error!</p> 
    {
        {/if}}

![复制代码][copycode.gif]

（5）、遍历表达式

{
         {each list as value index}} 
     <li>{
        {index}} - {
        {value.user}}</li> 
    {
        {/each}}

（6）、模板包含表达式

用于嵌入子模板。

\{ \{include 'template\_name'\}\}

子模板默认共享当前数据，亦可以指定数据：\{ \{include 'template\_name' news\_list\}\}

例子1

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

例子2

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

art-template

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

[http://www.cnblogs.com/webapi/p/6881825.html][http_www.cnblogs.com_webapi_p_6881825.html]

[https_aui.github.io_art-template]: https://aui.github.io/art-template/
[https_aui.github.io_art-template_zh-cn_docs]: https://aui.github.io/art-template/zh-cn/docs/
[https_github.com_aui_art-template]: https://github.com/aui/art-template
[chart]: /images/20220604/0485c95f852046078d834b973132154c.png
[chart 1]: https://aui.github.io/art-template/rendering-test/
[EJS]: http://ejs.co/
[Underscore]: http://underscorejs.org/#template
[LoDash]: https://lodash.com/docs/#template
[copycode.gif]: /images/20220604/2cb06c2f6aef448084ca254b452c2e47.png
[http_www.cnblogs.com_webapi_p_6881825.html]: http://www.cnblogs.com/webapi/p/6881825.html