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