01-我为什么使用模板引擎

需求：
实现下面这段html结构，拿到数据后动态渲染html,这里数据比较多，因为数据多，结构复杂，才能体现出模板的威力。目标结构如下：

            
              
              
曲面电视
            

            
              
              
海信
            

            
              
              
夏普
            

            
              
              
创维
            

            
              
              
TCL
            

            
              
              
PPTV
            

            
              
              
小米
            

            
              
              
长虹
            

            
              
              
康佳
            

            
              
              
三星
            

            
              
              
飞利浦
            

            
              
              
索尼
            

            
              
              
先锋
            

            
              
              
家庭影院
            

            
              
              
音响
            

            
              
              
盒子
            

下面使用原生es6写法，会发现在渲染多个a标签时，需要重新定义一个函数。就会导致结构不清晰。写不下去了。(o(╥﹏╥)o)。部分代码如下：

//使用原生js
function render(){
    var a = `
             
             
${data.cat_name}
          `;

        
    // li开始渲染多个a标签，这时需要封装函数,显得结构不清晰
    var li = ` 

        

            ${data.cat_name}
            
        

        

            ${a}
        
    
`;
}

最后不得已使用模板引擎，逻辑的都用{{}}包起来。结构与原始html基本相似。很优雅。(〃'▽'〃)。写法如下：

//使用模板引擎,[email protected]
 

    

      {{each value.children item ind }}
      
        
        
{{item.cat_name}}
      
      {{/each}}
    

<全文结束>