模板引擎 -- art-template

最新推荐文章于 2023-08-09 11:02:46 发布

原创最新推荐文章于 2023-08-09 11:02:46 发布 · 265 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #jquery

art-template 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了art-template，一个高效且简易的JavaScript模板引擎。它通过预声明技术优化渲染速度，支持Express、Koa和Webpack等环境，适用于NodeJS和浏览器。文章详细介绍了模板语法，包括输出、逻辑分支和循环遍历，以及如何使用官方API进行模板渲染。

特点

art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。支持Express，Koa，Webpack，同时，它支持NodeJS和浏览器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./template-web.js"></script>
</head>

<body>
    <div id="box"></div>

    <!-- 2.写模板
    a.必须要设置id
    b.必须要设置type,一般设置为 type = 'text/html'
    -->
    <script id="weather_list" type="text/html">
        <!-- 模板语法 -->
        <!-- (1)输出语法 -->
        <!-- 胡子语法：最常用 -->
        <p>{{ data.ganmao }}</p>
        <!-- 原始语法 -->
        <p><%= data.ganmao %></p>

        <p>{{ data.city }}</p>
        <p>{{ data['city'] }}</p>

        <p>{{ data.wendu > 30 ? '今天好热' : '今天好冷' }}</p>

        <p>{{ +data.wendu + 1 }}</p>

        <!-- (2)逻辑分支语法 -->
        {{ if data.wendu > 25 }}
            <p>我爱你</p>
        {{ else }}
            <p>我更爱你</p>
        {{ /if }}

        <!-- (3)循环遍历语法 -->
        {{ each data.forecast }}
            <li>
                <span>下标： {{ $index }}</span>
                <span>元素： {{ $value }}  日期: {{ $value.date }}</span>
            </li>
        {{ /each }}
    </script>

    <script>
        let jsonObj = '{"data":{"yesterday":{"date":"12日星期六","high":"高温 33℃","fx":"南风","low":"低温 26℃","fl":"<![CDATA[2级]]>","type":"小雨"},"city":"深圳","forecast":[{"date":"13日星期天","high":"高温 31℃","fengli":"<![CDATA[2级]]>","low":"低温 24℃","fengxiang":"东风","type":"中雨"},{"date":"14日星期一","high":"高温 31℃","fengli":"<![CDATA[2级]]>","low":"低温 25℃","fengxiang":"东风","type":"中雨"},{"date":"15日星期二","high":"高温 31℃","fengli":"<![CDATA[3级]]>","low":"低温 25℃","fengxiang":"东风","type":"雷阵雨"},{"date":"16日星期三","high":"高温 32℃","fengli":"<![CDATA[3级]]>","low":"低温 27℃","fengxiang":"东南风","type":"阵雨"},{"date":"17日星期四","high":"高温 32℃","fengli":"<![CDATA[3级]]>","low":"低温 27℃","fengxiang":"东风","type":"阵雨"}],"ganmao":"感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。","wendu":"26"},"status":1000,"desc":"OK"}';
        let jsObj = JSON.parse(jsonObj);
        console.log(jsObj);
        /* 3.调用官方api */
        //参数1：模板id名 参数2：要渲染的js对象  返回值：解析好的html字符串
        let htmlStr =  template('weather_list',jsObj);
        /* 4.解析好的字符串 渲染页面 */
        document.querySelector('#box').innerHTML = htmlStr;
    </script>
</body>

</html>