百日轉職前端工程師：前端工程師知識地圖 Day1

百日轉職前端工程師：前端工程師知識地圖《Day 1》

8 6 月, 2020 Boison

開始先弄懂一下前端工程師可能要懂的知識點，之後有看到什麼查什麼，昨日阿斌密我說他也有參加過胡立的計畫，問了阿斌請他幫我講解一下六角學院的這張圖，以下自己補充完紀錄之，以下內容為個人用麻瓜的語言理解後的翻譯，可能有誤歡迎留言指點。

註：如果你想要學習如何在百日內「高效學習」上路實戰，非常推薦閱讀文章 《學習如何學習》

內容目錄

一、必備技能

1. Git

類似 RPG 的存檔功能，可以隨時回到上個存檔點。

2. Terminal

就是不透過圖形化介面，直接用這個工具寫程式碼向電腦下指令。

二、CSS 預處理

目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS 和 Stylus 最優秀使用的人也最多，基本上就是把 CSS 的語法在比較方便的環境中編撰（預先處理，可能覺得原始的程式碼編寫會有諸多不方便或者不直覺），但是這些程式碼不能直接執行，打包之前還要做一些處理才能跑。

三、CSS 模組化概念

SMACSS 全名為 ( Scalable and Modular Architecture for CSS ) ，顧名思義是可模組化且具結構分類有命名規則的方式，其中的精神就是容易擴展及模組化。
OOCSS ( Object Oriented CSS ) 有兩項基本的原則，結構與樣式分離，容器與內容分離。

基本上我自己理解就是要減少一些重複的工序，所以有模組化的概念。

四、CSS 技巧 & CSS 專精

不需要使用 CSS 的 FrameWork，依然可以幫助快速排好版型，那就是——FlexBox。最近這一年多以來相當盛行的一個排版神器。可以透過幾行簡單的語法，就可以將我們想要呈現的內容，存放在我們想要的區塊內。

好用的工具網站

Bootstrap（基本上可以讓你不用去做一些雜工，一些功能和外型都可以下載寫好的套版）
Material UI
antdesign

五、基礎 DOM 操作

1. DOM

檔案物件模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴充套件置標語言的標準程式介面。

根據 W3C DOM規範（http://www.w3.org/DOM/），DOM 是一種與瀏覽器，平台，語言的接口，使得你可以訪問頁面其他的標準組件。簡單理解， DOM 解決了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之間的衝突，給予 web 設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。

文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述（representation），讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。所有網頁設計師可操作及建立文件的屬性、方法及事件都以[物件]來展現（例如，document 就代表「文件本身」這個物件，table 物件則代表 HTML 的表格物件等等）。這些物件可以由當今大多數的瀏覽器以 Script 來取用。

DOM 最常被用以與 JavaScript 溝通，也就是說雖然程式以 JavaScript 寫成，但使用 DOM 來存取頁面及其元素。無論如何，DOM 本身是設計為一種獨立的程式語言，以一致的 API 存取文件的結構表述；是以雖然焦點放在 JavaScript 上，但 DOM 其實可以與任何程式語言共同運作。

簡單來說，在DOM的標準下，一份文件中所有的標籤定義，包括文字，都是一個物件，這些物件以文件定義的結構，形成了一個樹狀結構。例如：

<html>
    <head>
        <title>首頁</title>
    </head>
    <body>
        <h1>Hello!World!</h1>
        <a href=”Gossip/index.html”>學習筆記</a>
    </body>
</html>

2. jQuery

與框架並行使用，早期框架的工作是 jQuery 在做的，如果同個事件綁定多個處理器，甚至連執行先後順序也不一樣。而透過 jQuery 處理事件只需要一個 $(…).bind() 或 $(…).on() 就足夠，除了解決跨瀏覽器的問題之外，也能解決對 DOM 控制的問題。

註：內容轉載參考 chenmike 部落格和 openhome，純學習非營利

六、其他

其它是 UI 要懂的，但有空也可以懂。

一、JavaScript 技巧

ES 就是 JavaScript 的版本，基本上 ES6, ES7 是比較大改變，所以要熟悉！最新已經出到 E11，但是不是所有公司的環境都更新到這，不要只會用 E11 不然去到不能用的公司等於武功廢一大半， ES11 很多好用功能都不能直接用。

二、JavaScript 預處理

JavaScript 預處理，就是為了更好寫程式之類開發的一個環境，但不能直接實際執行，打包之前要做一些轉換。

因為 JavaScript 沒有型別，有些人想要變成強型別比較精準好用，所以開發了 TypeScript，TypeScript 在還沒執行前若程式碼有錯就會跳 Error 讓你知道。（TypeScript 是微軟開發的）至於 Babel 則是可以把新的語法 (ES11, ES10) 變成舊的語法，讓有些使用者即使是舊的 Chrome 也可以跑網頁。

三、JavaScript 框架

JavaScript 框架一組能輕鬆生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數。

早期框架的工作是 jQuery 在做的，如果同個事件綁定多個處理器，甚至連執行先後順序也不一樣。而透過 jQuery 處理事件只需要一個 $(…).bind() 或 $(…).on() 就足夠，除了解決跨瀏覽器的問題之外，也能解決對 DOM 控制的問題。

但是 jQuery 還是自由度太高，使用上不嚴謹，所以當專案越來越大時團隊運作很不方便，於是框架誕生了。

REACT（Facebook 開發的框架）
Angular（Google 開發的框架）
Vue （中國開發的框架，但很多人在用好用）

四、任務管理工具

將一些處理「動作」寫好，以後就能自動化去跑完。例如像是 npm ，可以寫好執行腳本（第一步執行 Babel，第二步壓縮圖片…..）

五、套件管理工具

我的理解任務管理工具，是能裝一些套件。就像是 Window10 不是裝任何軟體都要到內建的一個區域，那邊可以搜尋到很多套件，統一在那邊下載

NPM （Google開發的，比較老的套件管理工具）
YARN （Facebook 開發的）

Window 安裝應用程式 — 有點類似 Window 10 這個區域，我覺得。

六、API

基本上後端工程師從資料庫取出資料以後，前端工程師跟後端工程師會約定好一套 API，以後前端工程師就透過這組 API 去取得相對應的資料。

七、測試

就是開始跑之前要看看成果長怎樣，有沒有 Bug，就透過測試環境。

八、其他

1. Firebase – 前端要自幹的工具

Firebase 是一個同時支援 Android、iOS 及網頁的 app 雲端開發平台，協助 app 開發者在雲端快速建置後端服務，提供即時資料庫，有效縮短 app開發時間，並幫助開發者更專注在前端的優化。

2. Node.js 框架

後端用的框架，原理同上。

九、總結：一招練一萬次勝過一萬招

還有推薦我一個網站 Github 上的 Roadmap 有空再研究，其實雖然以上功能真的很多，但 Junior 可能一開始都不用碰到，因為每間公司有自己的習慣工具，就大概懂概念進去後馬上用得到學起來就好，不過如果能夠事先寫過幾行代碼有個印象了解運作邏輯，應該在面試時更好表現自己的優秀，總而言之呢，不要害怕工具推陳出新，李小龍說過一句話，這在工程師的世界應該也是適用的。

李小龍名言：我不怕一次會踢出一萬種踢法的人，只怕把一個踢腿動作練了一萬次的人。 — 我不怕一次會踢出一萬種踢法的人，只怕把一個踢腿動作練了一萬次的人。轉自 Only Live Once

訂閱我不斷更新的百日學習專欄，看看我百日後有沒有成為工程師，薪水多少？

旅書人 TripBook

百日轉職前端工程師：前端工程師知識地圖《Day 1》