JavaScript 模板引擎

模板引擎

• 作用：用于JSON数据中生成字符串
• 常用模板引擎：
  1.Art-template
  2.DOT
  3.JavaScript-Templates
  4.Template.js
  5.Tempo
  6. ECT
  7. Dot Dom
  8.Template7
  9.Bunny
  10.Squirrelly
  11.ejs
• 模板代码写在script标签中

script 标签的特点是:
1.标签内容永远不会显示在界面上
2. 如果 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行

Art-template

介绍：

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

• 拥有接近 JavaScript - 渲染极限的的性能
• 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点(Webpack Loader)
• 支持 Express、Koa、Webpack
• 支持模板继承与子模板
• 浏览器版本仅 6KB 大小

官方下载链接

链接: 下载地址

模板语法的用法

• 将下载的 art-template.js 文件复制进在生产的 js 文件中，然后用 <script>标签引入到 html中

      <!-- 引入art-template模板库 -->
    <script src="./js/template-web.js"></script>

• 编写HTML模板

     <!-- 编写模板语法 -->
   <div id="box">
    <script id="test" type="text/html">
        <h1>{{ title }}</h1>
     </script>
   </div>

• 向模板插入数据，并输出到页面

   <script>
     let data={
         title:"hello world"
         }
      var html = template("test",data)
      const divEle= document.getElementByID('#box')
      divEle.indexHTML = html
    </script>

语法

• 模板插值语法 {{ 变量 }} 如 {{ title }}
• 流程控制语句 （if else）可以用来判断
  
• 循环遍历语句
  each关键字后面跟上要循环的 数组
$index :索引号
  $value:数项
  用循环遍历的方法渲染商品列表代码演示

  <table>
            <!-- 定义显示商品列表模板 -->
            <script type="text/html" id="table1">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>状态</th>
                </tr>
                {{ each list}}
                <tr>
                    <td>{{ $index }}</td>
                    <td>{{ $value.name}}</td>
                    <td>{{ $value.price}}</td>
                    <td>{{ $value.num}}</td>
                    <!-- <td>{{ $value.state?'正常':'不正常' }}</td> -->
                    <td>
                        {{ if $value.state }}
                        <button style="color: red;" onclick="setState({{ $index }})">正常</button>
                        {{ else }}
                        <button style="color: green;" onclick="setState({{ $index }})">不正常</button>
                        {{ /if}}
                    </td>
                </tr>
                {{ /each}}
            </script>
        </table>
<script>
        let data = {
            list: [{
                    name: 'javascript高级编程',
                    price: 80.98,
                    num: 10,
                    state: false
                },
                {
                    name: 'vue高级编程',
                    price: 180.98,
                    num: 2,
                    state: true
                },
                {
                    name: 'react高级编程',
                    price: 220.98,
                    num: 5,
                    state: false
                },
            ]
        }

        const tableEle = document.querySelector('table')
 
        //渲染商品列表
        let productListStr = template('table1', data)
        tableEle.innerHTML = productListStr

        /**
         * 设置状态
         */
        function setState(index) {
            let product = data.list[index]
            product.state = !product.state

            //渲染商品列表
            let productListStr = template('table1', data)
            tableEle.innerHTML = productListStr
        }
    </script>