写好JavaScript需要遵循以下原则：
- 各司其职
- 组件封装
- 过程抽象
一、各司其职
HTML负责去描述网站结构，CSS主要是负责网站的展示表现，JavaScript负责交互内容，所以三者要各司其职。以课堂上讲的例子：深夜食堂。其要求通过控制网页的界面，让它支持浅色和深色两种浏览模式。第一次代码使用了JavaScript去修改了页面的样式，违背了各司其职的原则，导致其全局污染，样式和行为没有分离，即没有做到职责分离，复用性不强，封装性不好。但最后一个版本使用<label>、<input type="checkbox">标签的特性，使用了checked各司其职的完成了浅色和深色切换的任务。
- HTML/CSS/JS各司其职
- 应当避免不必要的有JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
二、组件封装
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。一个好的组件具备封装性、正确性、扩展性、复用性。
基本方法:
1.结构设计：HTML
通过良好的结构设计，可以提高组件的可扩展性和可维护性。其中轮播图是一个典型的列表结构，可以使用无序列表<ul>来实现.
2.展现效果：CSS
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
3.行为设计：控制流（Event），功能（API）
通过提供良好的 API 接口，使得其易于集成和扩展。控制流通过监听和处理事件，可以让组件具备交互能力。
解耦:
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
- 将HTML模板化，更易于扩展
三次重构：
- 插件化
- 模板化
- 抽象化
三、过程抽象
用来处理局部细节控制的一些方法，函数是编程思想的基础应用，为了能够让“只执行一次”的需求覆盖不同的事件处理，我们将这个需求剥离处理。这个过程我们称为过程抽象。
高阶函数：一个函数就可以接收另一个函数作为参数,简言之,函数的参数能够接收别的函数,这种函数就称之为高阶函数常见的高阶函数有：Map、Reduce、Filter、 Sort。高阶函数是至少满足以下条件之一的函数：
- 函数可以作为参数传递
- 函数可以作为返回值输出
高阶函数实现AOP： AOP是Java Spring架构的核心。AOP的主要作用就是把一些和核心业务逻辑模块无关的功能抽取出来，然后再通过“动态织入”的方式掺到业务模块中。
总结
这节课总体分为三部分：各司其职，组件封装，过程抽象。但每部分知识较多较杂，一时间无法全部接收，还需多多理解学习，深入了解，梳理脉络，理清其中关系才能更好的写好JavaScript。
