美文网首页
01-我为什么使用模板引擎

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

作者: Threejs开发者 | 来源:发表于2018-06-20 00:03 被阅读0次

需求:
实现下面这段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>

<全文结束>

相关文章

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

    需求:实现下面这段html结构,拿到数据后动态渲染html,这里数据比较多,因为数据多,结构复杂,才能体现出模板的...

  • 模板引擎-Handlebars的实际项目

    一. 为什么要使用模板引擎 关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后...

  • 作为一名前端的你,必须掌握的模板引擎:Handlebars

    一. 为什么要使用模板引擎 关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后...

  • 《PHP Learning》模板引擎

    《PHP Learning》模板引擎 模板处理使用正则处理模板替换规则保存模板编译结果 模板使用 自定义模板引擎 ...

  • koa2使用模板引擎

    这篇教大家如何使用模板引擎 这里我们使用ejs模板引擎做 个例子,你们自己选择自己熟练的模板引擎 使用的版本: 文...

  • art-template模板引擎

    模板引擎 什么是模板引擎: 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产...

  • Laravel-Blade模板引擎

    Blade模板引擎 Blade模板引擎简介及模板继承的使用 基础语法及include的使用 流程控制 模板中的UR...

  • 模板引擎原理

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • 无标题文章

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • flask.pocoo.org/docs/0.12/templa

    原文链接 模板 Flask 使用 Jinja2 作为默认模板引擎。你完全可以使用其它模板引擎。但是不管你使用 哪种...

网友评论

      本文标题:01-我为什么使用模板引擎

      本文链接:https://www.haomeiwen.com/subject/tittyftx.html