JavaScript模板引擎

JavaScript模板引擎

一、模板字符串的

为什么不在js变量中写模板？

如果将模板写到JS字符串中，维护不方便，不能换行，没有着色

二、模板引擎

用来从JSON数据中生成HTML字符串

常用模板引擎

能不能写在script标签中？

script 标签的特点是

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

三、Art-template

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

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

官网： http://aui.github.io/art-template

四、用法

1. 引入art-template.js文件

2. 编写HTML模板

   <script id="test" type="text/html">
       <h1>{{title}}</h1>
   </script>
   

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

   var data = {
       title:'hello world'
   }
   var html = template('test',data)
   document.getElementById('content').innerHTML = html
   

五、语句

1.流程控制语句(if else)

2.循环遍历语句

3.调用自定义方法