每年的金三銀四，都将迎來求職面試的一個高峰期，為什麼會有那麼多的求職需求？
多是因為以下幾個來源：
- 已拿 offer 等年終獎的：年前已經找到機會，領了年終獎辭職要到新公司報到的
- 臨時起意要辭及裸辭的：考慮到領了年終獎再走，節後裸辭或者迅速找到工作機會，完成辭職的
- 因職業發展而辭職的：節後發現老闆沒有提拔自己到目标職位，自己發展受阻，離職尋找新工作
- 工作計劃新誕生的職位：許多企業因決策流程長，常在年後确定來年工作計劃，包含新業務的新職位
- 公司人才盤點後的 backup：許多公司不喜歡年底裁人，會在來年春天把與職位不比對的人員解除勞動合同，會做好備份
如果是因為以上任意一個想跳槽的，趕緊準備起來了。
把前端知識做一個整體的回顧，疑難困惑點及時查漏補缺，這樣才能從容面對接下來的面試。
根據以往面試的經曆，結合網友的分享，常見的面試題經常覆寫這樣幾個方面：
- JavaScript、CSS、React / Vue、Node等基礎知識
- 對一些前端知識概念的了解
- 前端性能優化
- 疑難問題的解法
- 實作原理和自己對源碼的實作
- 前端工具篇（常用Git指令或者自動化工具的使用等）
于是我将網站進行了以下的設計：
根據分類對應到頂部導航欄如下
首頁是品牌意識的一個介紹（https://spacexcode.com/）
點選中間按鈕，進入引導頁（https://spacexcode.com/guide/）
左側導航和頂部導航一緻，預設二級菜單展開狀态。右邊内容區域可編寫一些自己的詳細資訊，引導關注類或者網站總體内容的概述。
每個分類知識通過二級三級标題索引展開
下面簡單講解下如何通過
vuepress
程式實作這樣一個站點，源碼目錄如下：
src：//網站根目錄
├─.vuepress //程式主目錄
│ ├─components //元件代碼目錄
│ ├─dist //打包生成代碼目錄
│ ├─public //和主題相關靜态資源
│ ├─styles //主題樣式代碼
│ ├─components //元件代碼目錄
│ ├─config.js //配置檔案
│ ├─enhanceApp.js //應用級别的配置
├─assets //網站靜态資源目錄
├─concept //概念詳解目錄
│ ├─README.md //目錄首頁
├─css //CSS目錄
│ ├─README.md //目錄首頁
├─electron //Electron目錄
│ ├─README.md //目錄首頁
├─css //CSS目錄
│ ├─README.md //目錄首頁
├─guide //引導頁
│ ├─README.md //目錄首頁
├─javascript //javascript目錄
│ ├─README.md //目錄首頁
├─node //node目錄
│ ├─README.md //目錄首頁
├─performance //performance目錄
│ ├─README.md //目錄首頁
├─principle //principle目錄
│ ├─README.md //目錄首頁
├─problem //problem目錄
│ ├─README.md //目錄首頁
├─react //react目錄
│ ├─README.md //目錄首頁
├─source //source目錄
│ ├─README.md //目錄首頁
├─tool //開發工具目錄
│ ├─git.md //Git指令
│ ├─github.md //Github技巧
├─vue //vue目錄
│ ├─README.md //目錄首頁
├─index.md //首頁
├─package.json
詳細配置
src/.vuepress/config.js
module.exports = {
/**
* Ref：https://v1.vuepress.vuejs.org/config/#title
*/
title: '太空程式設計',
/**
* Ref：https://v1.vuepress.vuejs.org/config/#description
*/
description: description,
/**
* Extra tags to be injected to the page HTML `<head>`
*
* ref：https://v1.vuepress.vuejs.org/config/#head
*/
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'shortcut icon', type: "image/x-icon", href: '/favicon.ico' }]
],
/**
* Theme configuration, here is the default theme configuration for VuePress.
*
* ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
*/
themeConfig: {
logo: '/logo.png',
repo: '',
editLinks: false,
docsDir: '',
editLinkText: '',
lastUpdated: false,
nav: [
{
text: 'JavaScript',
link: '/javascript/'
},
{
text: 'CSS',
link: '/css/'
},
// .....
{
text: '疑難雜症',
link: '/problem/'
},
{
text: '手寫源碼',
link: '/source/'
},
{
text: '開發工具',
items: [
{
text: 'Git指令',
link: '/tool/git'
},
// ......
]
},
{
text: '聯系',
ariaLabel: '更多聯系',
items: [
{
text: 'Github',
link: 'https://www.github.com/fantingsheng'
},
// ........
{
text: '開發筆記',
link: 'http://wiki.i-fanr.com'
}
]
}
],
sidebar: [
{
title: 'JavaScript', // 必要的
path: '/javascript/', // 可選的, 标題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 預設值是 true
},
{
title: 'CSS', // 必要的
path: '/css/', // 可選的, 标題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 預設值是 true
},
// ......
{
title: '手寫源碼', // 必要的
path: '/source/', // 可選的, 标題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 預設值是 true
},
{
title: '開發工具', // 必要的
path: '/tool/', // 可選的, 标題的跳轉連結，應為絕對路徑且必須存在
collapsable: false, // 可選的, 預設值是 true,
children: [
'/tool/git',
'/tool/github',
'/tool/web',
'/tool/run'
]
}
]
},
/**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
'image'
]
}
左側菜單除了引導頁面采用自定義，其它頁面均通過配置 sidebar: auto
---
sidebar: auto
---
我們都知道知識需要結構化。平時的總結和記憶都是碎片化的，要做到由點到面，需要采用合理的分類将知識串聯起來形成大綱。
通過分類，把平時遇到的問題和總結記錄下來，形成自己的沉澱。
在面試前就有了一份自己的知識回顧清單。這比看網上的任何一份面試題大全都有用，更重要的是記憶會更加深刻。
雖然“面試造火箭，工作擰螺絲”，但是及時地梳理加深自己的專業知識是每個技術人都應該時刻謹記的。有了這份态度，才不至于在突如其來的面試面前手忙腳亂。
Respect !
太空程式設計
分享硬核的程式設計知識
分享精彩，碼上快樂。JavaScript已然上天，有朝一日實作太空程式設計！回複【pdf】更有海量的優質電子書供下載下傳。
spacexcode