这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

对于前端的学习来说，JavaScript肯定是重头戏。在今天的字节跳动第四届青训营前端课程中，月影老师就 如何写好JavaScript 这一话题进行了授课。其中谈到了"三件套"各司其职、组件封装以及过程抽象三个方面。

我将在这篇笔记中记录 HTML\CSS\JavaScript 各司其职 的内容。掌握这样的思想会给前端开发带来不少便利，或者帮助自己写出更加优雅的代码。

一个例子

在这个例子中，我们需要写一段JavaScript代码来控制一个网页的样式，让它支持浅色🌞和深色🌛两种浏览模式。

我们容易想到的是使用 addEventListener() 方法，针对 click 事件传入一个保存待执行动作的函数：

const btn = document.getElementById("btn");
btn.addEventListener("click", (e) => {
  const main = document.getElementById("main");
  if (e.target.innerHTML === "🌞") {
    main.style.backgroundColor = "black";
    main.style.color = "white";
    e.target.innerHTML = "🌛";
  } else {
    main.style.backgroundColor = "white";
    main.style.color = "black";
    e.target.innerHTML = "🌞";
  }
});
复制代码
复制代码

这段JavaScript代码已经能够满足我们切换不同模式的需要。那么是否还有更好的方案？

改进

如果设计师对于不同模式的样式有更改的需求，比如说将深色模式下的背景色变换为深蓝色、字体颜色变换为淡黄色，我们需要如何改动已有的代码？

在已有代码的基础上，我们只能改动JavaScript中的代码才能满足设计师的样式升级需求。但是这样似乎太麻烦了，因为样式改动的越多，对于我们修改代码就越不利。

为了提升代码的可维护性，我们可以使用下面的方法：

const btn = document.getElementById('btn');
  btn.addEventListener('click', (e) => {
    const main = document.getElementById("main");
    if(main.className !== 'night') {
      main.className = 'night';
    } else {
      main.className = '';
    }
  });
复制代码
复制代码

这里通过给具体的模式绑上对应类名的方式，如给深色模式绑定上 night 类，让模式切换时带动类名的切换，通过不同类名绑定不同的CSS样式，达到样式变更的目的。

这样一来，对样式变更的需求只需要修改对应类的CSS代码即可满足，项目的可维护性也得到了提升。这样似乎已经是一个很不错的解决方案了，但是否还能继续改进？