前端vue代码缩减问题

Question

项目使用webpack + vue构建的

由于本人js不是太好，还请各位大神多多指教如何缩减下面这段代码

或者有别的好办法写出来也行

init() {
      if (window.innerWidth <= 1400) {
        document.getElementById('w').style.width = (window.innerWidth - 367) + 'px';
        document.getElementById('l').style.display = 'none';
      } else {
        document.getElementById('l').style.display = 'block';
        document.getElementById('w').style.width = (window.innerWidth - 717) + 'px';
      }
    }

Answer 1

代码不要用图片贴出来!!

let w = window.innerWidth;
    document.getElementById('w').style.width = w - (w<=1440?367:717) + 'px'

;
    document.getElementById('l').style.display = w<=1440?'none':'block';

Answer 2

像这种屏幕宽度判断的，业务关系不大，应该后续还会用到。
建议将屏幕尺寸做个区分lg, md, sm等
既然用了vue，获取dom可以用ref

<template>
    <div>
        <div id="w" ref="w"></div>
        <div id="l" ref="l"></div>
    </div>
</template>

mounted() {this.init()},
init() {
    let l = this.$refs.l
    let w = this.$refs.w
    const isLg = getScreenSizeEnum() === 'lg'
    l.style.display = isLg ? 'none': 'block'
    w.style.width = window.innerWidth - (isLg ? 367 : 717) + 'px'
}

function getScreenSizeEnum() {
    const innerWidth = window.innerWidth
    if (innerWidth >= 1400) {
        return 'lg'
    }else {
        //todo: xxxx
    }
}