前端模板引擎使用

用来代替模板字符串，

在JS字符串中写模板问题?

1.维护不方便，不能换行，没有着色

常用模板引擎：

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模板引擎

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

使用方法：

首先引入art-template.js文件模板引擎
<script src="template.js"></script>
编写HTML模板
<script id="test" type=" text/html">
<h1>{{title}}</h1>
</script>
向模板插入数据，并输出到页面
<script>
var data = {
            title:"hello world"
            };
var html = template("test" , data);
document . getE lementById( ' content' ) . innerHTML = html;
</script>

案例：

 <script src="../template-web.js"></script>
    <script type="text/html" id="divhtml">
        <h1>{{name}}</h1>
        <p>{{jianjie}}</p>
    </script>
    <script>
        let data = {
            name: '勇哥',
            jianjie: '勇哥从不为奴，除非包吃包住',
        }
        let htmlstr = template('divhtml', data);
        document.querySelector('#box1').innerHTML = htmlstr;
    </script>

效果：

注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

相关语句：

if...else

 循环语句：

可以使用模板引擎调用自定义方法：