擊破前端面試的困難(繁中翻譯)

本文章翻譯自@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

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

林汶樺|Askie Lin

Written by

I am a front-end developer in Taiwan. Find me on Medium or here: https://askiebaby.github.io/ #HTML5 #CSS3 #JavaScript #Vuejs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade