導讀長文警告寫了那么久的技術文，來點不一樣的吧。最近公司招人，所以面試了一波，總結了一下前端這個區間內的要求吧。僅代表個人意見和理解名詞解釋程度副詞對于不同程度....

長文警告

寫了那么久的技術文，來點不一樣的吧。

最近公司招人，所以面試了一波，總結了一下前端這個區間內的要求吧。

僅代表個人意見和理解

名詞解釋程度副詞

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

精通

• 了解背后的原理和規范
• 動手重寫過實現代碼
• 可以以為此為基礎做二次開發
• 能讀懂源碼并做出修改

掌握

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

熟悉

• 曾在項目中使用過
• 通讀過相關文檔
• 可以快速對相關問題定位到文檔內容中
• 了解一些較冷僻的相關語法糖和api等

了解

• 未在開發中使用過，但寫過demo
• 閱讀過相關文檔或者視頻教程
• 可以用五分鐘內向他人介紹這項技術的特點和應用場景

不了解

• 只是聽過名字
• 只是大概的翻過文檔
• 沒有寫過關于這項技術的代碼
• 需要同時具備當前等級所有特性
• 高等級描述包含低等級描述特性

非常多的簡歷中寫到的了解，其實是不了解，熟悉和掌握可能往往只是了解的水平，如果你寫的精通，那么我就要帶著電腦來面試你了。

手寫代碼：

可以借助emmet或者編輯器的提醒，非復制粘貼整段代碼的方式書寫代碼。

記憶性考察：

需要背下來的內容，不可以借助搜索引擎。比如大多數關鍵字的拼寫，對于超長關鍵詞可以借助編輯器完成輸入。一些常用的知識點也會要求記憶性考察，比如盒模型和選擇器規則，因為日常使用頻度較高，理應記住。

索引性考察：

可以一次性在搜索引擎通過技術關鍵字找到解決方案。比如：我們希望做一個特殊效果的輪播圖，文字和背景圖不同步滾動，背景圖每次只是水平偏移一小截，文字則是整頁的滾動 面對這個描述能夠識別出搜索關鍵詞為“視差滾動”

理解性考察：

要求能夠通過代碼的方式展現知識點以及和其他知識點的對比。能夠在某應用場景內設計出該技術的使用方案。能夠講清其背后的數學原理或者邏輯關系。

面試意圖正面

1. 是否具有工作崗位所需要的最低能力
2. 是否有過類似項目開發經歷
3. 是否掌握工作崗位所需技能
4. 現場編碼解決問題
5. 正確使用搜索引擎
6. 能夠對之前項目中使用過的技術做出詳細解釋
7. 是否對技術有熱情
8. 有在線可訪問的代碼
9. 有技術博客
10. 在技術社區積極回答問題
11. 關注新技術，并且做過官方demo以外的案例
12. 日常使用技術解決生活中的問題
13. 成長空間
14. 計算機專業背景
15. 良好的算法基礎
16. 良好的表達能力
17. 做過技術文章翻譯
18. 有至少一項5年以上的愛好

反面

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

面試方式

• 了解職業經歷，確認工作內容。
• 通過場景概括出技術能力范圍。
• 面試前確認，模糊的地方在開始的時候確認。
• 參與了哪些項目，在項目中扮演什么角色，完成了哪些編碼工作。
• 工作的流程是怎么樣的，是否有規范（比如gitflow）工作的經驗。
• 按照簡歷的技能列表挑選比較鮮明的做提問。
• 對于基礎知識，比如HTTP協議，以記憶性考察為主；對于正則路由promise等技術如果不是近期項目使用過，但是- 聲稱掌握，可放寬為索引性考察。
• 我常常會進行一個額外的環節，就是讓面試人在簡歷中圈出真實技能，排除注水內容，然后只對圈出內容進行提問。因為在我看來，環境所迫帶來的簡歷注水也不該等同為面試人的品質問題，另一方面，是否能夠正確評價自己是程序員的一項重要能力。

我們公司使用的技術棧相關api問答，以及根據情況來詢問更深層次的語法和用法等

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

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

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

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

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

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

考察的點有：

• 技術棧是否契合
• 技術深度
• 技術的基礎了解程度
• 遇到問題的解題思路

總結

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

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

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

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

基本功考察

1. 關于Html

• html語義化標簽的理解; 結構化的理解; 能否寫出簡潔的html結構; SEO優化
• h5中新增的屬性; 如自定義屬性data, 類名className等, 新增表單元素, 拖拽Drag
• h5中新增的API, 修改的API, 廢棄的API 稍作了解 (離線存儲, audio, video)

2. 關于CSS

• CSS選擇器( 三大特性 )
• BFC機制
• 盒模型
• CSS模塊化開發(封裝); SCSS和LESS的使用
• 屏幕適配 以及 頁面自適應
• CSS3中新增的選擇器
• CSS3中新增的屬性, transform trasition animation等…

3. 關于布局

• 標準文檔流(padding margin 負margin) 浮動float 定位
• 百分比布局(流式布局): px單位 用 %num代替, 占父級元素的百分比
• flex彈性布局: 主軸 輔助軸的幾個屬性
• grid柵格布局: 使用框架中的類名來替代: 本質上還是百分比布局

4. 關于JS基礎

• 變量數據類型及檢測: 基本 引用
• 運算符: 算術 條件 邏輯 位 短路, 隱式轉換等
• 條件, 循環, 異常處理 if switch(){case xxx:} try catch finally throw
• 函數定義, 調用方式(apply, call, 直接調用), 傳參: 實參給形參賦值
• 字符串, 數組, 對象常用API,
• 正則表達式

