前端面试中常见的手写代码集合

前端达人

共 12619字,需浏览 26分钟

 ·

2021-02-12 13:04

来源 | 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 实现

  三角形    

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

4、扇形
实现一个 1/4 圆、任意弧度的扇形
有多种实现方法,这里选几种简单方法(我看得懂的)实现。
                Document        

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

6、清除浮动
要求:清除浮动
可以通过 clear:both 或 BFC 实现
  清除浮动    

7、弹出框
使用 CSS 写一个弹出框效果
                Document        

页面内容

弹出框

8、导航栏
要求:一个 p 内部放很多水平 p ,并可以横向滚动。
                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 的优先级高于 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;}

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 请求 * 并利用浏览器对 

13、路由实现 - history

  history 路由  
首页 个人中心页 帮助页

html>

还有一些稍复杂的可以写,有时间再补。


本文完〜



浏览 18
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报