这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

一、写好js一些原则

1 各司其职 -让html/css/js职能分离

例子：深色、浅色模式。写两组css样式？点击事件改变css？

1、版本一：

点击事件：{
改变css样式。
}

有什么需要改进？

2、版本二

js直接改变className。

写好两组css样式，黑夜模式增加className，白天取消className

3、版本三

纯css版本，css高级功能。-伪类选择器-兄弟节点

1.CheckBox的check状态

2.html中label的属性for="checkbox的id"，label中放置图案-改变模式。点击该图案就和点击checkbox一样效果。

3.checkbox的选框隐藏。

4.当状态为checked，设置兄弟节点的内容.content改变样式

ps：

1. 避免不必要由js直接操作样式。

2. 可以用class表示状态。

3. 纯展示类交互寻求零js方案。-不强求

2 组件封装-好的ui组件：正确性、扩展性、复用性

1、轮播图-无序列表结构实现

1.利用css绝对定位使得图片重叠-利用修饰符切换状态、过渡动画改变轮播图片

2.js：行为-得到当前选中元素、得到当前元素选中下标、轮播到某个特定元素、轮播下一张图、轮播上一张图

1. 取得div内部item也就是ul，取得当前item的下标。
2. 获得当前item函数
3. 获得当前item处于的下标位置
4. 选中的元素进行样式改变-切换class
5. 轮播下一个元素：下标+1同时对list总数求余
6. 上一张图片：下标-1同时对list总数求余

3.控制流：添加控制的控件状态

1 状态绑定过程-不会让图片和组件耦合在一起
2 小圆点绑定了监听事件-mousehover、moseout，hover时候停止自动播放，监听slide事件-得到当前位置下标、改变小红点状态、停止自动轮播。
3 slideTo增加自定义事件，把事件开发出去、就可以在controller监听事件？
4 其他图片增添start和stop-ClearInterval事件？

总结方法

结构设计
展现效果 css
行为设计 api功能控制流-event

改进空间？

2、三次重构

改进一插件化

这个组件不够灵活-如果不想要左右控件、需要把css html js 代码改变。所以可以抽象出js插件化。

1 注册插件形式、达成好的扩展性
2 控制元素抽取成插件
3 插件与组件之间通过依赖注入方式建立联系
4 构造函数要简单

改进二-模版化

html模块化

render方法-渲染内容
action方法-初始化

改进三-抽象化-组件框架

具体组件-注册插件，渲染render

改进空间 css组件化？组件和控件组合

3 过程抽象

应用函数式编程思想。让代码更通用
控制局部细节控制的一些方法
函数式编程思想的基础应用-关注输入输出上。-纯函数

例子

代办点击完成该项消失。
连续点击 多次调用一个事件。过程封装成一个once函数。

二、高阶函数HOF

纯函数：无影响+有预期，不需要初始化和销毁。 函数作为参数、或者返回值。
两者都符合的高阶函数称为函数装饰器

1 常用HOF

once

throttle节流

mousemove..

比如每100s触发一次限制频率。这里利用了状态参数
一定时间间隔。保存功能-反复调用同一个方法，导致一直调用clear方法，键盘停止时。/小鸟跟随鼠标 Q：是因为一直反复调用到cleartimeout，无法进入下一条语句因此小鸟没有飞行？

Debounce

异步时间
延时调用//连续点击+1+1，每200毫秒显示

interative-对多个元素作用

例如列表-循环调用列表中每个元素的函数。

编程范式js都有

命令式-过程、对象-具体强调怎么做，将过程写出来
声明式-逻辑式、函数式-做什么-更加简洁，利用已有的方法？
声明式中适合多个状态改变、具有更多的扩展性

三、leftpad事件-补齐字符串

渲染时时间敏感-笨办法，既定的数量多个判断

代码关注：风格、效率、约定、使用场景、设计
repeat是logn时间复杂度--大字符串更有意义 -性能几乎可以忽略不计，从可读性考虑更好

四、实例-交通灯状态

版本一数据抽象

状态列表：提前设置好状态、等待时间

版本二过程抽象

通用轮询方法
设置状态函数，参数：状态、等待时间

版本三异步+函数式

设置状态 等待若干时间 以上操作反复

实例-判断是否4的幂

四种方法

1. 求膜
2. 二进制判断，最后是1，并且偶数个0
3. o（1）复杂度，大于1，只有一个1，偶数个0
4. 利用正则表达式

实例-洗牌算法

错误写法

sort的random，每个位置出现概率不相等

正确：经典o（n）算法

从前k-1张牌抽一张换到最后
从前k-2张抽一个换最后
如此反复到1
p=（k-1）/k* 1/(k-1)=1/k
每一个概率都是一样的

抽奖

使用生成器

不同之前是所有代码跑了，交换n次。整个牌返回
现在只需要取一张牌，不用for循环-不用全部取完。取出

分红包算法

100块钱红包分给10个人-不能完全随机

至少一分钱，0.1切10份，一个人0.01

切西瓜法-每次都砍大的所以相对均匀、不够刺激

切一半，再切大的那一块，每一次都切大的那一块。
先随机分成两部分，再取大的分成两份，一直这样。用的Math.max取数组最大的那份-时间复杂度o(n) 每次只切大的，然后把切出来的和剩余的塞回去 tip：一开始只有1

抽牌法-时间复杂度o（n），空间复杂度会比较高

1. 看成数列0-999,用生成器去取到count-1个（切几刀）
2. 随机插入一个几个分隔符
3. 第一个位置是0，最后一个位置是amount

随机插入用洗牌算法，随机抽出9个值排个序，作为红包分隔符。

理解JS ｜ 青训营笔记