[前端学习笔记]模版引擎art-template

sillyxue

已于 2022-03-23 23:22:49 修改

阅读量1.7k

点赞数 1

分类专栏：前端文章标签：前端 template

于 2022-03-23 12:11:23 首次发布

本文链接：https://blog.csdn.net/sillyxue/article/details/123674610

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1. 模版引擎

根据程序员指定的模版结构和数据，自动生成一个完整的HTML页面。
原理：利用正则表达式对字符串进行替换。

2. 模版引擎优点

减少了字符串的拼接操作
代码结构更清晰
代码更易于阅读和维护

3. art-template

一个简约超快的模版引擎。
官网：http://aui.github.io/art-template/zh-cn/index.html

4. art-template使用步骤

1）导入art-template

<script src="./lib/template-web.js"></script>

2）定义数据对象

var data = { name: 'zs', age: 20 }

3）定义模版

<script type="text/html" id="tpl-user">
	<h1>{{name}}    ------    {{age}}</h1>
</script>

4）调用template函数

// template('模板的id', 需要渲染的数据对象)
var htmlStr = template('tpl-user',data)

5）渲染HTML结构

$('container').html(htmlStr)

结果显示：

5. art-template标准语法

art-template提供{{ }}语法格式，可以实现变量输出、对象属性输出、三元表达式输出、逻辑输出、算数运算输出…

变量输出：

{{name}}

原文输出：保证HTML标签正常渲染

// test包含HTML标签
{{@ test}}

算数运算输出：

{{a+b}}

条件输出：

{{if flag === 0}}
      flag的值是0
{{else if flag === 1}}
      flag的值是1
{{/if}}

循环输出：

{{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
{{/each}}

过滤器：类似管道操作符，上一个输出作为下一个输入。

{{regTime | dateFormat}}

// 定义处理时间的过滤器dateFormat
template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      // 必须return一个值，最终输出的内容
      return y + '-' + m + '-' + d
}

6. 新闻列表案例

<body>
    <div id="news-list">

    </div>
    <!-- 定义模版 -->
    <script type="text/html" id="tpl-news">
        {{each data}}
        <!-- $value是循环项的值 -->
        <div class="news-item">
            <img class="thumb" src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="" />
            <div class="right-box">
                <h1 class="title">{{$value.title}}</h1>
                <div class="tags">
                    {{each $value.tags}}
                    <span>{{$value}}</span>
                    {{/each}}
                </div>
                <div class="footer">
                    <div>
                        <span>{{$value.source}}</span>&nbsp;&nbsp;
                        <span>{{$value.time | dataFormat}}</span>
                    </div>
                    <span>评论数：{{$value.cmtcount}}</span>
                </div>
            </div>
        </div>
        {{/each}}
    </script>
</body>

$(function () {
    // 时间过滤器：补零函数
    function padZero(n) {
        if (n < 10) {
            return '0' + n;
        } else {
            return n;
        }
    }
    template.defaults.imports.dataFormat = function (data) {
        // 将时间字符串转化为Date格式
        var dt = new Date(data);
        var y = dt.getFullYear();
        var m = padZero(dt.getMonth() + 1);
        var d = padZero(dt.getDate());
        var hh = padZero(dt.getHours());
        var mm = padZero(dt.getMinutes());
        var ss = padZero(dt.getSeconds());
        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
    }
    // 获取新闻列表的函数
    function getNewsList() {
        $.get('http://www.liulongbin.top:3006/api/news', function (res) {
            if (res.status !== 200) {
                return alert('获取新闻列表数据失败！');
            }
            console.log(res.data);
            // 每一项的tags属性，从字符串 改造成 字符串数组
            for (var i = 0; i < res.data.length; i++) {
                res.data[i].tags = res.data[i].tags.split(',');
            }
            console.log(res.data);
            var htmlStr = template('tpl-news', res);
            $('#news-list').html(htmlStr);
        })
    }
    getNewsList();
})

sillyxue

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[前端学习笔记]模版引擎art-template

1. 模版引擎根据程序员指定的模版结构和数据，自动生成一个完整的HTML页面。原理：利用正则表达式对字符串进行替换。2. 模版引擎优点减少了字符串的拼接操作代码结构更清晰代码更易于阅读和维护3. art-template一个简约超快的模版引擎。官网：http://aui.github.io/art-template/zh-cn/index.html4. art-template使用步骤1）导入art-template<script src="./lib/template-
复制链接

扫一扫

专栏目录