各司其职

所谓各司其职就是：HTML、CSS和JS的职责分离。

HTML：结构
CSS：表现
JavaScript：行为

我们来看一个例子：

写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现，你会怎么做？

版本一

在上述的代码片段中，已经对基本的HTML和CSS进行了编写。

如下是第一个版本的实现思路：

获取进行切换的元素
给元素绑定鼠标点击事件
获取页面body元素
判断当前元素是🌞还是🌜
是🌞就将页面的背景色改成深色，字体颜色改成白色，并将元素内容变成🌜
否则我们就将页面背景色改为白色，字体改为深色，并将元素内容变成🌞

如下是实现的js代码：

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修改了样式和结构，首先违背了我们所提到的各司其职，其次可读性不好，如果没有HTML和CSS的辅助，我们只知道这段代码是在修改样式，但是它整体实现的是什么功能，我们很难知道。

对于扩展性来说，如果我们想将深浅模式的背景颜色或者字体进行修改，也就需要我们去修改JS代码。如果说我们想要在模式切换时加一些过渡动画，我们应该怎么去处理呢？

于是我们有了版本二！

版本二

我们可以使用描述性className去切换，js和css样式各司其职。让JavaScript修改他们的类名，而不是直接操作style。

实现思路：

通过给button加after伪元素，提供🌞与🌜的内容，不需要JS修改页面结构
通过设定night类，让页面背景变黑字体颜色变白，实现黑色模式，并且加入过渡效果
这样元素就可以通过设置不同的类名展示不同的样式了

如下为代码

相比之前的版本一，代码的可读性和扩展性都有了很大的提升。还有什么其他解决方案呢？

版本三

零JS实现方案

 <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>

在这里，我们将通过label元素代替之前的button元素，将它指向大盒子外面的checkbox元素。

 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中我们将label指向了checkbox，也就是点击label相当于点击了checkbox
然后我们将真正的checkbox隐藏
通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类

:checked 表示：选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

通过相邻选择器 + 选择到checkbox下面的大盒子，修改样式

注意：零js实现方案要注意css的兼容性问题。

结论

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

写好JavaScript的三大重要原则之各司其职｜ 青训营笔记

各司其职

版本一

版本二

版本三

结论

写好JavaScript的三大重要原则之各司其职｜青训营笔记