快速入門Web前端開發(fā)

發(fā)表時(shí)間：2018-9-30

發(fā)布人：葵宇科技

瀏覽次數(shù)：49

入門標(biāo)準(zhǔn)

入門標(biāo)準(zhǔn)很簡(jiǎn)單，就一條：達(dá)到能參與 Web 前端實(shí)際項(xiàng)目的開發(fā)水平。請(qǐng)注意，是實(shí)際項(xiàng)目，這就需要了解如今的實(shí)際項(xiàng)目開發(fā)都用了哪些技術(shù)棧。HTML/CSS/JavaScript 這三大基礎(chǔ)技術(shù)?？隙ㄊ切枰莆盏?#xff0c;但要能參與實(shí)際項(xiàng)目開發(fā)，肯定還要掌握其他一些主流的框架體系。

幾年前， jQuery + Bootstrap 可以說(shuō)是一統(tǒng)江湖，是前端領(lǐng)域的絕對(duì)霸主。而這幾年，隨著 Angular、React、Vue 等框架的興起，變成了百家爭(zhēng)鳴的局面。這幾年，Web 前端的技術(shù)發(fā)展真是太快了，相應(yīng)地，技術(shù)棧也就變得非常多，除了最基本的HTML/CSS/JavaScript，以及 Vue/React/Angular 等這些 JavaScript 框架和各自的生態(tài)體系，還有 CSS 預(yù)處理器 Sass/Less/Stylus，還有 TypeScript，還有 grunt/webpack/gulp 等各種打包構(gòu)建工具，還有其他一大堆技術(shù)棧。

這么多技術(shù)棧，我們不可能全都掌握，就算是資深的前端工程師，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，很少有人對(duì)三種框架生態(tài)體系都非常了解。因此，我們?nèi)腴T也沒必要每種框架都學(xué)習(xí)，只要挑選一種就夠了。而且，作為全棧，我們學(xué)習(xí)一門技術(shù)更重要的是要學(xué)習(xí)技術(shù)背后的編程思想、設(shè)計(jì)思想、架構(gòu)思想等。而不管是 Angular、React 還是 Vuew，其背后的核心設(shè)計(jì)思想都是組件化的設(shè)計(jì)，因此只要掌握一種框架，我們也就能學(xué)習(xí)到前端技術(shù)的核心思想了。

那么，我們應(yīng)該學(xué)哪種框架體系呢？我的建議是從 Vue 開始，因?yàn)?Vue 的學(xué)習(xí)成本是最低的，入門簡(jiǎn)單，而且這兩年 Vue 可以說(shuō)是出現(xiàn)了爆發(fā)式的增長(zhǎng)，已經(jīng)直逼 React。React 的主要學(xué)習(xí)成本在于要掌握 JSX 語(yǔ)法，而且文檔還大多都是英文。Vue 因?yàn)槭菄?guó)人開發(fā)和維護(hù)的，自然對(duì)國(guó)內(nèi)的開發(fā)者更友好。Angular 則是個(gè)大而全的框架，顯得太重，學(xué)習(xí)成本自然最高。至于 jQuery + Bootstrap 這套，已經(jīng)過(guò)時(shí)了，建議沒必要去學(xué)習(xí)了，畢竟我們的時(shí)間很寶貴，還有一大堆更有價(jià)值的東西等著我們?nèi)W(xué)。

因此，我們要入門 Web 前端開發(fā)的話，除了要學(xué)習(xí) HTML/CSS/JavaScript 三大基礎(chǔ)技術(shù)棧，還要了解 Vue 體系。而 Vue 體系，除了 Vue 框架本身，還包括其他技術(shù)棧，這個(gè)后面再說(shuō)。

HTML/CSS/JavaScript

HTML、CSS、JavaScript 是前端的核心基礎(chǔ)，所以必須要掌握。HTML 主要就是HTML5，相比之前的版本，新增了很多新特性。CSS 則主要是 CSS3 了，相比以前的版本，主要就是作了模塊化的拆分。JavaScript 其實(shí)分為三部分：ECMAScript、DOM和 BOM。ECMAScript 簡(jiǎn)稱 ES，是 JavaScript 的核心，目前最新版本已經(jīng)是ES2017，是 ES6 的第三個(gè)小版本。DOM 是文檔對(duì)象模型，其實(shí)就是一套訪問(wèn)和操作 HTML 所有元素的 API。BOM 則是瀏覽器對(duì)象模型，用于訪問(wèn)和操作瀏覽器的一些特性。

