artTemplate模版引擎的使用

时间 2019-11-29

标签 arttemplate 模版引擎使用繁體版

原文原文链接

artTemplate: javascript

template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户能够写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片断，渲染不一样的效果。css

一、特性html

（1）、性能卓越，拥有接近 JavaScript 渲染极限的的性能, 执行速度一般是 Mustache 的 20 多倍（性能测试）前端

（2）、调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）java

（3）、对 NodeJS Express 、Koa、Webpack友好支持json

（4）、支持模板继承与子模板数组

（5）、支持include语句浏览器

（6）、可在浏览器端实现按路径加载模板（详情）性能

（7）、支持预编译，可将模板转换成为很是精简的 js 文件测试

（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

（9）、支持全部流行的浏览器

二、语法

原生语法: ①引入插件文件：

② 逻辑表达式：<% %> 输出表达式：<%= content %>---输出是字符串里面能够写js代码、变量、判断...

简洁语法:

（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 进行遍历。

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

能够被简写为：

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

（6）、模板包含表达式

用于嵌入子模板。

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

三、使用:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/template.js" ></script>
   </head>
    
   <body>
    
       <div id="container"></div>
        
        
       // 模版
       <script type="text/html" id="div">
           <h1>{{name}}</h1>
           <ul>
               {{each lang}}
               <li>语言:{{$value.title}} 定义:{{$value.add}}</li>
               {{/each}}
           </ul>
       </script>
        
        
　　　　// 数据
       <script type="text/javascript">
           var data = {
               name:"前端语言",
               lang:[{
                   title:"html",
                   add:"超文本标记语言"
               },{
                   title:"css",
                   add:"层叠样式表"
               },{
                   title:"javaScript",
                   add:"添加动态特效"
               }]
           }
           var html = template('div',data);
           document.getElementById("container").innerHTML = html;
       </script>
   </body>
</html>

注意：在模板中，只能使用json对象，而不能使用json数组，由于art-template里只能获取json对象里的属性。