这是我参与「第四届青训营 」笔记创作活动的第4天
写好JS的一些原则
- 各司其职 让HTML、CSS和JS职能分离 结构表现行为分离
- 组件封装 好的UI组件具备正确性扩展性复用性
- 过程抽象 应用函数式编程思想
各司其职
示例：页面的深色和浅色的两种浏览模式切换
优化方式：直接操作样式变成操作类名 直接操作样式在维护时加入比如灰色样式时就要重写js代码，第二种就加入一种新类名样式就行
修改css checkbox状态
结论：
- 应当避免不必要的js直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零js方案
组件封装
示例：轮播图 组件是指web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性 结构：首先定义一个无序列表结构 表现：
- 使用css绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modify）
- 轮播图的切换动画使用CSS transition
行为：JS API
- SLIDER
- +getSelectedItem()得到当前选中的图片元素
- +getSelectedItemIndex()得到当前选中图片元素的下标
- +slideTo()to到某个特定index元素上
- slideNext()轮播下一张图片
- slidePrevious()轮播上一张图片
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- event（控制流）
重构： 插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式来建立联系
plugin是什么为什么让构造函数减少了那么多
重构：模板化
将HTML模板化，更易于扩展 .innerHTML=render()
抽象化
- 将组件通用模型抽象出来
该种方法没有考虑嵌套
总结：
- 组件设计的原则： 封装性、正确性、扩展性、复用性
- 实现组件的步骤： 结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架） 注意没有破坏各司其责的原则
过程抽象
组件化用来控制总体的ui组件
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子：问题是多次click事件都会触发溢出li的html代码 01：05
高阶函数
once
为了能够让只执行一次的需求覆盖不同事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象
比如人开门这个事件中，人和门都是可以抽象成一个物体，开门这个动作的抽象过程就是过程抽象，复用这个动作就可以实现开窗开冰箱门
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于函数装饰器
常用高阶函数
- Once
- Throttle，截留函数，比如鼠标移动注册事件，或者有滚动scroll事件，因为这些事件触发很多（注册很多事件监听器），就会带来性能开销，如果只需要比如每500ms触发一次记录一次就用这个函数
- Debounce，在截留基础上比如实现自动保存的功能，一直自动保存会对服务器产生负荷，比如想要停止输入3000ms后再去保存，使用该函数
- Consumer/2 同步改成异步，延时调用
- Iterative 操作多个元素
为什么要使用高阶函数
比如结果和调用次数有关的就不是纯函数，非纯函数越多维护性越差 纯函数（可预期的，不会改变外部状态）的好处
编程范式
命令式和声明式
声明式有更好的拓展性
