前端学习第二十一天——模板引擎art-template

前端学习第二十一天

模板引擎–art-template

引入

官方文档

1. 输出

模板的script标签一定要写type="text/html"属性，防止script标签执行模板。

    <div id="content"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <!-- 参数要放在对象中，即使没有参数也要传空对象 -->
    <script id="tpl-1" type="text/html">
        <!-- 普通值 -->
        {{value}}
        <!-- 对象 -->
        {{data.key}}{{data['key']}}
        <!-- 值的运算  7 -->
        {{a+b}}
        <!-- 获取所有的传入参数 -->
        {{$data}}
        <!-- 会对特殊符号进行转义 <strong>重点内容</strong> -->
        {{text}}
        <!-- 在参数前加上@，取消转义  重点内容 -->
        {{@text}}
    </script>
    <script>
        const content = document.getElementById('content');
        content.innerHTML = template('tpl-1',{
            value:1,
            data:{
                key:2
            },
            a:3,
            b:4,
            text:'<strong>重点内容</strong>'
        })
    </script>

2. 条件

    <div id="content"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="tpl-2" type="text/html">
        {{if sex === 'male'}}
            男
        {{else if sex === 'female'}}
            女
        {{else}}
            性别不明
        {{/if}}
    </script>
    <script>
        const content = document.getElementById('content');
        content.innerHTML = template('tpl-2',{
            sex:'male'
        })
    </script>

3. 循环

        <ul id="list"></ul>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="tpl-3" type="text/html">
        {{each students}}
            <li>
                {{$value.name}}
                {{$value.age}}
                {{$value.sex}}
                <!-- {{$index}} 获取元素索引 0 1 2-->
                <!-- {{$value}} 获得数组元素-->
            </li>
        {{/each}}
    </script>
    <script>
        
        const students = [
            {
            name: 'zgbx',
            age: 18,
            sex: 'male'
            },
            {
            name: '张三',
            age: 28,
            sex: 'male'
            },
            {
            name: '李四',
            age: 20,
            sex: 'female'
            }
        ];
        const list = document.getElementById('list');
        list.innerHTML = template('tpl-3',{
            // students:students
            // 可以简写
            students
        })
    </script>

4. 子模板

    <div id="content"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="tpl-4" type="text/html">
        {{include 'tpl-4-header'}}
  
        <p>首页</p>
  
        {{include 'tpl-4-footer'}}
    </script>
    <script id="tpl-4-header" type="text/html">
        <header>我是公共头部</header>
    </script>
    <script id="tpl-4-footer" type="text/html">
        <footer>我是公共底部</footer>
    </script>
    <script>
        const content = document.getElementById('content');
        content.innerHTML = template('tpl-4',{});
    </script>

向子模板传传参

    <div id="content"></div>
    <div id="otherContent"></div>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="tpl-4-2-index" type="text/html">
        {{include 'tpl-4-2-header'}}
        <!-- 原始语法 -->
        <% include('tpl-4-2-header', {page:'首页'}) %>
  
        <p>首页</p>
  
        {{include 'tpl-4-2-footer'}}
        <% include('tpl-4-2-footer', {page:'首页'}) %>
    </script>
    <script id="tpl-4-2-list" type="text/html">
        <% include('tpl-4-2-header', {page:'列表页'}) %>
  
        <p>列表页</p>
  
        <% include('tpl-4-2-footer', {page:'列表页'}) %>
    </script>
    
    <!-- 向子模板传参 -->
    <script id="tpl-4-2-header" type="text/html">
        <header>我是{{page}}公共头部</header>
    </script>
    <script id="tpl-4-2-footer" type="text/html">
        <footer>我是{{page}}公共底部</footer>
    </script>
    <script>
        const content = document.getElementById('content');
        content.innerHTML = template('tpl-4-2-index',{});
        const otherContent = document.getElementById('otherContent');
      otherContent.innerHTML = template('tpl-4-2-list', {});
    </script>

在 Webpack 中使用 art-template

通过npm安装art-template

    npm install art-template@4.13.2

webpack.config.js配置文件

    // source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
    devtool: 'cheap-module-eval-source-map',
     module: {
        rules: [
        // 模板文件
            {
                test: /\.art$/,
                loader: 'art-template-loader'
            }
        ]
    }

模板header.art

    <header>{{ header }}</header>

模板footer.art

    <footer>{{ footer }}</footer>

首页index.art

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>首页</title>
    </head>
    <body>
        <% include('./common/header.art',{header:'我是首页的头部'}) %>

        <p>我是首页</p>

        <% include('./common/footer.art',{footer:'我是首页的底部'}) %>

        {{ page }}
    </body>
    </html>

列表页list.art

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>列表页</title>
    </head>
    <body>
        <% include('./common/header.art',{header:'我是列表页的头部'}) %>

        <p>我是列表页</p>

        <% include('./common/footer.art',{footer:'我是列表页的底部'}) %>
    </body>
    </html>

也可以在js中引入

    import render from './index.art';

    console.log(render({ page: '首页' }));