web前端面试题附答案031-实现一张简单的电商热力图

        开门见山，这是4个商品，每一行等高，然后左右布局。

        商品明显是异步获取的，还有按钮显示了不同的状态，可以做不同的操作，或者是将会跳转到不同的页面去。

 你能想象到这其实是一张图片吗？你以为的各种table布局，flex布局，左float 右 float，一个P标签，一个大按钮，设置不同的设置。那多慢啊，找UI直接做一几张宣传图，直接往页面一放，多快。

        但虽然是图片，但点商品图片，点击标题，点击按钮都是要进对应的详情页的；不仅如何，价格，按钮色值也都不同。

        1、服务端的数据

        服务端返回的数据应该类似这样，是一个图片，算是一个楼层模块，然后内部包含4个子模块，子模块对应的宽，高，坐标位置，跳转连接。

data： {
    id: 001,
    imgUrl: 'www.xx.com/img/aa.png',  // 整个大图的路径
    moudule: [
        {
            width: 100px,
            height: 30px,
            jumpUrl: 'www.xx.com/promotion/aa.html?id=001',
            top: 0,
            left: 0，
            id: 001,
        },
        {
            width: 100px,
            height: 30px,
            jumpUrl: 'www.xx.com/promotion/aa.html?id=002',
            top: 0,
            left: 100,
            id: 002,
        },
        {
            width: 100px,
            height: 30px,
            jumpUrl: 'www.xx.com/promotion/aa.html?id=003',
            top: 30,
            left: 0,
            id: 003,
        },
        {
            width: 100px,
            height: 30px,
            jumpUrl: 'www.xx.com/promotion/aa.html?id=004',
            top: 30,
            left: 100,
            id: 004,
        }
    ]
}

        2、前端布局

        应该预备一个div，是用来预备存放整张大图的容器，然后内部一个img标签。内部再有一个div，用来预备存放这N个小模块，小模块各自有宽高，坐标，跳转连接

<template>
  <div class="box">
    <div class="map-box">
        <img :src="data.imgUrl" />
        <div style="position:absolute;top:0;left:0;width:100%;height:100%;">
          <div v-for="item in data.moudle" 
            :key="item.id" 
            :style="{left: item.left, top: item.top, 
                width: item.width, height: item.height}">
              <a style="display: block;width: 100%;
                heigth: 100%;" :href="item.jumpUrl"></a>
          </div>
        </div>
    </div>
  </div>
</template>

通过这种方式，在需要快速促销商品的时候，UI快速出图，前端只需要布局图片热力图就可以啦。

总结：

        热力图这里返回数据是有序的数组，而不是无需的map类型，然后前端才可以正确的知道自己要把那部分放到哪里；当然其实通过坐标也可以确认布局，也是可以确认具体模块摆放的位置的。