擊破前端面試的困難（繁中翻譯）

本文章翻譯自@jonathanzwhite的此篇文章，經原作者同意，目的是希望將很棒的英文文章翻譯成繁體中文後，除了作為自己的技術筆記，也能提供給平常不習慣閱讀英文的人學習。我本身並非專業的翻譯人員，翻得較口語化，文章如有疏漏、語意錯誤，歡迎留言！讓我們一起成長吧！
— Askie Lin

事實上，在前端工作面試時，回答關於技術性的問題的確是有難度的。你不只需要對資訊工程基礎有具體的掌握，也需要對網頁效能、系統建設、CSS排版引擎（所有網頁瀏覽器、電子郵件用戶端、電子閱讀器）等有一定的理解。

相信在Medium已有不少與該技術相關的文章可以查閱與學習，但我發現能夠幫助你完整地準備前端面試的文章少之又少。因此，我決定針對此主題，整理一份準備指南，希望能幫助大家順利通過下一次的面試！

面試前的準備

在面試以前，記得先向應徵公司瞭解面試的形式。我們平常或許習慣使用如CoderPad的線上編輯器撰寫程式碼，但也許面試的主管卻會使用白板來進行面試。所以了解面試的方式很重要，如此便能以相同情境來準備與練習。

與此同時，你可以詢問招募者準備的方向，因為有些公司會問些資訊工程的問題，如搜尋/排序演算法。

前端的概念

Html、CSS、JavaScript、以及JavaScript設計模式，這些都將是你在面試時一定會考的部分。針對以下整理的清單學習，確保你對每一個區塊都有一定熟悉度。

一：Html與CSS

在前端開發中，Html與CSS啊！是如同麵包與奶油之間的關係。面試中，最可能被問到Html與CSS的細節，那麼，首先準備以Html、CSS來完成Mockup視覺稿。

如果還想重溫一下Html、CSS，點擊下列頁面來快速複習基礎的部分。

• CSS animations（動畫）
• CSS sprites（減少圖片節點的技巧）
• Pseudo classes（偽元素）
• Grid systems（網格系統）
• Semantic markup（語意化的標記）

除了這些概念以外，搞懂CSS預處理器與其優點（SASS、LESS），同時瞭解CSS傳統命名方式（BEM and OOCSS）。

另一件很重要的事，公司會希望從眾多面試者中，雇用CSS效能寫得較好的的人，這裡有篇文章可以讓你參考，作者是Medium的前端工程師，內容陳述Medium目前的CSS結構是如何迭代。

前文提及，有些公司面試時會請你用Html、CSS直接排版，你可以在CodePen練練手，另外，在Dribbble能找到許多優秀的設計，可以挑選幾項不錯的作品作為練習。

最後，作為一位前端，我們時常在更動某部分的程式碼或結構之後，馬上檢視瀏覽器的變化；然而，大多數面試不會給你這個機會。所以當你在練習排版的過程中，盡量試著不要看結果直到最後寫完，這樣能夠增強你對切版結構的概念、熟悉CSS屬性與元素的特性。

二：JavaScript

如果說在前端開發中，Html與CSS是麵包與奶油的關係，那麼JavaScript即是一把刀。面試時，公司會花非常多的時間測試你對JavaScript的瞭解度，多數問題將圍繞在下列的程式概念：

• Prototypal inheritance
• Scoping
• Closures
• The event loop
• Event bubbling
• Apply, call, and bind
• Callbacks and promises
• Variable and function hoisting
• Currying

當遇到JavaScript的問題時，你要先釐清此問題是JS的哪個部分，就能輕易的找到正確解法。如果你自認為對JS已有十拿九穩的把握，可以於此進行自我測試：這裏、這裏、這裏。

三：設計模式

JS的設計模式能解決常見問題，下列設計模式很重要！

• Decorator
• Factory
• Singleton
• Revealing module
• Facade
• Observer
• MVC, MVP, MVVM

除了設計模式很重要以外，最好也要熟悉JavaScript的框架（ Framework），而這並不是指你需要在面試前學會另一框架，取而代之的是，你要瞭解前端的工作團隊使用框架的原因、何時需要使用。假使你應徵的是需要使用React+Flux或是Angular的職位，那麼記得一定要在面試前，複習說明文件（ Documentation）以便理解該框架的結構組成與原理。

四、計算機概論

有些公司在招募前端工程師之前已經有先招募軟體工程師，這類公司會期許你對於以下部分有良好的基礎：軟體設計原則、規劃可擴展之程式碼結構、以及測試。

如若你應徵的公司有建議你準備資料結構及演算法，那麼就是這第四部分沒錯了！相反的話，你可以略過這塊沒關係。其實你沒有電腦資訊的相關背景是OK的，因為大部分這些概念都能夠很直覺的學習。

下頭針對資料結構列出了些建議的內容，不要單純只是閱讀，更要花點時間應用在JS。假設你不懂單元測試（ Unit Testing），你可以在函式庫Mocha進行測試並學習。

• Linked lists
• Hashtables
• Stacks and queues
• Trees (binary trees and heaps)
• Graphs

備註：Graphs是指一種關聯並非圖像、圖形，要知道如何深度/廣度優先搜尋法的原理。

想要實做一些資料結構，可以上SanFoundry這個網站，它提供的範例雖全是Java的例子，但將此概念重新放到JavaScript實作非常容易。

五：排序

當你覺得自己對資料結構已有一定瞭解，那麼就可以移動到排序這個部分學習了！同樣地，瞭解下列的排序方式，並且在JS實作，針對時間複雜度與空間複雜度做筆記。

• Binary search
• Bubble sort
• Insertion sort
• Merge sort
• Quick sort
• Selection sort

複習完資料結構與演算法之後，可以在Leetcode、technical Javascript questions測驗自己的知識是否充足。

收工！

我能理解有太多事物需要學習與消化，尤其當你還是一位新手的時候，所以提前準備面試，才能分配學習的步調。記得！面試並不能評核你寫程式的能力，有些人本來就擅長面試，有些人則否；有時你可能與和面試官聊得很合，有時則沒辦法。

如果有任何問題，可以在作者文章底下留言或Tweet。

原文在此 https://medium.freecodecamp.com/cracking-the-front-end-interview-9a34cd46237