Web前端最新JS细节知识点（请求头，rem，事件对象，自定义全局变量），web前端面试视频

最后

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

bIsAndroid ||

bIsCE ||

bIsWM

) {

console.log(“移动端”);

} else {

console.log(“pc端”);

}

}

browserRedirect();

使用场景（目前能想到的）

• 很多网页是有分手机端和 pc 端的，可能是两套代码，放在两个不同的服务器或是域名不同，所以我们就可以根据这个，在最先进入的时候先判断环境，再进入指定环境下的网页

• JS 有个别特性是分浏览器或者手机环境的，根据这个我们可以判断用户使用安卓还是 ios 设备，做指定的处理

rem 布局

---

移动端因为手机的尺寸不同，分辨率也不同，所以单单使用 px 来作为单位处理就会有很多问题，而使用 rem 计算来设置的单位就可以满足在不同尺寸的手机屏幕上显示效果基本是一致的

(function (win, doc) {

if (!win.addEventListener) return;

var html = document.documentElement;

function setFont() {

var cliWidth = html.clientWidth;

html.style.fontSize = 100 * (cliWidth / 750) + “px”;

}

win.addEventListener(“resize”, setFont, false); // false 默认就是false 代表冒泡

setFont();

})(window, document);

// 这样设置之后单位就可以统一使用rem，因为手机如iphone为例宽度一般是375px 因为代码里是/750 所以我们在计算的时候，举例：

// 原型图上宽度为100px 所以转换成rem是 100*2/100 = 2rem

// 原型图上字体大小为16px的时候 转成rem是 16*2/100 = 0.32rem

总结

• 移动端的布局是基本一定要使用 rem 布局的

• 如果是框架开发，如 vue 的话，我们其实可以不用自己写这个立即执行函数，有一些库是可以帮我们封装好的，只需要在 webpack 文件中配置一下

事件参数 event 与使用细节

---

事件参数 event，或者 e，e 是 c#上是使用 e，代表的也就是事件触发的时候产生的句柄

let btn = document.getElementById(‘app’)

btn.onClick = (e)=>{

// 当btn按钮被点击的时候 , 会给函数默认传递一个形参e,是可以直接接收使用的

}

btn.addEventListener(‘click’,(e)=>{

// 当按钮被点击的时候,这种事监听函数也会默认传递一个句柄 e

})

// 第三种方式

function handle(e){

console.log(e) // e不是我们的事件对象 因为这个是通过html绑定函数添加的事件,html中没有给实参,所以函数中也就接收不到形参

console.log(event) // 成功! 可以收到事件对象,就算没有传递,在事件处理函数的内部也是可以正常的接受到这个句柄

}

总结

• 事件对象 event 就算形参没有写实参没有传,在函数内部也是可以直接访问这个对象

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-wWqOP4Da-1715908629453)]

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