前端面试中常见的手写代码集合
来源 | https://juejin.im/post/5c9edb066fb9a05e267026dc
作者 | 我不吃饼干呀
CSS 部分
1、两栏布局
要求：垂直两栏，左边固定右边自适应。
Document 1-left
1-right
2-left
2-right
3-left
3-right
4-left
4-right
2、三栏布局
要求：垂直三栏布局，左右两栏宽度固定，中间自适应
Document 1-left
1-middle
1-right
2-left
2-middle
2-right
3-left
3-right
3-middle
3、圣杯布局 和 双飞翼布局
和三栏布局要求相同，不过中间列要写在前面保证优先渲染。
Document 圣杯-middle
圣杯-left
圣杯-right
双飞翼布局-middle
双飞翼布局-left
双飞翼布局-right
3、三角形
实现一个三角形
常见题目，通过 border 实现
三角形
Document
水平垂直居中
清除浮动
Document 页面内容弹出框
Document item1
item2
item3
item4
item5
item6
item7
item8
item9
CSS 部分完，总结，Flex 无敌。
JavaScript 部分
1、手写 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 的优先级高于 bindreturn 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;}
2、实现一个继承
// 参考 You Dont Know JavaScript 上卷// 基类function Base() {}// 派生类function Derived() {Base.call(this);}// 将派生类的原型的原型链挂在基类的原型上Object.setPrototypeOf(Derived.prototype, Base.prototype);
3、实现一个 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;}
4、实现一个 instanceof
// a instanceof bfunction _instanceof(a, b) {while (a) {if (a.__proto__ === b.prototype) return true;a = a.__proto__;}return false;}
5、手写 jsonp 的实现
// foo 函数将会被调用 传入后台返回的数据function foo(data) {console.log('通过jsonp获取后台数据:', data);document.getElementById('data').innerHTML = data;}/*** 通过手动创建一个 script 标签发送一个 get 请求* 并利用浏览器对