这是我参与「第四届青训营」笔记创作活动的第1天

各司其职

要让HTML、CSS、JavaScript的职能分离，也就是说HTML就应该只负责做整体页面框架结构设计的职能，CSS就只负责页面样式的职能，JavaScript只负责页面逻辑的职能

通过下面的这个深色背景、浅色背景切换的例子来感受一下各司其职的意义

深夜食堂.gif

第一版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <header>
    <button id="modeBtn">🌞</button>
    <h1>深夜食堂</h1>
  </header>
  <main>
    <div class="pic">
      <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
    </div>
    <div class="description">
      <p>
          这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
          眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
      </p>
    </div>
  </main>
</body>
</html>

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
}
div.pic img {
  width: 100%;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  background: transparent;
}

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(e.target.innerHTML === '🌞') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌜';
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

这样实现有何问题呢？很明显在这段代码中我们通过给按钮添加点击事件监听器，去直接修改样式，虽然实现了点击页面让背景颜色变化，但是这也违背了js只负责页面逻辑的原则。

此外，这段js代码还存在以下几个问题：

js直接修改的是行内样式，其优先级最高，这导致如果我们想要写新的样式去覆盖的话，就不得不加上!important，开发体验不好，还增加了开发者的心智负担；
不便于维护，如果后续想要添加或者修改样式的话，必须找到相应的js代码，然后进行修改；
性能问题，每一次触发点击事件，都会去DOM树中查找body节点，然后动态修改它的样式，改变背景色和文字颜色，这会触发重绘。

那么要如何优化呢？可以看看下一版的实现

第二版

出于各司其职的原则，改变页面背景色和文字颜色，明显是属于css的职能，那么我们有没有什么办法能够把这部分逻辑与js解耦，交给css去处理呢？

实际上是可以的，我们可以通过css的类名去处理样式，然后js负责类名的添加和移除来控制逻辑，将它们的职能划分清楚，代码如下（HTML没有变动，就不做贴上来了）

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

body.night #modeBtn::after {
  content: '🌜';
}

css主要变动就是添加了.night类名的样式，当body上有.night类名的时候，就把背景色变为黑色，文字颜色变成白色，并添加了过渡动画，同时深色模式切换按钮的文本也会发生变化，这些都交给css去处理

js的部分只需要控制.night类名的添加和移除

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

这样一来就将css和js的职能划分清楚了，需要添加或修改样式的时候，也只需要到css代码中处理，不需要打开js代码进行修改，降低开发者的心智负担。

那么这个方案就完美了吗？还有没有更好的方案？

第三版

事实上可以进行一个优化，使用纯html + css实现这个深色模式切换的效果，怎么做到的呢？

我们可以修改一下html，在页面上设置一个checkbox复选框，当复选框选中的时候，切换到深色模式，反之则是浅色模式，checkbox的选中和未选中是可以通过css的伪类选择器:checked进行选中的，所以我们可以利用这个特点，移除掉js代码，用纯html + css去实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>
</body>
</html>

body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  height: 100%;
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

总结

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

跟着月影学JavaScript之各司其职 | 青训营笔记

各司其职

第一版

第二版

第三版

总结