前情提要
今天是字节青训营打卡的第七天，本文主要讲述JS代码的编码原则，让我们知道如何写出高质量的JS代码
如何写好js代码
编写高质量的 JavaScript 代码是每个前端开发者的追求。那么我们应该如何写好JS的代码呢？
1. 各司其职（Separation of Concerns）
各司其职（Separation of Concerns，SoC）是一种设计原则，强调将一个复杂系统分解成多个独立的部分，每个部分负责处理特定的任务或关注点。这种分解有助于提高代码的可读性、可维护性和可扩展性。
优点
- 模块化：每个部分都是独立的，可以单独开发、测试和维护。
- 可重用性：独立的模块可以在不同的项目或上下文中重用。
- 可维护性：修改一个部分不会影响其他部分，减少了代码的耦合度。
- 可扩展性：新增功能时，可以轻松地添加新的模块，而不必修改现有代码。
示例
在一个典型的 Web 应用中，可以将关注点分为以下几个部分：
- HTML：负责页面的结构。
- CSS：负责页面的样式。
- JavaScript：负责页面的交互逻辑。
2. 组件封装（Component Encapsulation）
组件封装是指将一组相关的功能和数据封装成一个独立的单元，这个单元可以被其他部分复用。组件封装是现代前端框架（如 React、Vue、Angular）的核心概念之一。
优点
- 复用性：组件可以在不同的地方和不同的项目中复用。
- 可测试性：组件可以独立地进行单元测试。
- 可维护性：组件内部的逻辑和数据是隔离的，修改一个组件不会影响其他组件。
- 可组合性：组件可以组合成更复杂的界面。
3. 过程抽象（Procedural Abstraction）
过程抽象是指将一组相关的操作封装成一个函数或方法，这样可以隐藏具体的实现细节，只暴露必要的接口。过程抽象是函数式编程的基础，也是提高代码可读性和可维护性的关键。
优点
- 可读性：通过函数名可以直观地了解其功能。
- 可重用性：同一个函数可以在不同的地方调用。
- 可测试性：函数可以独立地进行单元测试。
- 可维护性：修改函数的实现不会影响调用者。
举个栗子
直接用js去控制css内置属性来实现
代码如下所示
思考
这段代码为啥不好呢？ 因为切换样式是css该干的事情，却让js来做了！ 程序的耦合度增加了
解决方案
我们完全可以不需要使用js来切换样式， 只需要html和css即可实现
HTML
<body>
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
<main>
...
</main>
</div>
</body>
在这段 HTML 代码中，我们有一个名为 modeCheckBox 的复选框输入元素，以及一个包含标题 <h1> 和主内容区域 <main> 的 .content 分区。标签 <label> 元素与复选框关联，以便用户可以通过点击标签来触发复选框的变化。
CSS 代码
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
这段 CSS 代码定义了当 modeCheckBox 复选框被选中时，.content 分区的背景色变为黑色，文字颜色变为白色，并且所有过渡效果持续时间为 1 秒。这里使用了伪类 :checked 来检查复选框是否被选中，以及相邻兄弟选择器 + 来选择紧随其后的 .content 分区。
工作原理
当用户勾选 modeCheckBox 复选框时，浏览器会自动为该复选框添加 :checked 伪类。由于 CSS 规则指定了 #modeCheckBox:checked + .content，因此 .content 分区会被选中并应用相应的样式规则。结果就是页面的主题从默认样式切换到暗黑模式。