HTML/CSS/JavaScript 的學(xué)習(xí)資源比較多，我推薦幾個(gè)。首先是 w3school 的系列教程：

HTML：該教程也包括了 HTML5 新增的內(nèi)容，但講得沒下面專門講解 HTML5 的細(xì)，所以該教程我建議只看 HTML 基礎(chǔ)教程和表單部分即可
HTML5：該教程講解了 HTML5 的新特性
CSS：該教程并不包括 CSS3 新增的特性，所以還需要學(xué)習(xí)下面的 CSS3 的教程
CSS3：該教程內(nèi)容比較少，只包含 CSS3 新增的特性
JavaScript：該教程只是講解了非常基礎(chǔ)的語(yǔ)法

不過(guò)，我更推薦菜鳥的教程，內(nèi)容雖然也是來(lái)自 w3school，但部分內(nèi)容比 w3school 的更詳細(xì)，以下是教程地址：

HTML：http://www.runoob.com/html/html-tutorial.html
CSS：http://www.runoob.com/css/css-tutorial.html
JavaScript：http://www.runoob.com/js/js-tutorial.html

HTML 和 CSS 只要根據(jù)以上教程學(xué)習(xí)就足夠了，但 JavaScript 則是不夠的，以上教程缺少了 ES6 及更高版本的內(nèi)容，后面我再推薦其他學(xué)習(xí)資源進(jìn)行補(bǔ)充。

視頻教程方面，慕課網(wǎng)、極客學(xué)院等都有基礎(chǔ)課程，但都是收費(fèi)的，而且價(jià)格不菲，性價(jià)比實(shí)在太低。比如慕課網(wǎng)的《前端小白入門》+《前端進(jìn)階：響應(yīng)式開發(fā)與前端框架》兩套課程的組合套餐就要 988 元了，而內(nèi)容還沒有上面免費(fèi)教程的齊全。如果真要看視頻，那我會(huì)推薦網(wǎng)易云課堂的一些免費(fèi)課程:

從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開發(fā)
H5/web前端開發(fā)｜HTML5+CSS3
李炎恢JavaScript教程第一季

書籍方面，HTML 和 CSS 基礎(chǔ)方面的，首推《Head First HTML與CSS》，編排設(shè)計(jì)通俗易懂，就連完全零基礎(chǔ)的非 IT 人員都適合學(xué)習(xí)。不過(guò)，Head First 這本書沒有涉及到 HTML5 和 CSS3 的更新內(nèi)容。不過(guò)，Head First 有另一本書講解了 HTML5，叫《Head First HTML5 Programming》，不過(guò)，要熟悉 HTML5 的用法，還是要先掌握一點(diǎn) JavaScript 基礎(chǔ)。CSS3 方面 Head First 則沒有相應(yīng)的書籍，因此，我推薦另一本《CSS3實(shí)用指南》。

JavaScript 方面，我首推《JavaScript高級(jí)程序設(shè)計(jì)》這本書，書中內(nèi)容由淺入深，也是寫得通俗易懂，適合入門。另外，有些人會(huì)推薦《JavaScript權(quán)威指南》，但這本書主要還是一本字典書，略顯晦澀，其實(shí)不適合入門。不過(guò)《JavaScript高級(jí)程序設(shè)計(jì)》還是基于 ES5 的，為了補(bǔ)充 ES6 的內(nèi)容，推薦阮一峰的《ES6標(biāo)準(zhǔn)入門》，目前是第3版，內(nèi)容已經(jīng)覆蓋了最新版本的 ES2017。另外，因?yàn)檫@是一本開源教材，所以也可以直接去阮一峰的官網(wǎng)免費(fèi)閱讀，以下是鏈接地址：

ECMAScript 6 入門：http://es6.ruanyifeng.com/

另外，有一套系列書叫《You Don't Know JS》也要推薦給大家，也是開源教材，這套書會(huì)讓你對(duì) JavaScript 知其然也知其所以然，也包含了 ES6 的內(nèi)容，不過(guò)這套書面向初學(xué)者的，只適合用來(lái)進(jìn)階。也出版了中文翻譯的書籍，叫《你不知道的JavaScript》，目前只有上卷和中卷兩本，據(jù)評(píng)價(jià)，上卷的翻譯還不錯(cuò)，但中卷的翻譯則一般般，下卷不知道什么時(shí)候才出版。以下是系列書的github地址：

You Don't Know JS：https://github.com/getify/You-Dont-Know-JS

