2024年最新Web APIs-Day5，46道面试题带你了解中高级前端面试

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

==============================================================================

2.1 client概述

---

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client

系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

三、元素滚动 scroll 系列

===============================================================================

3.1 scroll概述

---

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

3.2 页面被卷去的头部

---

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

3.3 案例：仿淘宝固定右侧侧边栏

---

1. 原先侧边栏是绝对定位

2. 当页面滚动到一定位置，侧边栏改为固定定位

3. 页面继续滚动，会让 返回顶部显示出来

3.4 案例分析：

---

1. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document

2. 滚动到某个位置，就是判断页面被卷去的上部值。

3. 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset

4. 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset

5. 其实这个值 可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了

代码如下（示例）：

//1. 获取元素

var sliderbar = document.querySelector(‘.slider-bar’);

var banner = document.querySelector(‘.banner’);

// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面

var bannerTop = banner.offsetTop

// 当我们侧边栏固定定位之后应该变化的数值

var sliderbarTop = sliderbar.offsetTop - bannerTop;

// 获取main 主体元素

var main = document.querySelector(‘.main’);

var goBack = document.querySelector(‘.goBack’);

var mainTop = main.offsetTop;

// 2. 页面滚动事件 scroll

document.addEventListener(‘scroll’, function() {

// console.log(11);

// window.pageYOffset 页面被卷去的头部

// console.log(window.pageYOffset);

// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位

if (window.pageYOffset >= bannerTop) {

sliderbar.style.position = ‘fixed’;

sliderbar.style.top = sliderbarTop + ‘px’;

} else {

sliderbar.style.position = ‘absolute’;

sliderbar.style.top = ‘300px’;

}

// 4. 当我们页面滚动到main盒子，就显示 goback模块

if (window.pageYOffset >= mainTop) {

goBack.style.display = ‘block’;

} else {

goBack.style.display = ‘none’;

}

})

3.5 页面被卷去的头部兼容性解决方案

---

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop

2. 未声明 DTD，使用 document.body.scrollTop

3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

代码如下（示例）：

function getScroll() {

return {

left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,

top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

};

}

使用的时候 getScroll().left

四、 三大系列总结

========================================================================

他们主要用法：

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得

五 、mouseenter 和 mouseover的区别

===========================================================================================

• 当鼠标移动到元素上时就会触发mouseenter 事件

• 类似 mouseover，它们两者之间的差别是

• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发

• 之所以这样，就是因为mouseenter不会冒泡

• 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

注：mouseenter和mouseleave不会冒泡，而且只有经过自身的盒子才会触发；

六 动画函数的封装

========================================================================

6.1 动画实现原理

---

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置

2. 让盒子在当前位置加上1个移动距离

3. 利用定时器不断重复这个操作

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，才能使用element.style.left

6.2 动画函数给不同元素记录不同定时器

---

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

代码如下（示例）：

function animate(obj, target) {

// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

// 解决方案就是 让我们元素只有一个定时器执行

// 先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

obj.timer = setInterval(function() {

if (obj.offsetLeft >= target) {

// 停止动画 本质是停止定时器

clearInterval(obj.timer);

}

obj.style.left = obj.offsetLeft + 1 + ‘px’;

}, 30);
}

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：