2024年最全2024-10下旬与2024-11 项目中遇到的问题，关于Web前端开发的面试经验总结

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

return http.post(apis.postCodeInfo, params)

}

requestCodeInfo(

{

‘mobile’: this.phone,(X)

step: 1

}

).then((resp) => {

return true

}).catch((err) => {

iakit.alert(‘’, err.message, [

{

text: ‘朕知道了’

}

])

})

项目：《钱隆归来》

时间： 2017年11月

问题：短信发送验证码时应该不可用 应设disabled

项目：《钱隆归来》

时间： 2017年11月

问题： 父组件中给子组件加class名未生效

描述：父组件给子组件传变量要用v-bind 绑定

项目：《钱隆归来》

时间： 2017年11月

问题：请求用户信息时提示“用户信息获取类别格式错误”

描述：接口没有接收参数

// 提现到卡

export function rasiedCardInfo() {

return http.post(apis.rasiedCardInfo, params)

}

应该改为：

// 提现到卡

export function rasiedCardInfo(params) {

return http.post(apis.rasiedCardInfo, params)

}

项目：《钱隆归来》

时间： 2017年11月

问题： 投资类型错误

描述: 请求接口时传递参数错误

项目：《钱隆归来》

时间： 2017年11月

问题： input输入框如果输入了一位小数就返回小数位两个0，如果1个小数就返回小数位1个0，应该要写在mouseout或blur事件上，不能写在keyup事件中，因为你并不知道用户还输不输入

解决办法：

personalRate.mouseout(function() {

this.value = toDecimal2(this.value)

})

项目：《钱隆归来》

时间： 2017年11月

问题： 当用户输入条件不符合规则时失去焦点也返回两位小数

描述： 应该要做判断，当用户输入符合规则时再调用返回两位小数的函数

解决办法：

personalRate.mouseout(function() {

if (this.value > 0 && this.value < 99) {

this.value = toDecimal2(this.value)

}

})

项目：《钱隆归来》官网

时间： 2017年11月

问题： input输入框只能输入0-99之间的数，并且只能有两位小数，使用正则表达式限制用户输入，输入后就清空，体验不好

描述： 此处不应限制用户输入，应该是用户输入不符合规则时提示错误，并且按钮不变色不可用

if (this.value < 0 || this.value > 99999999) {

$(‘#perFormatFalse’).css({ ‘display’: ‘block’ })

$(‘.perMoneyWrapper’).css({ ‘border’: ‘1px solid #ff6867’ })

} else {

let value1 = this.value.toString()

if (value1.indexOf(‘.’) > 0) {

let arr = value1.split(‘.’)

value1 = arr[0] + ‘.’ + arr[1].substring(0, 2)

this.value = value1

}

项目：《钱隆归来》官网

时间： 2017年11月

问题： 在每个计算机模块中，当其中一个输入框满足输入条件时，都要判断其他三个是否满足条件，此处不应该只用是否有输入值"!value"来判断，应该也要判断输入值是否符合输入条件

描述：

if (personalMoney.val() && personalMoney.val() > 0 && personalMoney.val() < 99999999 && personalDate.val() && personalRate.val() && personalDate2.val()) {

personBtn.css({ ‘background’: ‘#ff6867’ })

} else {

personBtn.css({ ‘background’: ‘#ccc’ })

}

项目：《钱隆归来》官网

时间： 2017年11月

问题： 8个输入框在未输入状态、输入时状态和已输入状态的样式都一样，所以不应该在每个输入框的事件中去控制自己的样式

描述： 应该使用函数来定义公共样式，再将要改变状态样式的元素作为参数传给它，实现样式改变

项目：《趣学君官网》

时间： 2017年11月10日

问题： 小图标切出来有白边问题

解决：在图标外边套一层,比如加个span，给span加跟图标一样的背景色，再加border-radius等属性，

.tip-icon {

position: relative;

display: inline-block;

width: 24px;

height: 24px;

border-radius: 50%;

overflow: hidden;

font-size: 0;

background: #3e81f1;

img {

position: absolute;

top: -1px;

left: -1px;

width: 26px;

height: 26px;

}

}

项目：《趣学君官网》

时间： 2017年11月10日

问题：在ie9、10下都不支持display:flex属性，所以也不能使用align-itmes来垂直居中，所以如果要兼容浏览器，尽量不要使用flex属性

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，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-KEA49yl7-1715638271134)]

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