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

大熊G

发布于 2022-11-14 16:51:39

46000

代码可运行

文章被收录于专栏：大熊G的前端分享

运行总次数：0

代码可运行

theme: channing-cyan

各司其责

我们都知道前端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>

这个代码看起来是没有什么问题，我们仔细想想它是否有优化的空间，往各司其责上想。如果有其他人读我们的代码，代码很多的情况下他是不容易分辨我们写的是什么内容。我们这里修改样式，是直接动用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>