这是我参与「第四届青训营」笔记创作活动的的第3天，今天由月影老师给我们讲了js代码的一些规范和优化，主要为了鼓励我们要将我们的代码写的更好。以下是今天上课的一些知识点归纳和本人的知识点补漏：
一些概念
组件设计的原理：封装性、正确性、扩展性、复用性； 实现组件步骤：结构设计、展现效果、行为设计； 三次重构：插件化、组件化、抽象化； 过程抽象：让需求剥离出来； 高阶函数：以函数为参数，以函数作为返回值，常用于作为函数装饰器； 纯函数：可预期，维护性强
一些代码上的新知识
- 通过label控制单选框：
<input id="change" type="checkbox">、<label id="checkit" for="modeCheckBox">，本例中input元素和label通过label的for关联input的id，实现了按label来对单选框进行操作。 #modeCheckBox:checked+.contain：这个例子中，第一，用到了:checked伪元素，是给被选中的单选框一个选中后的样式；第二，+加号的用法：给相邻的元素一个样式，此处则指当id为modeCheckBox元素被选中时，给id为modeCheckBox元素的相邻且类名为contain的元素一个样式。- Animator 构造的时候可以传三个参数，第一个是动画的总时长，第二个是动画每一帧的 update 事件，在这里可以改变元素的属性，从而实现动画，第三个参数是 easing。其中第二个参数 update 事件回调提供两个参数，一是 ep，是经过 easing 之后的动画进程，二是 p，是不经过 easing 的动画进程，ep 和 p 的值都是从 0 开始，到 1 结束。（为什么要使用 ep 和 p，在前一个动画教程里已经说明了。）
- name和id都不需要通过document来获取，即可在js中使用
- yield 生成器的表示，必须用next()调用
总结
除了以上这些小知识点，今天还学习到了很多关于算法的知识和技巧，让我意识到了前端工程师也是需要去力扣一下的。好啦，今天就这么多，明天加油！
