什么是模板引擎：

     模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的文档。

为什么使用：

例子：轮播图

1. <div class="carousel-inner" role="listbox">

2. <div class="item active">

3. <a class="pc_imgBox" href="#" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>

4. </div>

5. <div class="item">

6. <a class="pc_imgBox" href="#" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>

7. </div>

8. <div class="item">

9. <a class="pc_imgBox" href="#" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>

10. </div>

11. <div class="item">

12. <a class="pc_imgBox" href="#" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>

13. </div>

14. </div>

      在上述的HTML代码中，我们可以看到有很多个带背景图的a标签，这样构成了一个轮播图，但是试想一下，如果我们的图片需要从后台进行添加或修改，那么不可能我们前端去总是手动修改图片，因此我们需要动态的生成html代码，如何生成，就需要模板引擎了。

代码：

HTML代码：

<!-- 使用模板引擎 -->
        <script type="text/template" id="pointTemplate">
            <% for(var i = 0 ; i < list.length ; i ++){ %>
                <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
            <% } %>
</script>
        <script type="text/template" id="imageTemplate">
            <% for(var i = 0 ; i < list.length ; i ++){ %>
    <div class="item <%=i==0?'active':''%>">
        <% if(!isMobile){ %>
            <a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
        <% }else{ %>
            <a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a>
        <% } %>
    </div>
    <% } %>
</script>

JS代码：

var getData = function(callback) {
        // 缓存了数据
        if (window.data) {
            callback && callback(window.data);
        } else {
            // 1.获取轮播图数据 ajax
            $.ajax({
                type: 'GET',
                url: 'js/data.json',
                // 强制转换后台返回的数据为json对象
                // 强制转换不成功程序报错,不会执行success,执行error回调
                dataType: 'json',
                data: '',
                success: function(data) {
                    window.data = data;
                    callback && callback(window.data);
                }
            });
        }
    }
    var render = function() {
        getData(function(data) {
            // 2.根据数据动态渲染 根据当前设备  屏幕宽度
            var isMobile = $(window).width() < 768 ? true : false;
            // 2.1 准备数据
            // 2.2 把数据转化成HTML格式字符串(动态创建元素,字符串拼接,模板引擎(artTemplate))
            // 使用模板引擎:哪些html静态内容需要变成动态的
            // 发现:点容器,图片容器需要动态渲染   新建模板
            // 开始使用
            // <% console.log(list);%> 模板引擎中不可以使用外部变量
            var pointHtml = template('pointTemplate', {
                list: data
            });
            //console.log(pointHtml);
            var imageHtml = template('imageTemplate', {
                list: data,
                isMobile: isMobile
            });
            //console.log(imageHtml);
            /*2.3 把字符渲染页面当中*/
            $('.carousel-indicators').html(pointHtml);
            $('.carousel-inner').html(imageHtml);
        });
    }
    render();

作者：靖凡无所畏惧

链接：https://blog.csdn.net/wjf1997/article/details/104721785

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。