artTemplate高性能數據模板引擎

相信數據模板引擎這個東西對於前端仍是後臺程序員來講都不陌生。我我的也很是討厭用字符串拼接，字符串拼接用多了就會使代碼看起來很亂，並且後期維護起來很不方便。如今前端數據渲染中出現了不少更好的方案，前端主流的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

效果圖