这是我参与[第五届青训营]笔记创作活动的第3天
课堂笔记
本堂课重点内容
- 如何写好JavaScript
- 写代码需要关注的要点
具体内容
写好JavaScript的一些原则
- 各司其职：HTML、CSS、JavaScript智能分离。
- 组件封装：其实我们做前端更多的是和UI打交道，所以需要把一些UI的组件给封装起来使用。好的UI组件具备正确性、扩展性、复用性。
- 过程抽象：用来处理局部细节控制的一些方法，应用函数式编程方式。
各司其职 | 页面日间/夜间模式的切换：
版本一：
版本二：
相互对比之下，可以发现版本二更加的简洁。版本一是直接对body的style进行操作，版本二是对className进行操作。我们一般用class来定义html元素的状态。
为什么版本二比版本一更好：
html是负责结构的，css是负责表现的，JavaScript是负责行为的。结构、表现、行为分离是我们需要掌握的一个基本原则。
版本二就很好的实现了各司其职的原则。
版本一用JavaScript去控制css其实就是让JavaScript做了css该做的事情。(这样容易让其他程序员阅读代码后无法直观的了解到原始需求)
组件封装 | JS实现轮播图
[结构]：
轮播图是一个典型的列表结构，可以用无序列表ul元素来实现：
[表现]：
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符 (modifier)
- 轮播图的切换动画使用CSS transition
[行为]： 拥有了html、css之后需要用js来确定切换的行为，此时需要设计一些API:
- getSelectedItem()：得到当前选中的图片元素；
- getSelectedItemIndex()：得到当前选中的图片元素在此列表中的下标；
- slideTo()：滑动到某个特定下标（index）的元素上；
- slideNext()：轮播下一张图片；
- slidePrevious()：轮播上一张图片；
一系列操作下来，功能没有问题，但是并不灵活，eg：去掉某一部分或修改某一部分，可能需要在html、css文件上都做改动。所以还具有很大的改进空间：
[重构]：
解耦：
将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系
将HTML模板化，更利于扩展。
将组件通用模型抽象出来。
过程抽象 | 操作次数限制
为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程称为过程抽象。
高阶函数：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
高阶函数 once：
总结
html/css/js应该各司其职，避免不必要的由js直接操作样式，可以用css表示状态。
实现组件的步骤：结构设计、展现效果、行为设计。
