如何写好 JavaScript(一) | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第 4 天。（第四篇笔记）

这是我参与「第四届青训营」笔记创作活动的第 4 天。（第四篇笔记）

JavaScript 是 Web 应用一大重要组成部分。HTML、CSS、JavaScript 中，JavaScript 负责页面的动态与交互部分。本篇笔记记录了学习「如何写好 JavaScript」过程中的结合例子理解写好 JavaScript 的是三个原则。

概念

写好 JavaScript 的一些原则：

各司其职：在编写代码时，应该尽量使它们各司其职，也就是说 JavaScript 尽量少干扰 HTML 和 CSS。
组件封装：好的 UI 组件应该具备正确性、拓展性和复用性。
过程抽象：应用函数式编程思想。

理解例子

🌰 例子 / 浅色与深色模式切换：

写一段 JavaScript 控制网页的浅色模式与深色模式的切换，保证类内容根据不同的模式切换。

第一个版本：只有简单的一个按钮，通过 JavaScript 完成页面结构与样式的浅色模式与深色模式的变化：

HTML 部分：

<header>
  <button id="modeBtn">🌞</button> //给按钮绑定鼠标点击事件
  <h1>深浅色模式切换</h1>
</header>

CSS 部分：

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

body {
  padding: 10px;
  box-sizing: border-box;
}

#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  background: transparent;
}

JavaScript 部分：

window.onload=function(){
    document.getElementById("file-btn") 
    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 = '🌞';
      }
    });
}

根据按钮的文字判断当前的模式，如果为 🌞 则为浅色模式，如果为 🌜 则为深色模式，并且根据不同的模式使用 JavaScript 修改 body CSS 样式和 HTML 的内容。

这一个版本中，在 JavaScript 操作了 body 的样式，修改了元素的结构。而 CSS 和 HTML 只起到了提供基础结构的作用，明显部分和各司其职的思想相悖。

第二个版本：JavaScript 只完成控制点击按钮事件，HTML 内容由 HTML 负责，样式由 CSS 负责。

codepen：light to dark mode (codepen.io)

通过 body 的 class 类控制浅色模式和深色模式，如果没有 .night 类时则为浅色模式，有则为深色模式。只要通过 JavaScript 在点击事件添加控制 body 的 class 属性的方法即可。

这个版本中，JavaScript 的作用是仅仅修改了类名，并且是描述深色状态的类名，方便他人阅读代码快速获取需求，提高代码可读性；

没有使用 JavaScript 控制 HTML 的内容和 CSS 样式。

第三个版本：最优化版本，无需 JavaScript 绑定事件，直接利用 HTML 表单勾选框的特性。

codepen：light to dark mode (v3) (codepen.io)

<header>
  <input type="checkbox" id="modeCheckBox">
  <div class="content">
    <h1>Light to Dark</h1>
    <label id="modeBtn" for="modeCheckBox"></label>
  </div>
</header>

当勾选框的状态为勾选时，CSS 根据标记状态（:checked）的伪选择器修改样式。但是注意，勾选框（输入元素）要在内容元素之前，+ 要介于两选择器之前，并且这两个元素要为相邻元素，同属于同一个父元素。

结论

本节通过了一个例子的不同写法，随着代码的迭代优化，能够理解到 JavaScript「高质量」写法的几个方面，重点是 JavaScript 与 HTML 、CSS 应该保持各司其职其责的原则。