artTemplate模板

一、介紹

新一代 javascript 模板引擎。

二、性能（引）

　　一、性能卓越，執行速度一般是 Mustache 與 tmpl 的 20 多倍（性能測試）
　　二、支持運行時調試，可精肯定位異常模板所在語句（演示）
　　三、對 NodeJS Express 友好支持
　　四、安全，默認對輸出進行轉義、在沙箱中運行編譯後的代碼（Node版本能夠安全執行用戶上傳的模板）
　　五、支持include語句，可在瀏覽器端實現按路徑加載模板
　　六、支持預編譯，可將模板轉換成爲很是精簡的 js 文件
　　七、模板語句簡潔，無需前綴引用數據
　　八、支持全部流行的瀏覽器

三、方法介紹

template(id, data)
根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。
若是沒有 data 參數，那麼將返回一渲染函數。

template.compile(source, options)

將返回一個渲染函數。

var render = template.compile(tpl);//tpl是模板

tpl代碼以下

{{each data as value index}}
    <tr>
        <td>{{index+1}}</td>
        <td>{{value.a1}}</td>
        <td class="tooltip" rel="{{value.a2}}"><p>{{value.a3}}</p></td>
        <td><a href="">{{value.a4}}</a></td>
        <td><a href="">{{value.a5}}</a></td>
        <td><a href="">{{value.a6}}</a></td>
        <td>{{value.a7}}</td>
        <td>{{value.a8}}</td>
        <td><a href="javascript:;"  class="block"><span dataId="{{value.a9}}" class="block del-practice"></span></a></td>
    </tr>
{{/each}}

template.render(source, options)

將返回渲染結果。同上返回的template.compile(source, options)函數

代碼以下

咱們拿var render = template.compile(tpl);返回的函數render來生成html頁面

以下：

$('#ID').html(render(result));//result爲後端返回的json數據

template.helper(name, callback)

添加輔助方法。

例如：（轉）

template.helper('dateFormat', function (date, format) {

    date = new Date(date);

    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;
});

如何使用？

以下：

{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}//模板中這麼使用  time是一個字符串  dateFormat函數名

template.config(name, value)

更改引擎的默認配置。參數以下

openTag     String          {{            語法開始標籤
closeTag     String          }}            語法結束標籤
escape        Boolean        true         是否編碼輸出 HTML 字符
cache          Boolean        true         是否開啓緩存（依賴 options 的 filename 字段）
compress     Boolean       false         是否壓縮 HTML 多餘空白字符

使用預編譯
可突破瀏覽器限制，讓前端模板擁有後端模板同樣的同步「文件」加載能力：

按文件與目錄組織模板

template('tpl/home/main', data)
模板支持引入子模板

{{include '../public/header'}}

基礎再也不詳述下面介紹模板語法與原生語法的使用例子

四、語法使用

基礎語法

<ul>
    {{each result as value index}}
        {{if index <= 2}}
            <li class="item-ranking clearfix firstList {{if index == result.length-1}}last{{/if}}">
                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src='people-error.png';"></img>
                <div class="zz_big"></div>
                <div class="fl modify-num">
                    <p class="ranking-name">
                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>
                        <span class="student">已練習&nbsp;{{value.exerciseNum}}</span>
                        <div class="view-btn" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>
                    </p>
                </div>
            </li>
        {{else}}
             <li class="item-ranking clearfix {{if index == result.length-1}}last{{/if}}">
                <img class="fl head-portrait" src="{{value.picUrl}}" onerror="javascript:this.src='people-error.png';"></img>
                <div class="zz_small"></div>
                <div class="fl modify-num">
                    <p class="fl ranking-name">
                        <span class="ell student-name" title="{{value.name}}">{{value.name}}</span>
                        <span class="student">已練習&nbsp;{{value.exerciseNum}}</span>
                    </p>
                </div>
                <div class="view-btn1 fl" data-id={{value.ID}} data-url="{{value.picUrl}}" data-num="{{index+1}}">查看</div>
            </li>
        {{/if}}
    {{/each}}
</ul>

模板語法支持基礎的判斷 可是高級的功能，好比js原生的方法是不支持的，下面介紹原生語法例子

原生語法

<%for(var key=0;key<data.length;key++){%>
    <tr<%if(/失敗/.test(data[key].result)){%> class="redbg" <%}%>>
        <td><%=(key+1)%></td>
        <td><%=data[key].a1%></td>
        <td><%=data[key].a2%></td>
        <td><%=data[key].a3%></td>
        <td><%=data[key].a4 %></td>
        <td><%=data[key].a5%></td>
        <td>
            <%if(data[key].a5 == "測試失敗"){%>
                <!--<button type="button" class="block recheck btn" dataID="<%=data[key].piGaiTopicId%>">ssss</button>-->
            <%}%><%else{%>
                <%=data[key].mark%>
            <%}%>
        </td>
    </tr>
<%}%>

原生語法支持js的方法的使用和判斷，這在靈活使用上很方便，可讀性稍差了點。