Skip to content

Boomer2016/FE-theory

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FE-theory

前端原理解释,手写经典问题实现

防抖

防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

适用场景: 1.按钮提交场景:防止多次提交按钮,只执行最后提交的一次 2.服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似

节流

防抖函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

适用场景: 1.拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动 2.缩放场景:监控浏览器resize 3.动画场景:避免短时间内多次触发动画引起性能问题

深克隆

浅克隆之所以被称为浅克隆,是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存. const newObj = JSON.parse(JSON.stringify(oldObj));

1.他无法实现对函数 、RegExp等特殊对象的克隆 2.会抛弃对象的constructor,所有的构造函数会指向Object 3.对象有循环引用,会报错

实现一个Event

监听与触发 触发监听函数我们可以用apply与call两种方法,在少数参数时call的性能更好,多个参数时apply性能更好,当年Node的Event模块就在三个参数以下用call否则用apply. 我们的addListener实现方法还不够健全,在绑定第一个监听者之后,我们就无法对后续监听者进行绑定了,因此我们需要将后续监听者与第一个监听者函数放到一个数组里.

实现call

假如对象在被 call 调用前,已经有 fn 属性怎么办?

ES6 中提供了一种新的基本数据类型,Symbol,表示独一无二的值,另外,Symbol 作为属性的时候,不能使用点运算符。所以再加上 ES 的 rest 剩余参数替代 arguments 遍历的工作

实现apply

apply 和 call 的实现原理,基本类似,区别在于 apply 的参数是以数组的形式传入。

About

前端原理解释,手写经典问题实现

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published