【青训营】月影带我学js——各司其责

952 阅读2分钟

各司其责

我们都知道前端html和css,还有js都是不同的分工,这三个其实就是各司其责,web开发从一开始的框架上就做了职责分离,这样的话可以避免混用,造成应用非常的复杂。

写个小栗子来进行讲解,大家看到最后绝对会惊艳到。

我们写一个div,里面包着span,点击button的时候添加div背景颜色和span字体颜色。非常简单, 大家看一下代码。

<body>
    <div style="width: 100px;height: 100px;">
        <span>我是大熊jackson</span>
    </div>
    <button>点击改变div颜色</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click', () => {
        let div = document.querySelector('div');
        let span = document.querySelector('span');
        div.style.backgroundColor = '#99bb88';
        span.style.color = '#fff';
    }) 
</script>

image.png

这个代码看起来是没有什么问题,我们仔细想想它是否有优化的空间,往各司其责上想。如果有其他人读我们的代码,代码很多的情况下他是不容易分辨我们写的是什么内容。 我们这里修改样式,是直接动用css属性,其实我们可以直接给给class类的。

    <style>
       .change{
           background-color: #99bb88;
        
       }
       .change span{
           color: #fff;
       } 
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;">
        <span>我是大熊jackson</span>
    </div>
    <button>点击改变div颜色</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click', () => {
        let div = document.querySelector('div');
        let span = document.querySelector('span');
        div.className = 'change';
    }) 

以上这个方法就是添加一个类,我们读代码的时候直接找类名就可以知道操作的是什么了。 但是这样优化的还是不够,我们仔细想想这个其实是一个纯css的职责,没必要让js来参与操作。

最好的代码就是不写代码! 先看用纯css改变

    <style>

       #checkbox:checked + .change{
           background-color: #99bb88;
       } 
       #checkbox:checked + .change span{
           color: #fff;
       }
       #checkbox{
           display: none;
       }
       label{
           border: 1px solid #ccc;
           display: inline-block;
           padding: 10px;
       }
    </style>
</head>
<body>
    <input id="checkbox" type="checkbox" >
    <div class="change" style="width: 100px;height: 100px;">
        <span>我是大熊jackson</span>
    </div>
    <label for="checkbox">
        点击改变div颜色
    </label>
  
</body>

数值范围.gif 看到这个方法大家有没有惊艳到。我们用css的checkbox选中事件来做处理,直接就避免了编写js代码。

其实在这里还存在一些问题,比如刷新页面后状态就无法保存了。这时候就需要用到js了。但是纯展示类的我们还是尽量追求零JS。

总结

  • HTML CSS JS 应该各司其责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案