这是我参与「第四届青训营 」笔记创作活动的的第4天

重点

写好JS的原则：各司其职，组件封装，过程抽象
各司其职（深浅模式）
组件封装（轮播图）：控制流，插件化，模板化，抽象化
过程抽象：once及其他高阶函数的应用
编程范式：命令式 声明式

写好JS的一些原则

各司其职：HTML,CSS,JS职能分离
组件封装：好的UI组件具备正确性，扩展性，复用性
过程抽象：应用函数式编程思想

各司其职：深夜食堂深浅模式

代码一：JS对CSS进行了更改，其他人很难从代码直接了解需求

代码二：直观看出写的是night模式，但JS依旧更改了css

代码三：没有JS，用class来切换

结论：
    各司其职
    避免不必要的JS直接操作CSS
    可以用class表示状态
    纯展示类交互寻求零JS方案

组件封装：轮播图

组件是指web页面上抽出来的一个个包含模板(html),功能(js),和样式（CSS）的的单元。好的UI组件具备正确性，扩展性，复用性。

结构：HTML

轮播图是典型的列表结构，我们可以用无序列表ul元素来实现

表现：CSS

使用CSS绝对定位将图片重叠在同一位置
轮播图切换状态使用修饰符modifier
轮播图的切换动画使用CSS transition

行为： JS

使用api

    +getSelectedItem（）得到当前选中元素
    +getSelectedItemIndex（）得到当前选中元素在列表的下标
    +slideTo() 轮播到指定图片
    +slideNext()
    +slidePrevious()
    ps：slidePrevious()里 previousIndex = (this.items.length + currentIdx - 1)，这里避免了得到的数为负数
   

控制流

自定义事件
html增加小圆点
js 检测状态

组件封装基本方法总结

1.结构设计
2.展现效果
3.行为设计
    i.api功能
    ii.event控制流

改进方案

插件化：

    将控制元素抽取成插件
    插件与组件之间通过"依赖注入"方式建立联系

模板化

    将HTML模板化，更易于扩展

抽象化

    将组件通用模型抽象出来

组件封装总结

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构：插件化、模板化、抽象化

过程抽象

用来处理局部细节控制的方法
函数式编程思想的基础应用
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为**过程抽象**。
使用once

高阶函数

once
throttle截流函数：规定时间内限制次数

debounced：防抖，在一段时间 不动后再保存

consumer：每隔一段时间再调用function

iterative：可迭代

 纯函数vs非纯函数
    纯函数的结果可预期，非纯函数测试难度高
    高阶函数代替非函数使用，更方便
    

编程范式 命令式vs声明式

命令式

声明式

声明式有更强的拓展性，若要加个状态 命令式要更改if/else，声明式则直接加状态

总结

JS基础没学过，要花时间补上 ps：java scipt 犀牛书，javaScript good parts 推荐书