那么，這么多學(xué)習(xí)資源，我們應(yīng)該如何學(xué)習(xí)才高效呢？其實(shí)，和前面學(xué)習(xí) Android 和 iOS 時(shí)一樣，我們主要還是為了了解各種核心概念，我們不可能在短期內(nèi)熟悉所有知識(shí)點(diǎn)，因此，我還是和前面的文章一樣，也羅列出一些核心的知識(shí)點(diǎn)吧。

HTML基礎(chǔ)：以 w3school 或菜鳥的 HTML 教程為主，熟悉各種常用標(biāo)簽的用法，尤其是標(biāo)題、段落、鏈接、圖像、表格、列表、表單、區(qū)塊、布局、CSS、腳本等
CSS基礎(chǔ)：同樣以 w3school 或菜鳥的 CSS 教程為主，熟悉 CSS 語(yǔ)法和選擇器、樣式、框模型、定位等模塊的內(nèi)容
JavaScript基礎(chǔ)：首先作為一門編程語(yǔ)言，語(yǔ)言本身的基礎(chǔ)肯定要熟悉，包括數(shù)據(jù)類型、變量、運(yùn)算符、控制流、函數(shù)、對(duì)象等；另外，也要熟悉 DOM；BOM 簡(jiǎn)單了解下就可以了，使用場(chǎng)景不多
HTML5：HTML5 的新特性肯定要了解，內(nèi)容其實(shí)也不是很多，核心的就是 canvas、svg、對(duì)多媒體的支持、Web 存儲(chǔ)、應(yīng)用緩存、WebSocket等
CSS3：CSS3 也是要熟悉那些新特性，最核心的就是彈性盒子
ES6：ES6 自然也是要熟悉的，學(xué)好阮一峰的《ECMAScript 6 入門》教程就足夠了

Vue 體系

在開始正式學(xué)習(xí) Vue 之前，我們先來(lái)了解幾個(gè)概念，這樣才能更好理解 Vue 的一些設(shè)計(jì)理念。第一個(gè)概念是「單頁(yè)應(yīng)用程序」，就是只有一個(gè) Web 頁(yè)面的應(yīng)用，是只加載單個(gè) HTML 頁(yè)面并在用戶與應(yīng)用程序交互式動(dòng)態(tài)更新該頁(yè)面的 Web 應(yīng)用程序。第二個(gè)概念是「Virtual DOM」，即虛擬 DOM，簡(jiǎn)單說(shuō)就是一個(gè)模擬 DOM 樹的 JavaScript 對(duì)象，是為了避免大面積操作真實(shí) DOM 而導(dǎo)致的性能問(wèn)題。第三個(gè)概念是「響應(yīng)式系統(tǒng)」，通過(guò)數(shù)據(jù)模型和 View 的數(shù)據(jù)綁定，系統(tǒng)可以對(duì)數(shù)據(jù)模型的修改自動(dòng)響應(yīng)到視圖上。第四個(gè)概念則是「組件化」，Vue 和 React 都是通過(guò)組合各種組件組成應(yīng)用程序的。理解了這些概念，你才能更好的理解 Vue/React 這些前端框架體系。

還有，開發(fā)工具方面，我推薦 Visual Studio Code，一款免費(fèi)開源的輕量級(jí)代碼編輯器，macOS、Windows、Linux 都支持，有人評(píng)價(jià)說(shuō)比sublime開源，比atom更快，比webstorm更輕，所以說(shuō)，你值得擁有。

Vue 體系包含了很多技術(shù)棧，一套完整的 Vue 項(xiàng)目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，其中，vue + vue-router + vuex 又稱為 Vue 全家桶，因?yàn)檫@三套技術(shù)棧都是 Vue 官方推出的，其他框架和工具則是第三方的。那么，就讓我們來(lái)一個(gè)個(gè)了解這些技術(shù)棧吧。

