JavaScript | 青训营笔记

47 阅读2分钟

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

一、JavaScript 好代码的标准

  • 前端三件套各司其职、职能分离
  • UI组件具备正确性和复用性
  • 应用函数式编程的思想

各司其职

image.png

组件封装

组件是指从页面上抽出来的一个个包含HTML、JS、CSS的单元。

e.g.:用原生js写轮播图

- 结构(HTML)

使用无序列表ul实现

image.png

- 表现(CSS)

使用CSS绝对定位将图片重叠在同一个位置

轮播图切换的状态采用修饰符

轮播图的切换动画使用CSS transition

image.png

- 行为(JS)

定义一个Slide的类,里面定义各种API

image.png

定义控制流,即控制轮播图的下面四个小圆圈和往左往右的控制

过程抽象

类似于多个get请求只会响应第一个,然后就需要只让get请求一次不要请求多次(即操作次数的限制)

调用这个once函数时会传入fn参数,然后把fn设置为了null则下一次如果还会调用的话就没有参数传入则无法调用,就达到了调用一次的目的

image.png

高阶函数

image.png

常用的高阶函数: image.png

Throttle节流函数:可以应用在scoll中,因为下拉之类的需要加载,这时候性能开销较大,定义这个函数每五百毫秒执行一次,一开始是没有timer的即为空,然后就会返回函数并进入判断(如果没超过五百毫秒timer是不为空的就不能重新调用函数,超过了才能把timer重新定义为空重新调用函数。应用距离:在一定时间内点击按钮是没用的疯狂点击也没用(节省开销)

image.png

debouch防抖函数:比如编辑器的编辑自动保存,不需要点击保存按钮就可以自动保存。当然我们希望实现的是编辑完之后再保存而不是一直编辑一直保存这样内存开销非常大,可以采用编辑后一定时间不动了再保存

image.png

Consumer函数:增加不是一下子加的而是缓慢的加,例如游戏里疯狂点击血量五十次它不是直接加到五十而是加一加一延时增加

interative可迭代函数:实现批量操作例如把列表里的奇数行变成红色之类的。该函数返回的也是函数,参数subject是列表,然后就会把列表里的每一个元素作为fn调用iterative多次,否则只调用一次。

image.png