用CSS减少JavaScript代码量

版权声明:Dear_Mr原创文章,未经允许,不得转载 https://blog.csdn.net/Dear_Mr/article/details/81090478

用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^)/~

展开阅读全文

没有更多推荐了,返回首页