前端經常使用模板引擎- artTemplate

時間 2021-08-12

標籤 html 前端 vue web npm 瀏覽器 app 佈局性能學習欄目 HTML 简体版

原文原文鏈接

　　咱們在用H5+Css3佈局頁面的時候，經過接口展現數據到頁面的時候，若是數據少還好，有時候ul -> li有多個的時候只能循環接口返回的數據而後一個一個去展現。html

　　前段時間在無心中學習到一個新東西 art-template 前端模板引擎這個東西能夠像vue展現數據同樣很方便的進行數據展現還有一個叫 thymeleaf (我還沒用過)前端

　　1.介紹vue

art-template 是一個簡約、超快的模板引擎。它採用做用域預聲明的技術來優化模板渲染速度，從而得到接近 JavaScript 極限的運行性能，而且同時支持 NodeJS 和瀏覽器。
使用art-template也便於維護代碼，之前咱們進行數據渲染的時候是經過字符串拼接而後再經過append的方式追加到數據源id上，如今只須要在html頁面中寫循環就能夠實現了。

　　2. 安裝web

　　1.直接去官網下載或者點擊這個連接 https://unpkg.com/art-template@4.13.2/lib/template-web.jsnpm

　　　2.npm安裝瀏覽器

　　　　　npm install art-template --save-devapp

　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>

看看效果吧

自我感受仍是很方便，很實用的一個模板，你們有機會能夠試試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。