轻量级模板引擎ArtTemplate

最新推荐文章于 2024-06-26 09:34:29 发布

weixin_34007020

最新推荐文章于 2024-06-26 09:34:29 发布

阅读量113

点赞数

文章标签：前端后端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000006126262

版权

这星期做了一个数据统计系统,基于需求便使用了一个模板引擎来渲染数据.
在这里模板引擎同后端的不太一样,主要是前端在开发过程中,对于数据处理之后插入到html的过程中使用到的工具.

由于系统是迷你型的,在一通搜索之后便决定采用ArtTemplate.

ArtTemplate具有如下特点

轻量级(不到3kb)
快速上手,用法简单
处理速度快

常见的模板引擎还有handlebar,Mustache,jade等,我只试用过handlebar,个人感觉它太过于沉重,配置起来繁琐,并不适合小项目的数据渲染.

artTemplate提供了两种语法选择,原生语法和简洁语法

简洁语法

{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

原生语法

<%if (admin){%>
    <%include('admin_content')%>

    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

模板引擎的原理是基于正则表达式,对字符串进行分析处理.
在两种语法中,简介语法易读性更好,用起来比较顺手,比原生语法只多了几k而已,推荐实用简洁语法

基本的用法不在此介绍,官网的链接写的很详细.主要语法如下.

var template = require('art-template');
var data = {list: ["aui", "test"]};

var html = template(__dirname + '/index/main', data);

最后贴一个好用的功能------过滤器
在arttemplate中定义为helper,也就是辅助器.这种工具我之前在写angular也使用到过,我觉得像ng中命名为过滤器更适合.它本意就是一个数据的过滤器,在过滤器中定义一些方法,使得渲染到页面的数据是你所需要的.

有点抽象,先贴一个官方的demo,是一个日期的过滤器.

<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>

<script>
/** 
 * 对日期进行格式化， 
 * @param date 要格式化的日期 
 * @param format 进行格式化的模式字符串
 *     支持的模式字母有： 
 *     y:年, 
 *     M:年中的月份(1-12), 
 *     d:月份中的天(1-31), 
 *     h:小时(0-23), 
 *     m:分(0-59), 
 *     s:秒(0-59), 
 *     S:毫秒(0-999),
 *     q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see    http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
template.helper('dateFormat', function (date, format) {

    if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
        }
    }
    date = new Date(date);
    if (!date || date.toUTCString() == "Invalid Date") {
        return "";
    }

    var map = {
        "M": date.getMonth() + 1, //月份 
        "d": date.getDate(), //日 
        "h": date.getHours(), //小时 
        "m": date.getMinutes(), //分 
        "s": date.getSeconds(), //秒 
        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
        "S": date.getMilliseconds() //毫秒 
    };
    

    format = format.replace(/([yMdhmsqS])+/g, function(all, t){
        var v = map[t];
        if(v !== undefined){
            if(all.length > 1){
                v = '0' + v;
                v = v.substr(v.length-2);
            }
            return v;
        }
        else if(t === 'y'){
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
});

// --------

var data = {
    time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>

上面的例子是完整的一个日期过滤器的例子,有需要直接复制使用即可.我自己在项目中是用到的是比较简单一点的,一个根据数据显示的不同输出对应的数据.
核心代码如下

<script>
    template.helper('typeFilter', function (type) {

    if (typeof type === "string") {
        switch(type){
            case "init":{
                return "进入页面";
                break;
            }
            ...
            case "share1":{
                return "分享到朋友圈";
                break;
            }
        }
    }
});
</script>

就是一个简单的数据转换器,后面针对所有的对应关系将其写成了一个对象,再进行过滤

var typeOpt = {
    "init": "进入页面",
    ...
    "share1": "分享到朋友圈"
}

template.helper('typeFilter', function (type) {

    if (typeof type === "string") {
        for(let i in typeOpt ){
            if(type == i){
                return typeOpt[i];
            }
        }
    }


以上是helper的内容


最后arttemplate还有一个include的功能,类似php的include函数,不多介绍.

weixin_34007020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