artTemplate高性能数据模板引擎

Posted 2020-09-16 nurdun

相信数据模板引擎这个东西对于前端还是后台程序员来说都不陌生。我个人也非常讨厌用字符串拼接，字符串拼接用多了就会使代码看起来很乱，而且后期维护起来很不方便。现在前端数据渲染中出现了很多更好的方案，前端主流的mvc，mvvm框架如angular,vue,react等都自带响应式数据渲染功能，因此很多时候对前端开发者来说用框架渲染再合适不过了。但有些时候就不需要框架别的功能，只需要数据渲染的话就那这些框架来渲染不太合适了。这个时候后我们需要一些具有数据渲染能力的轻型引擎。artTemplate就是一个轻量级的数据模板引擎，渲染速度和性能在现阶段数据模板引擎中更好的那个。前天写了个demo，就用artTemplate渲染出了一个休息日日历表(数据是自己模拟的),分享一下

artTemplate 相关链接http://www.jq22.com/jquery-info1097

我的demo下载链接 https://github.com/nurdun/areTemplate

日历

html

<div class="date-box" id="js-date">

    </div>

css

*{
            padding:0;
            margin:0;
        }
        .date-box{
            margin: 0 auto;
            width: 244px;
            height: auto;
            background: #fafafa;
            box-sizing:border-box ;
            border: 2px solid #0d1116;
            border-radius: 5px;
            overflow: hidden;
        }
        .date-title{
            width: 100%;
            height: 30px;
            background: #0055aa;
            box-sizing: inherit;
            border-bottom: 1px solid #0d1116;
            line-height: 30px;
            text-align: center;
            color:#ffffff;
        }
        .date-title span:first-child{
            width: 30px;
            float: left;
            text-align: right;
        }
        .date-title a{
            display: inline-block;
            margin: auto;
            width: 80px;
            color: inherit;
            text-decoration: none;
        }
        .date-title span:last-child{
            width: 35px;
            float: right;
        }
        .date-content{
            width: 100%;
            height: auto;
            box-sizing: inherit;
            color: #9a9a9a;
            overflow: hidden;
        }
        .date-content li{
            display: block;
            float: left;
            width: 80px;
            height: 50px;
            box-sizing: inherit;
            border:1px solid #0d1116;
            text-align: center;
            line-height: 50px;
        }
        .date-intro{
            width: 100%;
            height: 37px;
            box-sizing: border-box;
            border: 1px solid #0d1116;
            text-align: center;
            line-height: 35px;
            font-size: 12px;
            color: #666666;
        }
        .date-intro span:first-child{
            margin-right: 20px;
        }
        .date-intro span:last-child{
            margin-left: 20px;
        }

上面css中overflow：hidden;是为了清除浮动

template

<script id="date" type="text/html">
        <div class="date-title"><span class="iconfont icon-rili"></span><a href="" id="select-month">{{month.thisMonth}}月份</a><span class="iconfont icon-rili"></span></div>
        <ul class="date-content">
          {{each list as value}}
            <li>{{value}}</li>
           {{/each}}
        </ul>
        <div class="date-intro"><span class="iconfont icon-pre"></span>上面均为国家规定假日<span class="iconfont icon-arrow-right-double"></div>
    </script>

    <script type="text/html"id="month-tmp">
            {{each monthList as item}}
                <a>{{item}}月份</a>
            {{/each}}
    </script>

 

js

var data ={
            month:{
               thisMonth:"四",
                monthList:["一","二"]
            },
            list:[1,6,7,13,14,20,21,27,28]
        }

        var html = template(\'date\',data);
        document.getElementById("js-date").innerHTML = html;

            $("#select-month").on("click",function(){
                var html = template(\'month-tmp\',data.month);
                document.getElementById("select-month").innerHTML = html;
            })

在头部别忘了引入artTemplate

效果图