模板引擎template.js-优快云博客

本文链接：https://blog.youkuaiyun.com/GuardianMANGO/article/details/124051464

本文介绍了模板引擎如art-template的基本原理，展示了如何通过它减少字符串拼接，提升代码可读性和维护性。通过实例演示了模板定义、数据绑定和渲染过程，以及标准语法，如条件输出和循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板引擎

什么是模板引擎

可以根据程序员指定的模板结构和数据，自动生成一个完整的html即为模板引擎

模板引擎的好处

减少字符串的拼接操作
使代码更加清晰
使代码更易于阅读与维护

art-template

使用步骤

导入 art-template
定义数据
定义模板
调用template函数
渲染html结构

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

    <script src="./js/template-web.js"></script>
    <!-- 定义模板 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}}+{{age}}</h1>
    </script>
    <script>
        // 定义要渲染的数据
        var data = {
            name: 'mod',
            age: 17
        };

        // 调用template函数
        var htmlStr = template('tpl-user', data);
        console.log(htmlStr);
        container.innerHTML = htmlStr;
    </script>
</body>

标准语法

输出：{{}}语法，在{{}}内可以进行变量输出或循环数组等操作
原文输出：若要输出的value值包含了html标签结构，则需要使用原文输出语法{{@value}}
条件输出：如果要实现条件输出，可以在{{}}中使用if else if /if的方式
```
 {{if value}}
 输出
 {{else if newValue}
 输出new
 {{/if}}
```
循环输出：在{{}}内通过each语法循环数组，当前循环的索引使用$index进行访问，循环项使用$value进行访问
```
{{each arr}}
    {{$index}} {{$value}}
{{/each}}
```
过滤器：{{value | filterName}}，过滤器语法类似管道操作符，它的上一个输出作为下一个输入；
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){//return ...}

封装一个简单的template函数

function template(id, data){
    var str = document.getElementById(id).innerHTML;
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
    var result = null;
    while(result = pattern.exec(str)){
        str = str.replace(result[0], data[result[1]])
    }
    return str;
}