JS模板引擎

時間 2019-12-12

原文原文鏈接

本文目的

本文的目的是對JS模板引擎進行描述和使用；提升開發成員對相應功能的開發效率，提高代碼的可維護性，下降維護成本。javascript

原有痛點

以下摘自部分代碼，這樣拼接維護是否是很繁瑣，後期維護成本高；html

  $.each(SystemForm.systemFormfields, function (n, t) {
                    htmlField += '<li class="bbit-tree-node">';
                    htmlField += '<div  title="' + t.field + '" class="bbit-tree-node-el bbit-tree-node-leaf">';
                    htmlField += '<i class="fa fa-tags"><\/i> ';
                    htmlField += '<span class="bbit-tree-node-text">' + t.label + "<\/span><\/div><\/li>"
                });

JS模板引擎簡介

隨着 web 發展，前端應用變得愈來愈複雜，基於後端的 javascript(Node.js) 也開始嶄露頭角，此時 javascript 被寄予了更大的指望，與此同時 javascript MVC 思想也開始流行起來。javascript 模板引擎做爲數據與界面分離工做中最重要一環，愈來愈受開發者關注，近一年來在開源社區中更是百花齊放，在 Twitter、淘寶網、新浪微博、騰訊QQ空間、騰訊微博等大型網站中均能看到它們的身影。前端

各類模板引擎java

baiduTemplate(百度)\artTemplate（騰訊）\juicer（淘寶）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplatenode

各類模板引擎對比：jquery

經過對各模板引擎測試結果，能夠看出
artTemplate，juicer與doT引擎模板總體性能要有絕對優點；
其中doT引擎模板在IE與safari瀏覽器表現很是優越；
tmpl模板引擎在IE中運行能完美勝出，但在其它瀏覽器中表現就差不少；

延伸
經過對模板引擎的熟知，不一樣瀏覽器渲染能力也不同；渲染快的打開網頁速度就快；chrome與360瀏覽器打開速是最快的；ie瀏覽器的速度是最慢；ios

渲染速度對比git

我這裏選用artTemplate；github

artTemplate模板引擎

artTemplate 介紹

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是後端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。web

除了性能優點外，調試功能也值得一提。模板調試器能夠精肯定位到引起渲染錯誤的模板語句，解決了編寫模板過程當中沒法調試的痛苦，讓開發變得高效，也避免了由於單個模板出錯致使整個應用崩潰的狀況發生。

artTemplate 使用

一、對象渲染

定義模板

<script id="test" type="text/html"> name:{{name}}<br> age:{{age}} </script>

js渲染

var data={name:'yxtic',age:'0'}; var html = template('test', data); document.getElementById('content').innerHTML = html;

所有代碼

 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title>JS模板引擎實例</title>
 5 <script src="template.js"></script>
 6 </head>
 7 
 8 <body>
 9 <h1>模板引擎-對象</h1>
10 <div id="content"></div>
11 <script id="test" type="text/html">
12 name:{{name}}<br>
13 age:{{age}} 14 </script>
15 
16 <script>
17 var data={name:'yxtic',age:'0'}; 18 var html = template('test', data); 19 document.getElementById('content').innerHTML = html; 20 </script>
21 </body>
22 </html>

View Code

運行結果

二、數組渲染

定義模板

<script id="test" type="text/html">
<ul> {{each $data as item i}} <li>name:{{item.name}} age:{{item.age}}</li>
 {{/each}}
</ul>
</script>

js渲染

var data= [{name: 'aaa',age: '12', gender: 'male'},{name: 'bbb', age: '22', gender: 'female'}]; 
var html = template('test', data);
document.getElementById('content').innerHTML = html;

所有代碼

 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title>JS模板引擎實例</title>
 5 <script src="template.js"></script>
 6 </head>
 7 
 8 <body>
 9 <h1>模板引擎-數組</h1>
10 <div id="content"></div>
11 <script id="test" type="text/html">
12 <ul>
13 {{each $data as item i}} 14        <li>name:{{item.name}} age:{{item.age}}</li>
15  {{/each}}
16 </ul>
17 </script>
18 
19 <script>
20 var data= [{name: 'aaa',age: '12', gender: 'male'},{name: 'bbb', age: '22', gender: 'female'}]; 21 var html = template('test', data); 22 document.getElementById('content').innerHTML = html; 23 </script>
24 </body>
25 </html>

View Code

運行結果

三、組合

定義模板

<script id="test" type="text/html">
<ul>
<h1>{{title}}</h1>
<ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li>
 {{/each}}
</ul>
</ul>
</script>

js渲染

var data = { title: 'yxtic', isAdmin: true, list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html;

所有代碼

 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <title>JS模板引擎實例</title>
 5 <script src="template.js"></script>
 6 </head>
 7 
 8 <body>
 9 <h1>模板引擎-組合</h1>
10 <div id="content"></div>
11 <script id="test" type="text/html">
12 <ul>
13 <h1>{{title}}</h1>
14 <ul>
15  {{each list as value i}} 16         <li>索引 {{i + 1}} ：{{value}}</li>
17  {{/each}}
18 </ul>
19 </ul>
20 </script>
21 
22 <script>
23 var data = { 24  title: 'yxtic', 25  isAdmin: true, 26  list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'] 27 }; 28 var html = template('test', data); 29 document.getElementById('content').innerHTML = html; 30 </script>
31 </body>
32 </html>

View Code

運行結果

四、分支判斷if else

    <script id="StepContentTmplate" type="text/html">
                    <ul>
                        {{each $data as item i}}
                      {{if i==0}}
                        <li class="first">
                      {{else}}
                        <li>
                      {{/if}}
                            <i class="node-icon fa fa-circle "></i>
                            <span class="time">{{item.CreateDate}} </span>
                            <span class="txt">{{item.Content}}</span>
                        </li>
                        
                        {{/each}}
                    </ul>
                </script>

五、自定義模板函數

以下我這邊自定義了一個內容格式化函數，即函數名爲RemarkFormat來處理截取字符串；

template.helper("RemarkFormat", function (value) {
    if (!value) {
        return "";
    }
    if (value.length > 10) {
        return value.substring(0, 10) + "...";
    }
    else {
        return value;
    }
});