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

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

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

面試前的準備

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

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

前端的概念

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


一:Html與CSS

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

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

除了這些概念以外,搞懂CSS預處理器與其優點(SASSLESS),同時瞭解CSS傳統命名方式(BEM and OOCSS)。

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

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

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


二:JavaScript

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

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


三:設計模式

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

除了設計模式很重要以外,最好也要熟悉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

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

收工!

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


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

原文在此翻譯本文

文章標籤
創作者介紹
創作者 Askie 的頭像
Askie

Askie's blog|與大家分享美好的生活、推薦實用的everything!

Askie 發表在 痞客邦 留言(0) 人氣()