web前端面试题附答案020-类似京东商城的五星评分怎么排版？

        

        这道题，看似很简单，总评分5颗星，那么具体这个商品得到了多少分，一定是服务端下发的数值，类似1.0 2.5 3.5 这样的分数，如图呢就是4.5分，这道题考什么？

1、真的有5颗星星

        小星星一定是图片，可以排版5个Img元素，然后再预备上半颗星的图片，如果是3.5这种呢，就给第4个位置的图片src设置上半颗星的那个图片

2、只有1颗星星

        可以这样排版，通过添加一个huixingxing.png，然后x轴repeat，内部再添加一个liangxingxing.png，也在x轴repeat，然后通过服务端下发的分数和全额分数对比得出百分比，就是内部亮星星的长度，自然而然就得到了京东商城评分的排版效果。

<template>
  <div class="box">
    <div class="star-wrap">
        <p class="star-inner" :style="{width: lightWidth}"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      lightWidth: 0
    }
  },
  mounted() {
    let star = 4.1; // 假定服务端下发的为4.1分
    this.lightWidth = `${(4.1 / 5)}%`;
  },
  methods: {
  }
}
</script>

<style scoped>
.star-wrap {
  position: relative;
  width: 80px;
  height: 14px;
  margin: 1px 0 0 7px;
  background: url(huixingxing.png) left center repeat-x;
}
.star-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  background: url(liangxingxingt.png) left center repeat-x;
}


</style>

3、这道题是要考什么？

         其实上面的2个实现方案都比较基础，但所要体现的一个重点呢，就是dom数量尽量的少，也是性能优化的一个重要的点。

        这道题也只是讲一个小小的案例，方案二中摒弃了添加5个星星位置的方式，尽量少的只用了一个P元素。大家可以举一反三，看看自己项目中有没有类似的问题。