怎么写好JavaScript 之 “各司其职” | 青训营笔记

前言

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

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

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

一个比如

在这个比如中，我们需求写一段JavaScript代码来操控一个网页的款式，让它支撑浅色和深色两种阅读形式。

如何写好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代码即可满足，项意图可维护性也得到了提高。这样好像已经是一个很不错的解决计划了，但是否还能继续改善？

是否还能改善？

看下面的一个解决计划：

<input type="checkbox" id="btn">
    <div id="main">
      <div id="title">
        <h1>The Title</h1>
        <label for="btn"></label>
      </div>
      <p><p>
      <p>
        HTML中有多种多样的标签，能够依据标签及其属性的名字了解这一标签的作用与意义
        ——这就是标签的语义化。在开发进程中，或许有时会陷入重视款式而疏忽了内容本身
        的误区，从而与标签语义化的初衷各走各路......
      </p>
    </div>

#btn{
    display: none;
}
#btn:checked+#main {
    color: white;
    background-color: black;
}
#main label::before {
    content: '';
}
#btn:checked+#main label::before {
    content: '';
}

在这一版别的解决计划中，款式的更改在HTML的基础上彻底依托CSS实现，没有运用任何一行JavaScript代码。
这是由于运用了HTML的复选框和CSS中的伪类选择器，而且运用了 <label></label> 标签将代表形式的小图标和复选框关联了起来。当复选框被选中时，CSS中的伪类选择器便会给页面换上对应的款式；复选框取消选中时，款式又会康复初始时的姿态。

这个计划没有用到JavaScript，但可维护性也没有下降。比起前两个计划，真正表现了 HTML\CSS\JavaScript 的各司其职——HTML对应结构、CSS担任款式、JavaScript办理行为。

HTML\CSS\JavaScript 各司其职

在开发进程中，我们能够注意以下几点：

  • HTML\CSS\JavaScript分离

  • 应当防止不必要的JS直接操作款式

  • 能够用class表明状态

  • 纯展示类交互寻求零JS计划

当然，款式改动时防止运用JavaScript也不是绝对的，一些复杂的改变仍是需求凭借它的协助。但核心的思维仍是要将“三件套”各自担任的内容规划清晰，防止对应不同板块（结构、款式、行为）的代码混作一堆、难以办理。

⚠️有时将 HTML\CSS\JavaScript 写在同一个文件中也并非违反了“各司其职”的思维，由于要点分离的是各自担任的方向，并非是分离所处的文件。

小结

这篇笔记记载的是HTML\CSS\JavaScript各司其职的思维，而且包含了月影老师在课堂上所运用的比如。虽然了解起来并不难，但是关于培养这样的思维仍是需求通过时间的沉淀。怎么写好JavaScript、怎么“优雅地”进行开发，也是需求继续学习的内容。

2022/7/25