名詞解釋

程度副詞

對於不同程度的詞，我的理解如下：

精通：

• 瞭解背後的原理和規範
• 動手重寫過實現程式碼
• 可以以此為基礎做二次開發

掌握：

• 曾在專案中大量使用過此技術
• 可以自如的使用這項技術進行開發
• 參與技術社群討論或者寫過相關文章

熟悉：

• 曾在專案中使用過
• 通讀過相關文件
• 可以快速對相關問題定位到文件內容中

瞭解：

• 未在開發中使用過但寫過Demo
• 閱讀過相關文件
• 可以用五分鐘時間向他人介紹這項技術的特點和應用場景

不瞭解：

• 只是聽過名字
• 只是看過文件
• 沒有寫過關於這項技術的程式碼
• 需要同時具備當前等級所有特性；
• 高等級描述包含低等級描述特性。

非常多簡歷中寫到的瞭解，其實是不瞭解，熟悉和掌握可能往往只是瞭解的水平。

手寫程式碼：

可以藉助emmet或者編輯器的提醒，非複製貼上整段程式碼的方式書寫程式碼。

記憶性考察：

需要背下來的內容，不可以藉助搜尋引擎。比如大多數關鍵字的拼寫，對於超長關鍵詞可以藉助編輯器完成輸入。

一些常用的知識點也會要求記憶性考察，比如盒模型和選擇器規則，因為日常使用頻度較高，理應記住。

索引性考察：

可以一次性在搜尋引擎透過技術關鍵字找到解決方案。比如：

我們希望做一個特殊效果的輪播圖，文字和背景圖不同步滾動，背景圖每次只是水平偏移一小截，文字則是整頁的滾動

面對這個描述能夠識別出搜尋關鍵詞為“視差滾動”

理解性考察：

要求能夠透過程式碼的方式展現知識點以及和其他知識點的對比。

能夠在某應用場景內設計出該技術的使用方案。

能夠講清其背後的數學原理或者邏輯關係。

面試意圖

正面

是否具有工作崗位所需要的最低能力 是否有過類似專案開發經歷 是否掌握工作崗位所需技能 現場編碼解決問題 正確使用搜尋引擎 能夠對之前專案中使用過的技術做出詳細解釋 是否對技術有熱情 有線上可訪問的程式碼 有技術部落格 在技術社群積極回答問題 關注新技術，並且做過官方demo以外的案例 日常使用技術解決生活中的問題 成長空間 計算機專業背景 良好的演算法基礎 良好的表達能力 做過技術文章翻譯 有至少一項5年以上的愛好

反面

對冷門知識點做記憶性考察
對過時知識點做解釋型
以回答出問題的個數作為錄用指標
面試應該像測視力一樣，一開始從最容易的問題入手，逐步深入，直到無法正確回答。
如果面試中面試者沒有回答對任何問題或者回答對了所有的問題，都不是一次成功的面試。

面試方式 （針對期望薪資8K~12K的候選人）

瞭解職業經歷，確認工作內容。

透過場景概括出技術能力範圍。

面試前確認，模糊的地方在開始的時候確認。

參與了哪些專案，在專案中扮演什麼角色，完成了哪些編碼工作。

工作的流程是怎麼樣的，是否有規範（比如gitflow）工作的經驗。

按照簡歷的技能列表挑選比較鮮明的做提問。

對於基礎知識，比如HTTP協議，以記憶性考察為主；對於正則\路由\promise等技術如果不是近期專案使用過，但是聲稱掌握，可放寬為索引性考察。

我常常會進行一個額外的環節，就是讓面試人在簡歷中圈出真實技能，排除注水內容，然後只對圈出內容進行提問。因為在我看來，環境所迫帶來的簡歷注水也不該等同為面試人的品質問題，另一方面，是否能夠正確評價自己是程式設計師的一項重要能力。

正則的索引性考察： 給出10個（合法或者非法的）郵箱地址，讓面試者透過正則找出，同時開啟一份文件供查閱參考。要求五分鐘內寫出。

大約5~10個問題，主要引導面試者講述技術的原理，以及技術的使用形式，以及使用過程中遇到的問題（參看附錄）。

