ES6中的模板引擎

模板引擎

模板引擎的介绍

页面渲染使用字符串拼接 会存在问题 : 字符的恒定性 字符串拼接的时候容易出错

模板引擎不用拼接字符串 直接使用 静态页面里面的html里面的结构生成模板 需要渲染的时候直接调用

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。

模板引擎的使用步骤

1. 导入模板引擎
2. 准备一个模板

​ 2.1. 准备模板必须要是用script 模板引擎规定的只能使用script

​ 2.2. 必须要给他一个id 在调用方法的时候使用

​ 2.3. 必须要有type属性 而且type属性绝对绝对不能使text/javascript

3. 调用方法 生成html结构

模板引擎使用的注意点:

1. 代入的时候 一定要注意 代入的名字一定要和对象的属性名一直
2. type的值只要不是text/javascript 但是建议使用text/html 因为其他的没办法识别标签
3. <%= %> 必须是一个完整的整体 不能加空格 或者其他的符号

 var stu = {
            name : "lisa",
            age : 18
        }
        var html = template("tpl", stu);

模板引擎的简写方式

.导入引擎模板

<script src="./js/template-web.js"></script>

2.准备模板

{{ each list value }}
        <tr>
            <td>{{ value.Id }}</td>
            <td>{{ value.name }}</td>
            <!-- <td>{{ value.age }}</td> -->
            {{if value.age >= 18}}
            <td>成年</td>
            {{ else }}
            <td>未成年</td>
            {{ /if }}
            <td>{{ value.score }}</td>
        </tr>
    {{ /each }}

3.调用方法生成模板

   var html = template("tpl", { list: arr });
   document.querySelector("#tb").innerHTML = html;

模板引擎的语法和输出

语法

标准语法

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

原始语法

<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>

1.输出

标准语法

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

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

2.原文输出

标准输出

{{@ value}}

原始输出

<%- value %>

3.条件输出

标准语法

<!-- 单 if 判断 -->
{{if value}} 
... 
{{/if}}

<!-- if ... else ... 判断 -->
{{if v1}} 
... 
{{else if v2}}
 ... 
{{/if}}

原始语法

<!-- 单 if 判断 -->
<% if (value) { %>
...
<% } %>

<!-- if ... else ... 判断 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>

4.循环输出

标准语法

{{each target}}
  {{$index}} {{$value}}
{{/each}}

target是一个数组，each用于对数组遍历，$index 是数组的下标， $value是数组的值
原始语法

<%for(var i = 0; i < list.length; i++) { %>
            <h1>自我介绍</h1>
            <p>大家好, 我叫<%= list[i].name %>, 我今年<% if(list[i].age > 20) { %>
                <u>成年</u>
               <% } else { %>
                <u>未成年</u>
           <% } %> </p>
        <% } %>

注意:

1. target 支持 array 与object 的迭代，其默认值为 $data。