这是我参与「第四届青训营 」笔记创作活动的的第3天。
今天上午主要讲的怎么去规范代码怎么去写好js，内容比较多，满满的干货，我们分上下两部分来消化一下。
一、本堂课重点内容：
- 在前端三剑客中都负责什么
- 怎样优化JS代码，让代码更加优雅
二、详细知识点介绍：
写好JS的三大原则
各司其责
要怎么理解各司其责呢，我们先来看看月影老师给的小案例吧。
- 这是一个切换深色模式的小案例，这也是我们实现的第一种方式。
- 以下是我们实现功能的第二种方式。相对于第一种方式我们没有去操纵DOM元素，而只改变了其class名字，这种方式是非常有效率的方式，因为我频繁的去操作DOM会导致页面频繁的重排重绘，我们可以利用这种方式合并操作来减少重排重绘的次数，从而提升效率。
- 以下是我们实现功能的第二种方式，我们可以看到我们并没有去操作DOM元素，效果的实现就是靠CSS去实现。这就是我们开头要说的就是各司其责。
让HTML、CSS和JavaScript职能分离，避免不必要的由JS直接操作样式。
可以用Class来表达状态。
纯展示类交互寻求零JS方案。
组件封装
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
同样我们利用月影老师的案例来引入今天的知识点。这是一个轮播图的案例：
结构：HTML 轮播图是一个典型的列表结构，我们可以使用无序列表
ul元素来实现。
表现：CSS ① 使用 CSS 绝对定位将图片重叠在同一个位置 ② 轮播图切换的状态使用修饰符（modifier）③ 轮播图的切换动画使用 CSS transition
行为：JS 使用自定义事件来解耦。
优化组件封
- 插件化：将控制元素抽取成插件、插件与组件之间通过依赖注入方式建立联系。
- 模板化：将HTML模板化，更易于kuoz。
- 抽象化（组件框架）：将组件通用模型抽象出来。
过程抽象
过程首抽象我们可以理解为：为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
三、课后个人总结：
影响最深的还是老师讲的各司其责，“深夜食堂”的案例我第一反应就是直接通过JS来操作DOM,方便又快捷。月影老师也是一语道破，确实我也是我们值得去思考的问题，我实现一个效果是一回事，但是你要考虑到后期更改代码的一些成本问题，说白了就是学会了优雅写代码的思想，太优雅了！
