模板引擎

• 作用：用于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>