常见的手写代码题集，2024年最新2024Web前端开发社招面试总结+解答分享

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

三栏布局

要求：垂直三栏布局，左右两栏宽度固定，中间自适应

1-left

1-middle

1-right

2-left

2-middle

2-right

3-left

3-right

3-middle

圣杯布局 和 双飞翼布局

和三栏布局要求相同，不过中间列要写在前面保证优先渲染。

圣杯-middle

圣杯-left

圣杯-right

双飞翼布局-middle

双飞翼布局-left

双飞翼布局-right

三角形

实现一个三角形

常见题目，通过 border 实现

正方形

使用 css 实现一个宽高自适应的正方形

扇形

实现一个 1/4 圆、任意弧度的扇形

有多种实现方法，这里选几种简单方法（我看得懂的）实现。

水平垂直居中

实现子元素的水平垂直居中

清除浮动

要求：清除浮动

可以通过 clear:both 或 BFC 实现

弹出框

使用 CSS 写一个弹出框效果

页面内容

弹出框

导航栏

要求：一个 div 内部放很多水平 div ，并可以横向滚动。

item1

item2

item3

item4

item5

item6

item7

item8

item9

CSS 部分完，总结，Flex 无敌。

---

JavaScript 部分

---

手写 bind、call 和 apply

Function.prototype.bind = function(context, …bindArgs) {

// func 为调用 bind 的原函数

const func = this;

context = context || window;

if (typeof func !== ‘function’) {

throw new TypeError(‘Bind must be called on a function’);

}

// bind 返回一个绑定 this 的函数

return function(…callArgs) {

let args = bindArgs.concat(callArgs);

if (this instanceof func) {

// 意味着是通过 new 调用的 而 new 的优先级高于 bind

return new func(…args);

}

return func.call(context, …args);

}

}

// 通过隐式绑定实现

Function.prototype.call = function(context, …args) {

context = context || window;

context.func = this;

if (typeof context.func !== ‘function’) {

throw new TypeError(‘call must be called on a function’);

}

let res = context.func(…args);

delete context.func;

return res;

}

Function.prototype.apply = function(context, args) {

context = context || window;

context.func = this;

if (typeof context.func !== ‘function’) {

throw new TypeError(‘apply must be called on a function’);

}

let res = context.func(…args);

delete context.func;

return res;

}

实现一个继承

// 参考 You Dont Know JavaScript 上卷

// 基类

function Base() {

}

// 派生类

function Derived() {

Base.call(this);

}

// 将派生类的原型的原型链挂在基类的原型上

Object.setPrototypeOf(Derived.prototype, Base.prototype);

实现一个 new

// 手动实现一个 new 关键字的功能的函数 _new(fun, args) --> new fun(args)

function _new(fun, …args) {

if (typeof fun !== ‘function’) {

return new Error(‘参数必须是一个函数’);

}

let obj = Object.create(fun.prototype);

let res = fun.call(obj, …args);

if (res !== null && (typeof res === ‘object’ || typeof res === ‘function’)) {

return res;

}

return obj;

}

实现一个 instanceof

// a instanceof b

function _instanceof(a, b) {

while (a) {

if (a.proto === b.prototype) return true;

a = a.proto;

}

return false;

}

手写 jsonp 的实现

// foo 函数将会被调用 传入后台返回的数据

function foo(data) {

console.log(‘通过jsonp获取后台数据:’, data);

document.getElementById(‘data’).innerHTML = data;

}

/**

• 通过手动创建一个 script 标签发送一个 get 请求

• 并利用浏览器对

*/

(function jsonp() {

let head = document.getElementsByTagName(‘head’)[0]; // 获取head元素 把js放里面

let js = document.createElement(‘script’);

js.src = ‘http://domain:port/testJSONP?a=1&b=2&callback=foo’; // 设置请求地址

head.appendChild(js); // 这一步会发送请求

})();

// 后台代码

// 因为是通过 script 标签调用的 后台返回的相当于一个 js 文件

// 根据前端传入的 callback 的函数名直接调用该函数

// 返回的是 ‘foo(3)’

function testJSONP(callback, a, b) {

return ${callback}(${a + b});

}

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
(fun.prototype);

let res = fun.call(obj, …args);

if (res !== null && (typeof res === ‘object’ || typeof res === ‘function’)) {

return res;

}

return obj;

}

实现一个 instanceof

// a instanceof b

function _instanceof(a, b) {

while (a) {

if (a.proto === b.prototype) return true;

a = a.proto;

}

return false;

}

手写 jsonp 的实现

// foo 函数将会被调用 传入后台返回的数据

function foo(data) {

console.log(‘通过jsonp获取后台数据:’, data);

document.getElementById(‘data’).innerHTML = data;

}

/**

• 通过手动创建一个 script 标签发送一个 get 请求

• 并利用浏览器对

*/

(function jsonp() {

let head = document.getElementsByTagName(‘head’)[0]; // 获取head元素 把js放里面

let js = document.createElement(‘script’);

js.src = ‘http://domain:port/testJSONP?a=1&b=2&callback=foo’; // 设置请求地址

head.appendChild(js); // 这一步会发送请求

})();

// 后台代码

// 因为是通过 script 标签调用的 后台返回的相当于一个 js 文件

// 根据前端传入的 callback 的函数名直接调用该函数

// 返回的是 ‘foo(3)’

function testJSONP(callback, a, b) {

return ${callback}(${a + b});

}

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-j9Qpj2gV-1713585688827)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！