2016十家公司前端面試小記
前言
春節(jié)前離職了，年后來了有一周了，把簡歷丟到網(wǎng)上后大概收到了將近七十多個(gè)面試邀請(qǐng)，挑了幾個(gè)稍微知名一些的公司如國美京東美團(tuán)百度彩票等和一些中 小型公司去面試，這星期一共面了11家公司，除了阿里似乎沒戲了其他的十家基本都發(fā)了口頭或是正式offer，也不打算再面了，社保斷了也是個(gè)麻煩事，打 算從這其中挑一個(gè)就可以了。
面試過程中有做面試題的，也有直接聊的，實(shí)話講有些面試題其實(shí)就是背書，隨便一百度就能出答案的東西其實(shí)不太適合用于面試題中。例如某某css屬性 的用法，js某函數(shù)的作用等等。個(gè)人傾向于將實(shí)際工作中可能會(huì)遇到的問題的場(chǎng)景，以及各種技術(shù)的坑作為面試題，這樣一則可以看出他的經(jīng)驗(yàn)多少，二則也可以 防止他做筆試題的時(shí)候手機(jī)搜索結(jié)果。
不過總體來講基本上每家問的問題也差不多，可能不同業(yè)務(wù)的公司問的問題的側(cè)重點(diǎn)不太一樣，有點(diǎn)側(cè)重于移動(dòng)端適配css布局瀏覽器兼容IE hack，而有的側(cè)重于JS邏輯面向?qū)ο?span id="k6zqhab033oa" class="wp_keywordlink">設(shè)計(jì)模式考察等，如果你有三到五年左右的開發(fā)經(jīng)驗(yàn)這些問題基本也都遇見過，就算是做個(gè)總結(jié)吧。
手寫事件模型及事件代理/委托
這個(gè)算是被問到的最多次數(shù)的問題了，首先要求描述下js里面的【事件的三個(gè)階段】，如果沒聽說過三個(gè)階段，那基本上就沒戲了。分別是捕獲，目標(biāo)，冒 泡階段，低版本IE不支持捕獲階段。然后可能問到IE和W3C不同綁定事件解綁事件的方法有什么區(qū)別，參數(shù)分別是什么，以及事件對(duì)象e有什么區(qū)別等等。
如果上述都沒問題，接下來可能會(huì)問【事件的代理/委托】的原理以及優(yōu)缺點(diǎn)，這是靠事件的冒泡機(jī)制來實(shí)現(xiàn)的，優(yōu)點(diǎn)是
1、可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)，比如在table上代理所有td的click事件就非常棒
2、可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無需再次對(duì)其綁定事件，對(duì)于動(dòng)態(tài)內(nèi)容部分尤為合適
事件代理的應(yīng)用常用應(yīng)該僅限于上述需求下，如果把所有事件都用代理就可能會(huì)出現(xiàn)事件誤判，即本不應(yīng)用觸發(fā)事件的被綁上了事件，事實(shí)上我見過有人把頁面里的所有事件都綁定到document用委托的，這是極其不明智的做法。
所謂勁酒雖好，可不要貪杯哦~
之后對(duì)方可能要求你手寫原生js【實(shí)現(xiàn)事件代理】，并要求兼容瀏覽器，其實(shí)就是考核對(duì)事件對(duì)象e的了解程度，以及在IE下對(duì)應(yīng)的屬性名。其實(shí)此時(shí)如果你說就是用target，currentTarget，以及IE下的srcElement和this，基本就可以略過了。
如果上述都o(jì)k的話，那么極有可能要求讓你【實(shí)現(xiàn)事件模型】，即寫一個(gè)類或是一個(gè)模塊，有兩個(gè)函數(shù)，一個(gè)bind一個(gè)trigger，分別實(shí)現(xiàn)綁定 事件和觸發(fā)事件，核心需求就是可以對(duì)某一個(gè)事件名稱綁定多個(gè)事件響應(yīng)函數(shù)，然后觸發(fā)這個(gè)事件名稱時(shí)，依次按綁定順序觸發(fā)相應(yīng)的響應(yīng)函數(shù)。
這個(gè)需求如果對(duì)于做過C#的人來講就再熟悉不過，他根本就是C#中的【委托】（delegate）。而委托與事件幾乎是一家子?；氐角懊嬲f的題目， 大致實(shí)現(xiàn)思路就是創(chuàng)建一個(gè)類或是匿名函數(shù)，在bind和trigger函數(shù)外層作用域創(chuàng)建一個(gè)字典對(duì)象，用于存儲(chǔ)注冊(cè)的事件及響應(yīng)函數(shù)列表，bind時(shí)， 如果字典沒有則創(chuàng)建一個(gè)，key是事件名稱，value是數(shù)組，里面放著當(dāng)前注冊(cè)的響應(yīng)函數(shù)，如果字段中有，那么就直接push到數(shù)組即可。 trigger時(shí)調(diào)出來依次觸發(fā)事件響應(yīng)函數(shù)即可。
不過還有很多細(xì)節(jié)，比如觸發(fā)響應(yīng)函數(shù)時(shí)的上下文應(yīng)該是什么，觸發(fā)響應(yīng)函數(shù)的參數(shù)列表應(yīng)該是什么，如果要求把調(diào)用trigger的參數(shù)列表都傳到響應(yīng)函數(shù)中還要考慮到吧arguments對(duì)象轉(zhuǎn)化為純數(shù)組才行等等。
還有一些面試官會(huì)問到事件如何派發(fā)也就是事件廣播（dispatchEvent）等等，這里不再展開。
有關(guān)事件的考核點(diǎn)大概也就這么多了
前端性能優(yōu)化
這個(gè)簡直老生常談，不管是園子里還是園子外，關(guān)于前端優(yōu)化的東西太多太多了，不同角度不同方向也有很多，網(wǎng)絡(luò)性能優(yōu)化，加快訪問速度，瀏覽器并行加 載數(shù)量，怎樣實(shí)現(xiàn)原生JS異步載入，CDN加速的原理，如何將不同靜態(tài)資源發(fā)布到多個(gè)域名服務(wù)器上，發(fā)布后這些靜態(tài)字段的url路徑改怎么批量改寫，用什 么工具進(jìn)行項(xiàng)目打包，css打包后的相對(duì)路徑怎么轉(zhuǎn)換為絕對(duì)路徑，用什么工具進(jìn)行項(xiàng)目模塊依賴管理，怎么進(jìn)行cookie優(yōu)化等等，
這個(gè)說起來就很多了，盡可能的按照自己做過的優(yōu)化來講，否則面試官隨便挑一項(xiàng)深究都可能會(huì)卡殼，與其這樣還不如不講
閉包原理及應(yīng)用
這個(gè)問題的經(jīng)典性，幾乎所有面試官都會(huì)問到這個(gè)問題，什么情況下會(huì)發(fā)生閉包，為什么需要閉包，什么場(chǎng)景下需要，閉包閉了誰，怎么釋放被閉包的變量內(nèi)存，閉包的優(yōu)點(diǎn)是什么，缺點(diǎn)是什么等等。
關(guān)于閉包，有的是上述提問，有的是直接做閉包面試題。關(guān)于概念網(wǎng)上一搜一大把，關(guān)于閉包面試題，可以參考我之前寫過的一篇文章：大部分人都會(huì)做錯(cuò)的經(jīng)典JS閉包面試題
不夸張的講，如果這篇文章完全弄懂了，基本上沒有可以難住的閉包的題目了。
手寫Function.bind函數(shù)
首先會(huì)要求解釋下這個(gè)函數(shù)的作用，以及在什么場(chǎng)景下需要用到它，最后手寫一個(gè)Function.bind函數(shù)。
只要掌握核心幾點(diǎn)就沒問題：
1、Function.bind返回的也是一個(gè)函數(shù)，所以注定發(fā)生了閉包，
2、在返回的這個(gè)函數(shù)中去調(diào)用一個(gè)其他的函數(shù)，這其實(shí)本質(zhì)上就是函數(shù)鉤子(HOOK)
關(guān)于在JS里的函數(shù)鉤子，我認(rèn)為只需要維護(hù)以下三點(diǎn)即可：
1、保持函數(shù)的this指向
2、保持函數(shù)的所有參數(shù)都傳遞到目標(biāo)函數(shù)
3、保持函數(shù)的返回值
有了以上這幾點(diǎn)，這個(gè)函數(shù)就非常好寫了，下面是MSDN上的標(biāo)準(zhǔn)Polyfill：
- if (!Function.prototype.bind) {
- Function.prototype.bind = function (oThis) {
- if (typeof this !== "function") {
- // closest thing possible to the ECMAScript 5
- // internal IsCallable function
- throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
- }
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function () {},
- fBound = function () {
- return fToBind.apply(this instanceof fNOP
- ? this
- : oThis || this,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
- return fBound;
- };
- }
手寫數(shù)組快速排序/去重
不管是排序也好，還是去重也罷，都是計(jì)算機(jī)基礎(chǔ)知識(shí)了，雖然快排寫出來了，去重也用多種方式實(shí)現(xiàn)了，但是算法是我的弱項(xiàng)，這里就不展開了。不過對(duì)于準(zhǔn)備面試的童鞋來講，準(zhǔn)備下常用算法還是比較重要的，大部分公司還是比較看重此類基礎(chǔ)知識(shí)的。
JS的定義提升
利用js的特性定義提升這個(gè)知識(shí)點(diǎn)衍生出來的面試題相當(dāng)之多，諸如以下等等
- (function(a){
- console.log(a);
- var a=10;
- function a(){};
- }(100))
這算是我做過的定義提升里面的最簡單的題目了,建議可以看下我的上一篇文章:一道常被人輕視的前端JS面試題
基本上能做對(duì)那篇文章中所說的題目的話，此類面試題基本平趟無懸念
跨域
關(guān)于跨域大概可以分iframe的跨域，和純粹的跨全域請(qǐng)求。
關(guān)于跨域的可以去看園子里的這幾篇文章:
其實(shí)正統(tǒng)的跨全域的解決方法大致也就，JSONP,Access Control和服務(wù)器代理這么三種
JSONP原理
只要你聊到跨域，就必須聊到JSONP，那么就必須要講一下JSONP的實(shí)現(xiàn)原理，以及你在項(xiàng)目中那個(gè)需求使用了JSONP，這里簡單講就是HTML里面所有帶src屬性的標(biāo)簽都可以跨域，如iframe，img，script等。
所以可以把需要跨域的請(qǐng)求改成用script腳本加載即可，服務(wù)器返回執(zhí)行字符串，但是這個(gè)字符串是在window全局作用域下執(zhí)行的，你需要把他 返回到你的代碼的作用域內(nèi)，這里就需要臨時(shí)創(chuàng)建一個(gè)全局的回調(diào)函數(shù)，并把到傳到后臺(tái)，最后再整合實(shí)際要請(qǐng)求的數(shù)組，返回給前端，讓瀏覽器直接調(diào)用，用回調(diào) 的形式回到你的原代碼流程中。
基本講到這也就沒什么要再講的了。
將url的查詢參數(shù)解析成字典對(duì)象
這個(gè)題目不約而同的出現(xiàn)在了多家公司的面試題中，當(dāng)然也是因?yàn)樘^于典型，解決方案無非就是拆字符或者用正則匹配來解決，我個(gè)人強(qiáng)烈建議用正則匹 配，因?yàn)閡rl允許用戶隨意輸入，如果用拆字符的方式，有任何一處沒有考慮到容錯(cuò)，就會(huì)導(dǎo)致整個(gè)js都報(bào)錯(cuò)。而正則就沒有這個(gè)問題，他只匹配出正確的配 對(duì)，非法的全部過濾掉，簡單，方便。
實(shí)現(xiàn)代碼：
- function getQueryObject(url) {
- url = url == null ? window.location.href : url;
- var search = url.substring(url.lastIndexOf("?") + 1);
- var obj = {};
- var reg = /([^?&=]+)=([^?&=]*)/g;
- search.replace(reg, function (rs, $1, $2) {
- var name = decodeURIComponent($1);
- var val = decodeURIComponent($2);
- val = String(val);
- obj[name] = val;
- return rs;
- });
- return obj;
- }
函數(shù)節(jié)流
對(duì)于常見的場(chǎng)景，如網(wǎng)頁滾動(dòng)時(shí)，經(jīng)常會(huì)有滾動(dòng)到哪時(shí)做什么樣的動(dòng)畫效果，遂要注冊(cè)onscroll事件，如何減少觸發(fā)次數(shù)，到達(dá)優(yōu)化性能，同時(shí)又滿足效果要求不卡頓，一個(gè)是優(yōu)化事件內(nèi)代碼，減少代碼量，二就是做函數(shù)節(jié)流。
大部分節(jié)流都采用時(shí)間做節(jié)流，即時(shí)間間隔小于多少的不再調(diào)用，但同時(shí)保證一個(gè)最小調(diào)用間隔。（否則拖拽類的節(jié)流都將無效果），也可以用調(diào)用次數(shù)做節(jié)流，但要考慮最后一次調(diào)用需要要執(zhí)行。
可以參考：淺談javascript的函數(shù)節(jié)流
設(shè)計(jì)模式
這方面被問到的比較多的有觀察者模式，職責(zé)鏈模式，工廠模式
主要是應(yīng)用于js開發(fā)組件中會(huì)經(jīng)常涉及，純粹的頁面業(yè)務(wù)邏輯可能涉及不多。
比如如何去設(shè)計(jì)一個(gè)前端UI組件，應(yīng)該公開出哪些方法，應(yīng)該提供哪些接口，應(yīng)該提供哪些事件。哪部分邏輯流程應(yīng)該開放出去讓用戶自行編寫，如何實(shí)現(xiàn)組件與組件之間的通信，如何實(shí)現(xiàn)高內(nèi)聚低耦合，如何實(shí)現(xiàn)組件的高復(fù)用等等
css垂直居中方法
可以看到我提到上面大多數(shù)都是關(guān)于JS的面試題，主要是因?yàn)閏ss并不是我的強(qiáng)項(xiàng)，但有幾個(gè)出現(xiàn)頻率很高，就是經(jīng)典的垂直居中問題。
這個(gè)問題又可以細(xì)分為，被垂直居中的元素是否定高，是文字還是塊，文字是單行還是多行文字等等
這個(gè)可以百度下，有N多種解決方案，主要還是看應(yīng)用場(chǎng)景的限制。
自適應(yīng)布局
這個(gè)問題可以劃分為，左固定右自適應(yīng)寬度，上固定下固定中間自適應(yīng)高度等等布局要求。
關(guān)于左右自適應(yīng)的，不低于10種解決方案，還要看dom結(jié)構(gòu)要求是并列還是嵌套，是否允許有父級(jí)元素，是否允許使用CSS3，是否有背景色，是否要兩列等高，等等
而關(guān)于自適應(yīng)高度的解決方案就略少一些，大致也是靠，CSS3的calc屬性，內(nèi)padding，絕對(duì)定位后拉伸，動(dòng)態(tài)js計(jì)算等等解決方案，同樣也是要看應(yīng)用場(chǎng)景能用哪個(gè)
移動(dòng)端自適應(yīng)
也被問到了很多移動(dòng)端開發(fā)中的各種坑，比如2倍屏，3倍屏的自適應(yīng)等，我移動(dòng)端的經(jīng)驗(yàn)略少，所以只是按照我做過的經(jīng)驗(yàn)去盡可能的描述清楚，這里就不多說了
其他關(guān)于前端
除了技術(shù)以外，因?yàn)閹н^一個(gè)小團(tuán)隊(duì)，所以更多的時(shí)間都是去聊關(guān)于項(xiàng)目，關(guān)于團(tuán)隊(duì)，關(guān)于如何管理，關(guān)于如何處理團(tuán)隊(duì)內(nèi)問題，如何跨團(tuán)隊(duì)協(xié)作等等。這部分純屬工作經(jīng)驗(yàn)了，按照做過的不同項(xiàng)目也會(huì)有不同。
總之，大部分聊得還算比較愉快，京東評(píng)定的是T3，美團(tuán)評(píng)定的是P6，我也不太清楚這算是個(gè)什么等級(jí)，不過大部分公司都是評(píng)定為中級(jí)最多中高級(jí)開發(fā)水平。大概就這樣了，從參加工作到現(xiàn)在也有4年了，只混到這么個(gè)水平似乎也確實(shí)有些說不過去。