vue：vue 即是 Vue.js 框架本身，是一套采用了 MVVM 模式的 JavaScript 框架，它和 React 一樣使用了 Virtual DOM，也提供了響應(yīng)式和組件化的視圖組件。不過(guò)與 React 不同的是，Vue 更推薦使用基于 HTML 的模板，這也是它相比 React 等其他框架更容易入門的原因。
vue-router：因?yàn)楝F(xiàn)在大多數(shù) Web 應(yīng)用都是單頁(yè)應(yīng)用，那要實(shí)現(xiàn)單個(gè)頁(yè)面里的不同視圖的跳轉(zhuǎn)，就要用到路由，vue-router 庫(kù)就是用來(lái)實(shí)現(xiàn)單頁(yè)應(yīng)用的路由功能。
vuex：vuex 是一個(gè)類 Flux 的狀態(tài)管理庫(kù)，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。關(guān)于什么是 Flux，可以參考阮一峰寫的一篇文章《Flux 架構(gòu)入門教程》。
vue-cli：vue-cli 是官方提供的命令行工具，用它可以快速創(chuàng)建 vue 項(xiàng)目。
axios：axios 是 vue 官方推薦的一個(gè)第三方 HTTP 庫(kù)，它是基于 promise 的，promise 是 ES6 的新增特性。
sass：CSS 的一款預(yù)處理器，簡(jiǎn)單入門可以看看阮一峰的一篇文章《SASS用法指南》。預(yù)處理器另外還有 less 和 stylus，不過(guò)不少大牛最推薦的還是 sass。
webpack：webpack 是打包構(gòu)建工具，可以類比為 Java 的 Gradle。不過(guò) webpack 是基于 node.js 的，所以要用熟 webpack，還要學(xué)點(diǎn) node.js 的基礎(chǔ)知識(shí)，至少要懂得配置 node.js 的運(yùn)行環(huán)境以及了解 node.js 的包管理工具 npm 的常用命令。

對(duì)于剛接觸當(dāng)代前端的人員來(lái)說(shuō)，存在太多陌生的概念需要了解，一時(shí)可能難以消化，Vue 的作者尤雨溪寫過(guò)一篇《新手向：Vue 2.0 的建議學(xué)習(xí)順序》，可以按照他的建議去學(xué)習(xí)。

學(xué)習(xí)資源方面，最好的應(yīng)該就是官方文檔了。另外，《Vue.js實(shí)戰(zhàn)》這本書有尤雨溪作推薦序，也可以買來(lái)看看，可以作為官網(wǎng)的補(bǔ)充資源。對(duì)于一些概念如果還不是很理解，也可以暫時(shí)先放一放，后面在做項(xiàng)目開發(fā)的過(guò)程中可能你就會(huì)理解了。

實(shí)戰(zhàn)入門

最關(guān)鍵的還是要通過(guò)項(xiàng)目實(shí)戰(zhàn)才能真正入門，這也是我一貫推崇的。也是和 Android、iOS 實(shí)戰(zhàn)一樣的建議，如果條件允許，你可以向上司申請(qǐng)參與自己公司的前端項(xiàng)目開發(fā)，然后開始去熟悉代碼和實(shí)現(xiàn)一些簡(jiǎn)單的工作任務(wù)，建議先從完成一些簡(jiǎn)單的UI界面開始。同樣，開源項(xiàng)目自然也是少不了，Vue 這塊的開源項(xiàng)目我推薦兩個(gè)：

vue2-happyfri：很簡(jiǎn)單的一個(gè)小項(xiàng)目，很適合入門練習(xí)
vue2-elm：用 vue 模仿餓了么的一個(gè)完整項(xiàng)目，重點(diǎn)推薦

另外，也附上一個(gè)匯總了眾多 vue 開源項(xiàng)目的 github 地址：https://github.com/opendigg/awesome-github-vue。

對(duì)于開源實(shí)戰(zhàn)項(xiàng)目的操作上，我依然還是建議先給應(yīng)用改皮膚開始，之后嘗試著自己做出一個(gè)類似的App。以上面的 vue 版餓了么項(xiàng)目為例，你先給它所有頁(yè)面先換個(gè)皮膚，包括背景、按鈕、文字等等，通通換掉一遍，然后嘗試自己做一個(gè)百度外賣或美團(tuán)外賣，當(dāng)你做完，應(yīng)付一般的 vue 項(xiàng)目開發(fā)就應(yīng)該沒有問(wèn)題了。之后也根據(jù)需要可以再去學(xué)下 React 體系，這時(shí)候?qū)W起來(lái)絕對(duì)不會(huì)吃力。

總結(jié)

前端開發(fā)入門，要學(xué)的技術(shù)棧真的很多，除了最基礎(chǔ)的 HTML/CSS/JavaScript，還包括 HTML5、CSS3、ES6，還要學(xué)習(xí)目前流行的 JavaScript 框架，我的建議是從 Vue 開始，容易入門，要掌握的技術(shù)棧包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解點(diǎn)基礎(chǔ)。最后，實(shí)戰(zhàn)項(xiàng)目我推薦了一個(gè)簡(jiǎn)單的小項(xiàng)目和一個(gè)完整的 vue 版餓了么項(xiàng)目。