讲师：月影
课程介绍
本节课从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，该小节将集中讲解三大原则之一的“各司其职”原则。
课程重点
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
什么才是好的JavaScript代码
学了JavaScript个基本语法以后，并不意味着说你完全掌握了JavaScript，其实最重要的是一定要对自己代码上点心，然后能够把自己的代码写好，否则的话写了很多的代码，这个代码可能过一段时间自己也忘记了，或者说别人其实来维护你的代码的话，其实是很难的。
-
各施其责
什么叫各司其责？也就是我们要让 html、css 和 JavaScript 职能分离，这个是我们做前端工程师的要迈出的第一步
-
组件封装
我们都知道说其实做前端，我们更多的时候是跟 UI 打交道，那 UI 打交道的话，其实我们是需要把一些 UI 的组件给封装起来，然后来去使用的，我们前端工程师非常重要的一个就是你如何去做组件封装。
-
过程抽象
我们说的抽象，其实有两种，就一种叫数据抽象，一种叫过程抽象。就我们前端的话，其实有很多时候我们要处理交互过程，所以它不仅仅是需要对数据抽象，我们需要去掌握基本的过程抽象，当我们有过程抽象的思想之后，我们可以让我们这代码拥有这个更好的扩展性，然后拥有着这个更好的这个就是我们我们叫做这个，叫做这个就是复用，然后这个扩展的能力，然后能够让我们的这个代码的话变得更加通用。
各司其职
我们来看一个例子，这个例子的话是这样的一个代码，就是我们在很多时候，比如我们实现一个网页的时候，你会发现说我们现在很多 APP 或很多网页，其实它提供的深色和检测模式嘛？
然后比如说我在夜间的时候，我们在使用这个深色模式，然后在这个白天的时候使用这个浅色模式，就是它的这个阅读其实是可以让人那个就是更好地去阅读这个内容的。
那这个例子的话非常简单，就是这样的一个网页，它的标题叫深夜食堂，然后它是一个由一张图片和一段文字组成的。然后这个网页的话，就我们的这个需求就是我们写一段 JS 来控制这个软网页，然后让它来支持浅色和深色的两种模式。比如说现在是这个浅色模式是白天阅读的，那我们点击一下把它换成这个深色模式，就是在这个夜间阅读的，我们会发现说它的这个背景变成黑色，然后文字变成白色，然后就这样的一简单的功能.
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
