这是我参与「第六届青训营 」伴学笔记创作活动的第 4 节课
前言：
本节课从实践维度解读在实际编码过程中何种类型的JavaScript代码称为“好代码”，并从JS出发，总结其他语言编码可遵循的共性原则，由浅入深。主要围绕编码三大原则的“组件封装”原则展开。组件是指web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元。
好的组件具备封装性、正确性、扩展性、复用性。
写好JS的一些原则
- 各司其责（让HTML、CSS和JavaScript职能分离）
- 组件封装（好的UI组件具有正确性、扩展性、复用性）
- 过程抽象（应用函数式编程思想）
深夜食堂案例：
写一段JS，控制一个网页，让它支持浅色和深色两种漠视。
深夜食堂——总结
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装案例：
用JS写一个电脑网站的轮播图
轮播图是一个典型的列表结构，可以使用无序列表ul元素来实现。
CSS表现
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
API设计应保证原子操作，职责单一，满足灵活性。
控制流使用自定义实践来解读
过程抽象：
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
操作次数限制：
- 一些异步交互
- 一次性的HTTP请求
Once： 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程称为过程抽象
高阶函数：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
课程总结： 通过案例的学习对JS有了了解，JS是HTML的行为，通过JS可使HTML实现不同的效果。JavaScript是一种非常灵活的编程语言，可以通过多种不同的方式实现需求，遵循一些原则盒技巧可以使代码更具可读性和效率。
