这是我参与「第五届青训营」伴学笔记创作活动的第 7 天，今天学习了 JavaScript 编码原则，学习了什么叫做好的 JavaScript 代码，包括各司其职、组件封装、过程抽象，以及如何规范编码、如何进行代码质量优化等。
各司其职
前端的技术栈主要有三个：
- HTML：用于定义内容
- CSS：用于定义样式
- JavaScript：用于定义行为
各司其职的意思是 HTML、CSS 和 JavaScript 在自己的专长范围内工作，不要让他们的职责相互混淆，比如之前学过的不要在 HTML 中定义样式，HTML 应该专注于内容，样式的定义应该交给 CSS 去完成。同样的，JavaScript 是用于定义页面的行为，所以尽可能不要用 JavaScript 来定义样式。
例如深色模式切换的实现，可以利用 JavaScript 来修改元素的样式，但是这样违背了“各司其职”原则，可以使用 JavaScript 来修改元素的类，然后 CSS 通过不同的类来修改元素的样式。
进一步改进，可以利用表单元素来定义页面的不同状态，这样利用 CSS 的属性选择器可以根据不同状态来显示不同的样式，进一步实现了各司其职，在简单的纯展示页面可以做到零 JavaScript。
组件封装
组件封装的意思是将页面中的各个组成部件根据功能拆分成不同的组件，进而封装起来，相同功能的组件可以在不同的地方重复使用，而不再需要重新再从头写一段代码。组件封装提高了代码的复用性，方便了程序员的编写程序过程，并且极大的方便的后期修改代码和维护代码。
例如，现在流行的前端框架 Vue 和 React 正是利用了组件封装的思想，将页面中的元素封装成一个个的组件，使得代码更加高效。同时，市面上涌现了大批各式各样的组件库，可以让程序员直接调用。
过程抽象
过程抽象是函数式编程思想的基础应用，对于一些重复的方法过程，将其抽象为函数，在整个系统中复用，提高了效率。
函数的输入和输出不一定要是数据，可以将函数作为输入参数，也可以将函数作为输出的返回值，高阶函数。
