artTemplate模版引擎的使用

artTemplate:

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

1、特性

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

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

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

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

（5）、支持include语句

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

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

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

（9）、支持所有流行的浏览器

2、语法

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

② 逻辑表达式：<% %> 输出表达式：<%= 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}}

3、使用:

<!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对象里的属性。

秒客网

artTemplate模版引擎的使用

相关文章