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

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

<div class="item_content">
            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg" alt="">
              <div class="cat_name3">曲面电视</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/5e38cf9e6e7c46a17fe1c597a883ae627977b296.jpg" alt="">
              <div class="cat_name3">海信</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/cece39bd7e9654c20043e4af71696e1f838d4a22.jpg" alt="">
              <div class="cat_name3">夏普</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/f62eba98423af3311487f3331c6798d8f099c893.jpg" alt="">
              <div class="cat_name3">创维</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/86832cc37db8474ac07853c835009f9873eaec89.jpg" alt="">
              <div class="cat_name3">TCL</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/41c169f14680b3ebf88b4a37ea09085ed731c985.jpg" alt="">
              <div class="cat_name3">PPTV</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/5c282c3ec283fbc092107f8c7b86f212365acdfa.jpg" alt="">
              <div class="cat_name3">小米</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/14291787e1f9f0215816048e813e4ec4fbb3dffe.jpg" alt="">
              <div class="cat_name3">长虹</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/de58455691bc7b85351055c220f1a5410ab15693.jpg" alt="">
              <div class="cat_name3">康佳</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/8b36730c09815e90de1f86664baef8690c89e979.jpg" alt="">
              <div class="cat_name3">三星</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/7643c31541df41da21c9e734bd2d9a18fed2a2aa.jpg" alt="">
              <div class="cat_name3">飞利浦</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/e8c76dd2bb103a620929bcb4ad5c5431d62418d3.jpg" alt="">
              <div class="cat_name3">索尼</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/5a46bef92bf32f0157b4d5a6d9a35ca8a5615aca.jpg" alt="">
              <div class="cat_name3">先锋</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/5fae60f2cc05c53eaf43075db7eb82bfc9bba9b4.jpg" alt="">
              <div class="cat_name3">家庭影院</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/5515d491f88587084e59aac50010458bb916ee17.jpg" alt="">
              <div class="cat_name3">音响</div>
            </a>

            <a href="javascript:;">
              <img src="http://119.29.204.94:8888/full/e65bab9fcb64c336a3f5fba3b2174fef41f12330.jpg" alt="">
              <div class="cat_name3">盒子</div>
            </a>
</div>

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

//使用原生js
function render(){
    var a = `<a href="javascript:;">
             <img src="" alt="">
             <div class="cat_name3">${data.cat_name}</div>
          </a>`;

        
    // li开始渲染多个a标签，这时需要封装函数,显得结构不清晰
    var li = ` <li>
        <div class="item_title data-index="${index}">
            <span>${data.cat_name}</span>
            <span></span>
        </div>

        <div class="item_content">
            ${a}
        </div>
    </li>`;
}

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

//使用模板引擎,art-template@4.12.2
 <li>
    <div class="item_content">
      {{each value.children item ind }}
      <a href="javascript:;">
        <img src="{{$imports.BaseURL}}{{item.cat_icon}}" alt="">
        <div class="cat_name3">{{item.cat_name}}</div>
      </a>
      {{/each}}
    </div>
</li>

<全文结束>