用CSS减少JavaScript代码量

用CSS减少JavaScript代码量

写此篇博客的目的就是提醒自己和需要的人，在遇到某些需求的时候，可以通过灵活的CSS的样式去减少项目中JavaScript的代码量。

现在假定有这样一个需求，在列表页面中，每次点击某一行，这个时候前端会向后端发出请求，请求该行所对应的模板，并将这个模板显示在详情弹窗，但有时候，这一行对应的不仅是一个模板，但是需要的只是其中之一，现在需要用前端代码去控制选取所需要的模板，显示在详情页。

说实话，在这样的一个需求下，我脑子里的第一反应一定是用JavaScript去解决，我想到的办法就是接口传回来的模板字段中，可以将多个模板用特殊符号进行连接，在点击列表行时，将标志字段传入详情页，调用接口返回的末班字段可以用特殊字符进行分割，然后选取标志字段(fix)对应的那部分，渲染在页面中。

上面的想法对应的JavaScript代码真的写起来，其实也不少，详情页大致如下：

.....
<div v-html="template" class="template-div"></div>
...

下面就说下CSS的解决办法，主要利用的是SCSS中的写法和CSS中的显示和隐藏，下面是详情页的伪代码

..... 
<div v-html="template" :class="templateClass"></div>
...
props: {
  fix: {
    type: Number,
    default: 1
  }
},
computed: {
  templateClass() {
     return {
        'wrap-div': true,
        'fix-1': fix === 1,
        'fix-3': fix === 3,
     }
  }
}
...

样式大致如下

.wrap-div {
  .template-div {
    position: relative;
  }
  &.fix-1 {
    .img-3 {
      display: none;
    }
  }
  &.fix-3 {
    .img-1 {
      display: none;
    }
  }
}

关于接口传来的模板的大致样子如下：

<div class="template-div img-1">
    <img src="{bgImg}">
    <div class="template-list">
        <div class="col-1">
            <img src="{img1}">
        </div>
    </div>
</div>
<div class="template-div img-3">
    <img src="{bgImg}">
    <div class="template-list">
        <div class="col-3">
            <img src="{img1}">
        </div>
        <div class="col-3">
            <img src="{img2}">
        </div>
        <div class="col-3">
            <img src="{img3}">
        </div>
    </div>
</div>

以上代码，仅供参考，希望后面的解决办法对你有用，感谢今天的所有人，好心情 ~(^o^)/~