前端面试大厂手写源码系列（上）
50 浏览量
2021-01-08
13:57:07
上传
评论
收藏 462KB PDF 举报
前端面试大厂手写源码系列（上）前端面试大厂手写源码系列（上）
如今前端攻城狮的要求越来越高，会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理，以此来证明你对该知识点
的理解程度。接下来，我将列举我面试时以及自认为比较重要的CSS部分、JS部分常见手写原理题！后续分享Vue全家桶、React全家桶手写原理图，敬请期待！
JS部分部分
手写原生手写原生Ajax
平时项目开发中，一定会用到ajax请求后端接口获取数据在前端渲染效果。目前市面上有很多封装好的ajax请求库，例如：jQuery版的ajax、基于Promise的Axios请求库、Flyio等
等。目前很多人都只会使用这些API，但是如今面试经常会被问到：你了解ajax原理吗？你知道原生ajax实现步骤吗？…接下来，我将封装一个完整的原生ajax。
一个完整的 ajax 请求一般包括以下步骤：
实例化 XMLHttpRequest 对象
连接服务器
发送请求
介绍
function ajax(options) {
let method = options.method || 'GET', // 不传则默认为GET请求
params = options.params, // GET请求携带的参数
data = options.data, // POST请求传递的参数
url = options.url + (params ? '?' + Object.keys(params).map(key => key + '=' + params[key]).join('&') : ''),
async = options.async === false ? false : true,
success = options.success,
headers = options.headers;
let xhr;
// 创建xhr对象
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
success && success(xhr.responseText);
}
}
xhr.open(method, url, async);
if(headers) {
Object.keys(Headers).forEach(key => xhr.setRequestHeader(key, headers[key]))
}
method === 'GET' ? xhr.send() : xhr.send(data)
}
注意注意：IE5、6不兼容XMLHttpRequest，所以要使用ActiveXObject()对象，并传入 ‘Microsoft.XMLHTTP’，达到兼容目的。
readyState的五种状态详解：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
手写防抖和节流手写防抖和节流
如今前端界面效果越来越复杂，有一些频繁操作会导致页面性能和用户体验度低。像：输入框搜索会频繁调端口接口、放大缩小窗口等。
防抖 – debounce 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
剩余12页未读，继续阅读
评论0