比如面試者聲稱熟悉AJAX，我可能會問他AJAX使用了js的什麼物件（原理），什麼是非同步函式（使用形式），跨域問題有沒有遇到過（問題），JSONP為什麼能解決跨域問題（原理），jsonp返回的內容和json有什麼不同（使用），jsonp使用遇到過哪些侷限性（問題）...

按照這個層次遞進深入，直到面試者回答吃力或者無法回答。

一般不打斷面試者的敘述，哪怕說的是錯誤的，也會在整段講完之後再進行糾正，然後開始下一個話題。

做實際編碼的測試，主要考察程式設計能力。 選用基本的js題目做測試，比如

在聚會中常玩數七的遊戲，七的倍數和帶有七的數字都不能說，比如14,27,28。請找出1~100的不能說的數字。

考察的點有：

• 編輯器的使用
• 輸入習慣
• 快捷鍵使用
• 變數定義
• 迴圈
• 迴圈語法
• 迴圈的使用理解
• 取餘運算
• 條件判斷
• 字串查詢

儘量選擇面試者有能力完成的問題，透過觀察程式設計習慣，比如是否使用快捷鍵（快捷鍵是判斷合格程式設計師的重要標準），是否過度緊張（意味著面對簡單的演算法問題也很吃力），是否能夠先輸入括號再輸入內容（10K的候選人真的很多都是從左往右寫程式碼）。

舉例的題目是難度非常低的，實際考察的時候可以適當提高難度，但不宜使用偏難怪的題目（因為可能更依賴靈感或者是否做過原題）。重點在於解決問題的過程中體現的思維方式，以及程式碼的完成度（功能覆蓋，健壯性）。

一個人的日常編碼能力是又隨手寫下程式碼的質量決定的，所以我不能接受無意義的命名，或者低效的迴圈，這意味著面試者沒有良好的編碼習慣，在以後的工作中可能也會寫出低質量的程式碼。

總結

內容部分知識舉例說明了一些常見的技能列表，實際上會根據面試者的簡歷情況設定問題。

記憶性內容作為底線要求，如果不能達標，意味著基礎不牢，在日後的工作中會在很多基本的問題上搞不清。

編碼環節主要做搜尋性考察，因為這是工作的常態形式。使用搜尋引擎的能力決定了程式設計師的日常水平。

理解性考察對應的是知識點的理解和應用，是否能夠把知識點運用到開發中，並且對日常開發中遇到的問題有自己的思考，反應的是面試者的潛力和發展。

附錄：簡歷技能點

以下是一些不推薦寫上的技能點

精通DIV+CSS

儘量不要寫著一條，因為這是一個很過時的說法。

Dreamweaver

不是主流的開發工具，也不方便配合目前流行的前端工程化解決方案。

以下是一些常見的技能點，希望大家也能夠幫忙補充。

精通HTML

這意味著能夠正確理解語義化，瞭解新老標籤的特點和實用場景。

• 可以透過觀察網頁，推測出背後的標籤結構
• 精通HTML標籤的巢狀規則
• 精通瀏覽器對較新標籤的相容情況及相容解決方案
• 精通CSS

會細分一些方向，比如我對於相容沒有很高的要求，不過如果你簡歷中提到之前做了很多相容方面的工作，我會問這方面的問題，以確認你是否紮實的掌握了日常所需的知識。

原則上我會挑簡歷上提到的內容來提問，比如你沒有寫過掌握了flex，我幾乎不會主動去問。畢竟寫在簡歷上的內容就足夠問很長時間了。

事實上，至今我還沒有遇到一個面試者可以把簡歷上聲稱掌握的內容都完美回答出來，也根本沒時間去問一些（面試官）引以為豪的知識點。

基礎方面

一些CSS中最基礎的概念，只要寫CSS就一定需要掌握的知識，比如盒模型結構，給出一段浮動程式碼畫出顯示效果，能夠對行內或者塊級元素在垂直和水平方向完成居中。

• 盒模型
• 浮動
• 居中
• 背景
• 字號字型
• 行內元素和塊級元素

佈局方面

