【前端面試】同學(xué),你會(huì)手寫代碼嗎?

（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者:我不吃餅干呀

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

如果您發(fā)現(xiàn)錯(cuò)誤，請(qǐng)一定要告訴我，拯救一個(gè)辣雞（但很帥）的少年就靠您了！

CSS 部分

兩欄布局

要求：垂直兩欄，左邊固定右邊自適應(yīng)。

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

三欄布局

要求：垂直三欄布局，左右兩欄寬度固定，中間自適應(yīng)

                        
        
1-left        
1-middle        
1-right    
    
        
2-left        
2-middle        
2-right    
    
        
3-left        
3-right        
3-middle    

圣杯布局 和 雙飛翼布局

和三欄布局要求相同，不過中間列要寫在前面保證優(yōu)先渲染。

                            
        
圣杯-middle        
圣杯-left        
圣杯-right    
        
        
            
雙飛翼布局-middle        
        
雙飛翼布局-left        
雙飛翼布局-right    

三角形

實(shí)現(xiàn)一個(gè)三角形

常見題目，通過 border 實(shí)現(xiàn)

正方形

使用 css 實(shí)現(xiàn)一個(gè)寬高自適應(yīng)的正方形

扇形

實(shí)現(xiàn)一個(gè) 1/4 圓、任意弧度的扇形

有多種實(shí)現(xiàn)方法，這里選幾種簡(jiǎn)單方法（我看得懂的）實(shí)現(xiàn)。

水平垂直居中

實(shí)現(xiàn)子元素的水平垂直居中

清除浮動(dòng)

要求：清除浮動(dòng)

可以通過 clear:both 或 BFC 實(shí)現(xiàn)

彈出框

使用 CSS 寫一個(gè)彈出框效果

                        
        頁(yè)面內(nèi)容    
    
        
            彈出框        
    

導(dǎo)航欄

要求：一個(gè) div 內(nèi)部放很多水平 div ，并可以橫向滾動(dòng)。

                        
        
item1        
item2        
item3        
item4        
item5        
item6        
item7        
item8        
item9    

CSS 部分完，總結(jié)，F(xiàn)lex 無(wú)敵。

JavaScript 部分

手寫 bind、call 和 apply

Function.prototype.bind = function(context, ...bindArgs) {  // func 為調(diào)用 bind 的原函數(shù)  const func = this;  context = context || window;
  if (typeof func !== 'function') {    throw new TypeError('Bind must be called on a function');  }  // bind 返回一個(gè)綁定 this 的函數(shù)  return function(...callArgs) {    let args = bindArgs.concat(callArgs);    if (this instanceof func) {      // 意味著是通過 new 調(diào)用的 而 new 的優(yōu)先級(jí)高于 bind      return new func(...args);    }    return func.call(context, ...args);  }}
// 通過隱式綁定實(shí)現(xiàn)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;}

實(shí)現(xiàn)一個(gè)繼承

// 參考 You Dont Know JavaScript 上卷// 基類function Base() {}// 派生類function Derived() {    Base.call(this);}// 將派生類的原型的原型鏈掛在基類的原型上Object.setPrototypeOf(Derived.prototype, Base.prototype);

實(shí)現(xiàn)一個(gè) new

// 手動(dòng)實(shí)現(xiàn)一個(gè) new 關(guān)鍵字的功能的函數(shù) _new(fun, args) --> new fun(args)function _new(fun, ...args) {    if (typeof fun !== 'function') {        return new Error('參數(shù)必須是一個(gè)函數(shù)');    }    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;}

實(shí)現(xiàn)一個(gè) instanceof

// a instanceof bfunction _instanceof(a, b) {    while (a) {        if (a.__proto__ === b.prototype) return true;        a = a.__proto__;    }    return false;}

手寫 jsonp 的實(shí)現(xiàn)

// foo 函數(shù)將會(huì)被調(diào)用 傳入后臺(tái)返回的數(shù)據(jù)function foo(data) {    console.log('通過jsonp獲取后臺(tái)數(shù)據(jù):', data);    document.getElementById('data').innerHTML = data;}/** * 通過手動(dòng)創(chuàng)建一個(gè) script 標(biāo)簽發(fā)送一個(gè) get 請(qǐng)求 * 并利用瀏覽器對(duì) 

路由實(shí)現(xiàn) - history

    
    首頁(yè)    個(gè)人中心頁(yè)    幫助頁(yè)  
  
  

還有一些稍復(fù)雜的可以寫，有時(shí)間再補(bǔ)。

分享前端好文，點(diǎn)亮?在看?