【前端面试】同学,你会手写代码吗?

（给前端大学加星标，提升前端技能.）

作者:我不吃饼干呀

https://juejin.im/post/5c9edb066fb9a05e267026dc

【前端面试】 手写代码汇总：CSS & JS

如果您发现错误，请一定要告诉我，拯救一个辣鸡（但很帅）的少年就靠您了！

CSS 部分

两栏布局

要求：垂直两栏，左边固定右边自适应。

                        
        
1-left        
1-right    
    
        
2-left        
2-right    
    
        
3-left        
3-right    
    
        
4-left        
4-right    

三栏布局

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

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

路由实现 - history

    
    首页    个人中心页    帮助页  
  
  

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

分享前端好文，点亮 在看