写好 JS 的原则：

各司其职
- 让 HTML、CSS 和 JavaScript 职能分离。
组件封装
- 好的 UI 组件具备正确性、扩展性、复用性。
过程抽象
- 应用函数式编程思想。

作为前端工程师，不仅要实现功能，更要保证代码后期的可维护性（后续接管人能读懂代码和方便修改代码，扩展和复用）

HTML/CSS/JS 各司其责

先看一个例子：实现黑白天切换效果。

版本一： 初学者可能会这样写：使用纯 JS，由 JS 直接操作样式

const btn = document.getElementById("modeBtn");
btn.addEventListener("click", (e) => {
  const body = document.body;
  // e.target 获取触发该事件的元素
  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 改变类名来改变页面样式，体现了上述编写 JS 原则的 各司其职。

const btn = document.getElementById("modeBtn");
btn.addEventListener("click", (e) => {
  const body = document.body;
  if (body.className !== 'night') {
    body.className = 'night'
  } else {
    body.className = ''
  }
});

版本三： 只使用 CSS，此处就用到了 CSS 的高级功能。本版本更能体现上述编写 JS 原则的 各司其职。

<style>
        #modeCheckBox {
            display: none;
        }
        /* + 兄弟选择器 */
        #modeCheckBox:checked + .content {
            color: white;
            background-color: black;
        }
    </style>
</head>

<body>
    <input id="modeCheckBox" type="checkbox">
    <div class="content">
        <header>
            <label for="modeCheckBox">白天</label>
            <h1>深夜食堂</h1>
        </header>

关于 label 标签：看 www.w3school.com.cn/html5/tag_l… 就明白了。就是当点击 label 标签，实际是和 label 的for值相同的 input 的 id值一样的那个 input 被选中了（checked），当checked，其兄弟元素就设置 .content 改变颜色等，不点击则 .content 无设置。

总结：

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

组件封装

例子：实现一个轮播图。

插件化
- 依赖注入建立联系

跟着月影学 JavaScript | 青训营笔记

写好 JS 的原则：

HTML/CSS/JS 各司其责

组件封装