5. 關于JS高級

• 作用域, 作用域鏈, 閉包
• 原型, 原型鏈, 繼承
• 函數上下文, this指向
• js的運行機制, 事件隊列和循環
• 同步, 異步編程

6. 關于網絡協議

• HTTP協議
• cookie, session, token

7. 關于ES6語法

• 字符串, 數組, 對象 擴展的api
• 變量擴展: let const 解構賦值 塊級作用域
• 函數擴展: 箭頭函數 默認參數, rest參數
• 展開運算符, 模板字符串
• set 和 map數據結構
• 迭代器和生成器函數 next 和 yield的理解
• proxy對象 屬性代理器: 屬性的讀取（get）和設置（set）相關操作
• promise對象, 異步編程的解決方案
• async await: 異步編程的終極方案 promise generator的語法糖
• class語法 構造函數的語法糖
• 模塊化編程 export import 的 導出和導入

9. VUE基礎

• 基本指令
• 實例的屬性和方法
• 實例的生命周期
• 組件基礎: 創建,注冊,添加屬性方法,套用等…
• 組件通信傳值 父子, 兄弟, 跨級
• 插槽slot等…

10. VUE高級

• vue-router: 搭建SPA
• 路由,組件的配置
• 路由間的傳值
• 路由跳轉
• 路由的導航守衛
• 記住在router.js 和 組件頁面中的使用方式
• vuex: 狀態管理: 數據倉庫store
• 實例化倉庫的5大屬性的使用

state, getters, mutations, actions, modules

• 輔助函數mapState等…, 倉庫中計算屬性的映射, 方便操作
• 記住在 store.js 和 組件中 使用方式

11. VUE深入, 源碼閱讀

• 數據響應式原理
• virtual dom
• diff 算法
• nextTick等等…
• vue2和vue3的數據綁定
• vue3的componest API
• vite的用法

DOM掌握原生的DOM操作增刪查改熟悉node和element對象事件關于事件的機制

• 冒泡和捕獲
• 事件委托
• 自定義事件
• Event對象
• 面向對象

了解面向對象的思想，能夠以面向對象的思想構建應用。比如封裝一個日歷組件，設計對象所需的屬性值和方法。

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

函數

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

工程化

1. 掌握gulp
2. 索引行考察手寫gulp任務
3. 掌握模塊化

• CMD標準
• commonjs
• ES6模塊
• babel如何使用
• webpack打包方案
• 異步加載
• 打包多個文件

4. 掌握webpack

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

5. CSS

命名策略嵌套變量函數了解nodeJS對于前端崗位，nodejs的使用主要集中在自動化和搭建簡單的數據服務器兩個方面。

• 是否上傳過npm包
• 斷點調試法
• express
• 插件
• 中間件
• 路由原理
• HTTP協議
• 數據庫查詢
• HTML模板（ejs，pug）

了解ES6

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

框架專題通用

• MVC
• 雙向數據綁定
• 單項數據流
• 組件化
• 生命期
• 路由

前端模板

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

工程能力考察:

1. 項目能力

• vue-cli腳手架搭建和功能配置 vue.config.js
• vite的使用和搭建等
• webpack的常用配置
• 項目構建 打包

2. 熟悉各類框架的文檔…

• UI框架: Bootstrap, MUI, Element-ui等
• 常用的插件整理, 整理一個自己插件庫, 封裝自己的方法庫,組件庫

3. 常用的工具熟練度

• PC端和移動端開發注意事項和兼容性

4. 經驗總結: 如何快速確定項目的技術選型
5. 坑點總結

• 項目遇到坑坑坑!!!
• 如何處理，如何提出issue并且合作處理

6. git或者svn等使用情況
7. 項目中的性能優化記錄 ( 都是細節點…多記錄 )
8. 需求文檔的理解, 可以結合 項目流程圖, UML圖
9. 問題解決能力: (bug定位調試, 查找文檔, 尋求他人…)
10. 平常有記錄的習慣嗎。

模塊化, 組件化開發能力

• 項目分類; 各類文件整理,分類
• 各類功能封裝
• 組件和功能模塊的抽離, 解耦, 復用

內功考察:

1. 面向對象的編程思想

• 類的抽象
• 對象的封裝, 繼承
• 為了更好的去管理數據, 分類數據 實現高內聚, 低

2. 設計模式

• 設計模式感覺也是
• 將面向對象思想 再度抽象成現實中 某些特定模式

3. 數據結構和算法

• 學習常用的排序搜索算法, 順序表,鏈表,棧,隊列,樹,堆 結構等等…
• 考驗你的 抽象思維 和 數學功底了
• 將現實需求 抽象成 計算機代碼 的思維能力

附加技能考察:

1. 學習能力

• 持續學習的態度–博客, 筆記記錄
• 技術論壇活躍度高, 問答多
• GitHub開源項目參與

2. 了解一門后端語言

• node.js, python, php等…
• 數據庫mysql,redis,mongodb. sql的操作語句, mongo的操作語句, redis操作語句
• node express 搭建本地服務等
• python django request scrapy

3. 系統編程

• Linux命令行操作, 系統文件管理
• 多任務, 多線程, 多進程, 協程, 并發, 并行, 串行, 同步, 異步等概念的理解

公眾號：小何成長，佛系更文，都是自己曾經踩過的坑或者是學到的東西

有興趣的小伙伴歡迎關注我哦，我是：何小玍。 大家一起進步鴨