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

KKPROGRAMING
917 阅读4分钟

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

🌵前言

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

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

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

🍒一个例子

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

image.png

image.png

我们容易想到的是使用 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

avatar
文章
阅读
粉丝