前端常用模板引擎- artTemplate-有解無憂

　　我們在用H5+Css3布局頁面的時候，通過介面展示資料到頁面的時候，如果資料少還好，有時候ul -> li有多個的時候只能回圈介面回傳的資料然后一個一個去展示，

　　前段時間在無意中學習到一個新東西 art-template 前端模板引擎這個東西可以像vue展示資料一樣很方便的進行資料展示還有一個叫 thymeleaf (我還沒用過)

　　1.介紹

art-template 是一個簡約、超快的模板引擎，它采用作用域預宣告的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，并且同時支持 NodeJS 和瀏覽器，
使用art-template也便于維護代碼，以前我們進行資料渲染的時候是通過字串拼接然后再通過append的方式追加到資料源id上，現在只需要在html頁面中寫回圈就可以實作了，

　　2. 安裝

　　1.直接去官網下載或者點擊這個鏈接 https://unpkg.com/[email protected]/lib/template-web.js

　　　2.npm安裝

　　　　　npm install art-template --save-dev

　3.語法
　1.art-template 支持標準語法與原始語法，標準語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力，
　 2. 標準語法支持基本模板語法以及基本 JavaScript 運算式；原始語法支持任意 JavaScript 陳述句，這和 EJS 一樣

　　下面只說標準語法
輸出用 {{}}

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

條件判斷 {{if}} ... {{/if}}

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

回圈語法
　　第一種 {{each datalit value i}} ... {{/each}}  ** value 和 i 的位置不能互換

{{each datalist value i}}
    {{i + 1}} {{value}}
{{/each}}

　　第二種 {{each datalist}} ... {{/each}}

{{each datalist}}
    {{$index}} {{$value}}
{{/each}}


4.案例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="template-web.js"></script>
    </head>

    <body>
        <div id="content"></div>   
        <script type="text/html" id="test">  // type="text/html"的模板 id用于在js中將資料與模板做關聯
　　　　　　　　// 語法中的第一個 資料展示 ---- {{}}
            <h1>{{ title }}</h1>
            // 語法中的回圈兩種寫法
            <ul>
                {{ each list value i }}
                    <li>索引 {{i+ 1 }}: {{ value }}</li>
                {{ /each }}
                
                {{ each list }}
                    <li>索引 {{$index+1}}: {{$value}} </li>
                {{ /each }}
            </ul>
            
            <ul>
　　　　　　　　　　// 語法中的 if 判斷
                {{if c== 100}}
                    <ul>
                        {{each person}}
                            <li>
                                編號：{{$index+1}} -- 姓名: {{$value.name}} -- 年齡: {{ $value.age}}
                            </li>
                        {{/each}}
                    </ul>
                {{/if}}
            </ul>
        </script>

        <script>
            var data = {
                title: 'hello world',
                list: ['文藝', '博客', '攝影', '電影', '明耀', '旅行', '吉他'],
                c: 100,
                person: [
                    {name: 'jack', age: 18},
                    {name: 'tom', age: 19},
                    {name: 'jerry', age: 20},
                    {name: 'kid', age: 21},
                    {name: 'jade', age: 22}
                ]
            };
            var html = template('test', data);  // test是上邊的模板 data是要用于展示的資料
            document.getElementById('content').innerHTML = html;  // 通過id選擇器獲取元素 把模板展示的位置
        </script>
    </body>

</html>

看看效果吧

自我感徑訓是很方便，很實用的一個模板，大家有機會可以試試

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/285904.html

標籤：HTML5

上一篇：簡易流程圖設計器Vue3

下一篇：前端面試經歷（位元組、滴滴、虎牙），講真的還挺難，前端大廠面試題總匯得看看