對於主要從事頁面重構的同學，會側重問佈局相關方面的問題。比如一些設計理論和這些理論的應用；PSD設計稿的規範也應該有所瞭解，也會稍微問一些PS的基本操作。

• 常用的IE Hack
• 常見的螢幕解析度
• 響應式設計和自適應設計
• 柵格系統
• rem工作原理
• flex
• 動效方面
• transform
• transition
• 緩動曲線（貝塞爾曲線）
• animate（幀動畫，補間動畫）
• setTimeout
• 經驗方面

針對工作年限3+的應聘者，會提問一些CSS技巧問題，以鑑別是確有豐富的前端工作經驗，還是一段經驗反覆用了多年。

• 浮動清除
• 怪異盒模型
• 文字基線
• 精靈圖和iconfont
• 陰影和邊框
• 精通原生JS

說實話，15K- 的簡歷上寫了這一條，基本上是要被虐翻的，老老實實的拆開寫，擅長哪部分就寫那部分。

另外我覺的比如DOM操作用JQuery也不算丟人，或者在理解HTTP協議的基礎上，不知道AJAX背後用的原生方法也不影響日常工作。有些部分不用刻意強調原生知識點。

會側重考察對於一個實際案例，如何設計技術方案。比如帶有遮罩的彈窗，有可能遇到按鈕響應多個函式的情況，面試者能否意識到這是事件冒泡導致的問題，並且透過多個方法進行解決。

DOM

掌握原生的DOM操作

增刪查改
熟悉node和element物件

事件 關於事件的機制

• 冒泡和捕獲
• 事件委託
• 自定義事件
• Event物件
• 物件導向

瞭解物件導向的思想，能夠以物件導向的思想構建應用。比如封裝一個日曆元件，設計物件所需的屬性值和方法。

• new方法
• 繼承，派生
• 原型和原型鏈

函式

• 熟悉Array，String等的方法
• call和apply方法的使用
• 鏈式呼叫
• this

熟練使用AJAX

• $.ajax方法
• HTTP協議方法
• 跨域
• restful API
• JSONP原理

熟練使用JQuery jquery最重要的是簡化DOM操作，以及適配瀏覽器相容

• 增刪查改
• 修改屬性和樣式
• 編寫JQuery外掛
• 事件佇列

類庫專題

bootstrap

作為最為知名的前端樣式框架，無論是在應用上，還是學習中，都能給我們帶來很多的價值。

• 柵格系統
• less/sass
• 頁面元件劃分
• 索引行考察元件的使用，要求手寫程式碼

掌握swiper

• 通讀過swiper的API
• 索引行考察API的使用，要求手寫程式碼

掌握underscore

• 通讀過underscore的API
• 理解鏈式呼叫背後的原理
• 最好閱讀過underscore的原始碼
• 可以手寫實現underscore的方法

框架專題

通用

• MVC
• 雙向資料繫結
• 單項資料流
• 元件化
• 生命期
• 路由

前端模板

• 橫向對比，所用模板的優點
• 至少使用過兩種以上的前端模板

工程化

掌握gulp

索引行考察手寫gulp任務

掌握模組化

• CMD標準
• commonjs
• ES6模組
• babel如何使用
• webpack打包方案
• 非同步載入
• 打包多個檔案

掌握webpack

• 閱讀webpack文件
• 理解配置檔案結構
• 合併，注入生效程式碼部分
• 熱更新

CSS

命名策略
巢狀
變數
函式

瞭解nodeJS 對於前端崗位，nodejs的使用主要集中在自動化和搭建簡單的資料伺服器兩個方面。

• 是否上傳過npm包
• 斷點除錯法
• express
• 外掛
• 中介軟體
• 路由原理
• HTTP協議
• 資料庫查詢
• HTML模板（ejs，pug）

瞭解ES6

• promise
• Generator
• 花括號作用域
• class
• 陣列遍歷（ES5）
• 嚴格模式（ES5）
• 模組系統

開發工具 Sublime,Atom,Webstorm,Hbuilder等

• 日常使用什麼外掛
• 使用什麼快捷鍵
• 應用哪些snippet

自己是從事了五年的前端工程師