前端资料汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
业务单据页面大约几百个,项目里面的按钮几千个,项目里面的按钮由于场景复杂,分别用了如下几种写法:
- dx-button
- div
- dx-icon
- input type=button
- svg
由于面临交付,领导希望越快越好,最好一两天之内解决问题
还好我们领导没有说这问题当天就要解决 😁
解决方案
1. 添加防抖函数
按钮点击添加防抖函数,设置合理的时间
function debounce(func, wait) {
let timeout;
return function () {
if(timeout) clearTimeout(timeout);
timeout = setTimeout(func, wait)
}
}
优点
封装一个公共函数,往每个按钮的点击事件里加就行了
缺点
这种情况有个问题就是在业务复杂的场景下,时间设置会比较棘手,如果时间设置短了,接口请求慢,用户多次点击还会出现问题,如果时间设置长了,体验变差了
2. 设置按钮禁用
设置按钮的 disabled
相关属性,按钮点击后设置禁用效果,业务代码执行结束后取消禁用
this.disabled = true
this.disabled = false
优点
原生按钮和使用的UI库的按钮设置简单
缺点
div
, icon
, svg
这种自定义的按钮的需要单独处理效果,比较麻烦
3. 请求拦截器中添加loading
在请求拦截器中根据请求类型显示 loading
,请求结束后隐藏
优点
直接在一个地方设置就行了,不用去业务代码里一个个加
缺点
由于我们的技术栈使用的 angular8
内置的请求,无法实现类似 axios
拦截器那种效果,还有就是项目中的接口涉及多个部门的接口,不同部门的规范命名不一样,没有统一的标准,在实际的业务场景中,一个按钮的行为可能触发了多个请求,因此这个方案不适合当前的项目
4. 添加 loading
组件(项目中使用此方案)
新增一个 loading
组件,绑定到全局变量中,按钮点击触发显示 loading
,业务执行结束后隐藏。
loading
组件核心代码
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoadingService {
private isLoading$ = new BehaviorSubject<boolean>(false);
private message$ = new BehaviorSubject<string>('正在加载中...');
constructor() {}
show(): void {
this.isLoading$.next(true);
}
hide(): void {
this.isLoading$.next(false);
}
}
主要是 show()
和 hide()
函数,将 loading
组件绑定到 app.components.ts
中,绑定组件到window
对象上,
window['loading'] = this.loadingService
在按钮点击时触发 show()
函数,业务代码执行结束后触发 hide()
函数
window['loading'].show();
window['loading'].hide();
### 最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
* **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/64ce8432d0f753e43f93972ad19fcd72.png)
![](https://img-blog.csdnimg.cn/img_convert/d508b1ae6a5e7d5e7d5daf668e9eccea.png)