最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
话不多说,直接上链接!,不对不对,是上结论哈哈哈哈
函数节流是指一定时间内函数只执行一次。比如人的眨眼睛,就是一定时间内眨一次。 函数防抖是指频繁触发的情况下,只有足够的空间时间,才执行代码一次。比如坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。
一、JavaScript防抖函数
1、JavaScript防抖函数详解
防抖函数是JavaScript中常用的一种函数优化技术,可以有效减少一些高频率触发的事件所带来的性能问题。本文将详细介绍JavaScript防抖函数的实现原理、应用场景和使用方法。
2、防抖函数的实现原理
防抖函数的实现原理非常简单,就是在一定时间内只执行最后一次触发的事件,忽略之前触发的所有事件。具体实现方法如下:
1、设置一个定时器,当触发事件时,如果定时器存在,则清除定时器。
2、重新设置一个定时器,延迟一定时间后执行事件。
3、如果在延迟时间内再次触发事件,则重复1和2的步骤。
4、如果延迟时间到了,执行事件。
3、防抖函数的应用场景
防抖函数适用于一些高频率触发的事件,比如:
1、输入框实时搜索,避免频繁请求后端接口。
2、浏览器窗口resize事件,避免频繁触发DOM操作。
3、滚动条滚动事件,避免频繁更新DOM。
4、按钮点击事件,避免重复提交表单。
4、手写实现防抖函数
可以通过手写实现防抖函数,代码如下:
//JavaScript防抖核心代码
// fn: 点击按钮要执行的函数
// delay: 延迟时间
<script>
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
</script>
这样用户在频繁点击按钮时,就可以执行延迟操作,防止函数多次调用,完成防抖功能;
手写实现防抖函数注意事项:
(1)、debounce函数不能直接调用fn函数,因为按钮绑定的事件函数是直接调用的,所以使用返回函数,否则函数会立即执行;
(2)、每次点击先清除延时操作,clearTimeout不能清除一个没有定义的变量名,所以需要先定义一个变量timer用来清除和定义延时操作;
(3)、在函数外层定义timer,函数内部方便使用,让这些独立的执行函数有联系;
(4)、调用函数fn,容易忽略this指向,需要将this指向调用者。
5、Lodash库实现防抖函数
Lodash是一个非常流行的JavaScript工具库,它提供了许多方便的函数,包括防抖函数。可以通过Lodash库来实现防抖函数,代码如下:
npm install -save lodash / npm install lodash
import debounce from 'lodash/debounce';
function handleInput(event) {
// 在250ms内只执行最后一次输入
}
const debouncedInput = debounce(handleInput, 250);
input.addEventListener('input', debouncedInput);
6、防抖函数的注意事项
1、防抖函数的延迟时间需要根据实际情况设置,设置过短可能会导致事件被频繁触发,设置过长可能会影响用户体验。
2、防抖函数返回的是一个新函数,所以需要将其赋值给原来的函数。
3、防抖函数的this指向需要明确,可以使用箭头函数或者bind方法来解决。
二、JavaScript节流函数
1、什么是JavaScript节流函数
JavaScript节流函数是一种优化技术,它可以限制函数的执行频率,从而避免在短时间内重复执行同一个函数。节流函数通常用于优化用户输入的响应、滚动事件、窗口调整等操作。当用户频繁地触发这些事件时,节流函数可以将这些事件的处理推迟到一段时间后再执行,从而避免过度的计算和渲染,提高网页的性能和用户体验。
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】