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

一、本堂课重点内容：

JavaScript 好代码的标准
HTML/CSS/JS 各司其责

课程介绍：本节课从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，该小节将集中讲解三大原则之一的“各司其职”原则。

二、详细知识点介绍：

JavaScript 好代码的标准

"各司其责"，即每个部分都有其特定的职责，不会出现重复或冗余的代码。
"组件封装"，即将代码封装成独立的组件，使得代码可重用，易于维护。
"过程抽象"，即将复杂的过程抽象成简单的函数或模块，使得代码易于理解和修改。

接下来我会按照我的理解更详细解释一下这三个角度：

"各司其责" ：

在编写JavaScript代码时，应该尽量避免在一个组件或函数中执行多个不相关的任务。每个组件或函数都应该有自己明确的职责，并且在执行这个职责时尽可能地简洁和高效。这样可以使代码更易于维护和理解。
"组件封装"

封装是指将组件的代码隐藏起来，并且提供一组简单的接口来使用它。这样可以使得代码更加可重用，并且隔离了组件内部的细节，使得维护和修改更加容易。
"过程抽象"

抽象是指将复杂的过程拆分成若干个简单的函数或模块。这样可以使得代码更易于理解和修改。同时，将一个复杂的过程拆分成若干个模块，可以使得代码更加可重用。

这三个角度虽然独立，但实际上是相互联系的，通过结合使用来让我们写出高质量的JavaScript代码。

HTML/CSS/JS 各司其责

应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零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 = '';
    }
});

对比未使用js的版本，主要用到了CSS中的伪类选择器

四、课后个人总结：

在本节课中，我学习了JavaScript 编码原则之一，即“各司其职”原则。“各司其职”意味着在编写代码时，每个部分都应该有明确的职责和边界。这样，代码就能更容易维护和扩展，并且也更易于理解。

在 JavaScript 中，实现这种原则的一种方式是通过封装组件(为便于细究，将在下篇笔记细讲）。这样，每个组件都可以独立运行，并且可以轻松地在其他地方重用。另外，通过使用抽象过程来组织代码，这样可以使代码更易于理解和维护。

总之，在本节课中，我学习了如何使用“各司其职”原则来编写高质量的 JavaScript 代码。我相信这些原则不仅适用于 JavaScript，还适用于其他编程语言。之后继续学习其他 JavaScript 编码原则，并在实践中提高自己的编程能力。

五、引用参考：

JavaScript 编码原则之各司其责

JavaScript 编码原则之各司其责 ｜ 青训营笔记