這篇文章主要是面向小白用戶的，如果你有些基礎(chǔ)，當(dāng)然也建議你看看，尤其是最后一個主題，或許你能得到一些啟發(fā)。本文的觀點，純屬個人自以為是的想法，不是真理，僅供參考。

拋開具體技術(shù)細(xì)節(jié)，先主要談?wù)劤绦騿T如何更高效的，有選擇的學(xué)習(xí)技術(shù)。我能體會到選擇的輕松和樂趣，體會到身為技術(shù)人員和人類的平衡感。字里行間中，我要表達(dá)的是一種放棄與選擇的哲學(xué)，能品到這一點，我就很高興。

人生苦短 我們需要一個基線

古代小說里，高手如云，人們?yōu)榱松?，要掌握一套保命武功。其中，我最喜歡的是輕功，畢竟三十六計走為上策（狡詐的一笑）。說到底，武功和技術(shù)一樣，都是為了生存。

問題是，現(xiàn)實一點來說，一個武者，很難掌握所有的武功秘籍，因為臣妾做不到?。凰匀绻幸环N武功，能夠遠(yuǎn)攻和近攻，能逃跑能單挑，那就極好了。

玩“農(nóng)藥”也一樣，我發(fā)現(xiàn)英雄們各有優(yōu)缺點，但你又不可能什么英雄都練，因為臣妾也做不到啊，畢竟上場時就一個英雄，所以就需要選擇，我選擇的是呂布和趙云，他倆在游戲故事設(shè)定中是情敵，其實貂蟬喜歡的是趙云，我之所以選這兩個情敵成為基友，是因為符文一樣，這點很重要，五級符文真mde難攢，呂布和趙云戰(zhàn)斗力都很棒，我基本就練這兩個，現(xiàn)在的級別是永久鉆石，雖然不是最厲害的，但在王者的世界，確有一席之地。

技術(shù)也是一樣，我通過一套技術(shù)，每天用這套技術(shù)開發(fā)，不斷磨練，好過啥都學(xué)，啥都不深入，因為之所以深入，是因為你不斷去用，很多時候，一個技術(shù)名出來，就買書學(xué)，其實很傻很天真，因為技術(shù)是手段，目的是解決開發(fā)問題，如果用不上，就毫無意義。

回過頭來，我們發(fā)現(xiàn)“農(nóng)藥”中選英雄，和選自己的技術(shù)體系是一樣的。我們狹義的目的，是想通過一種技術(shù)（手段），能夠開發(fā)盡可能多的應(yīng)用程序。

那么如果有這種技術(shù)，最好滿足以下幾個特點：開源，前后端全棧式開發(fā)，前后端代碼可以共享，最好在有生之年不被淘汰的，最重要的是好就業(yè)的。

符合這些特點的技術(shù)，當(dāng)屬 Web 技術(shù)了，下個主題讓我們探討，它為什么符合。另外需要說明的是，這里說的 Web 技術(shù)，是我進一步濃縮的技術(shù)體系，因為廣義上的 Web 技術(shù)，其實涵蓋的面太廣了，我們需要進一步，抽離出更符合這些特性的具體技術(shù)，形成一套便于開發(fā)的 Web 技術(shù)。所以，下面講的是狹隘的 Web 技術(shù)。

Web 全棧式開發(fā)

HTML5 與 Node.js 技術(shù)，可以讓程序員做到 Web 全棧式開發(fā)。這套技術(shù)是標(biāo)準(zhǔn)的、開源的。

HTML5 大家都聽過，百度就可以知道它的定義啊，歷史啊等一些信息，所以，這里不再贅述。HTML5 是標(biāo)準(zhǔn)化的技術(shù)，Node.js 是開源技術(shù)，所以完全免費，隨便用。另外，當(dāng)你進入到?http://npmjs.com?網(wǎng)站，會發(fā)現(xiàn)無數(shù) Node.js 第三方庫，最重要的，這都是免費的，開源的，這為我們的項目開發(fā)提供了一個強大的、免費的開發(fā)團隊！你可以直接用別人的開發(fā)成果！

這套技術(shù)不會被淘汰

學(xué)習(xí)是有成本的，時間是寶貴的，因為生命寶貴；人都是想用更多時間陪陪家人，陪陪女朋友和基友，也喜歡玩玩“農(nóng)藥”，去迪士尼當(dāng)回小孩兒；如果你愛技術(shù)勝于當(dāng)人的樂趣，那么恭喜你！至少我們不太喜歡，學(xué)個一溜十三招，最后學(xué)的東東淘汰了或過時了。

HTML5 技術(shù)是標(biāo)準(zhǔn)的，我們用到的瀏覽器都支持他，所以在可預(yù)見的未來不會被淘汰。而 Node.js 是開源的，不受一個公司的控制，卻受到各個大咖公司的贊助和支持，包括微軟、因特爾、IBM …所以 Node.js 在可預(yù)見的未來，也不會被淘汰。

所以學(xué)習(xí) HTML5 and Node.js 技術(shù)可長久有效。

這套技術(shù)可前后端全棧式開發(fā)

我們所說的 HTML5 和 Node.js ，是前后端技術(shù)的代名詞，因為圍繞它們的，是非常龐大的生態(tài)圈。這個我們會在下一主題中說明。

一個軟件可以分為前端和后端，比如一個 App 分為客戶端和服務(wù)器端程序。通過 HTML5 技術(shù)可以開發(fā)客戶端程序，服務(wù)器端程序可以用 Node.js 開發(fā)。

那么，為什么 HTML5 要與 Node.js 構(gòu)成前后端全棧技術(shù)呢？ 而不能是 html5 ＋ php 或其它呢？也不是不能，而是前者更有優(yōu)勢。

瀏覽器程序是采用 Javascript 語言編寫的，而服務(wù)器端的 Node.js 程序，也是用 Javascript 語言編寫的，所以前后端可以統(tǒng)一使用一種編程語言開發(fā)。這樣前后端的很多庫，都可以共享，既可以運行前端，又可以運行后端，提高了開發(fā)效率。

學(xué)好這套技術(shù)好就業(yè)

上面說了一些，這套技術(shù)的優(yōu)勢所在，那么為什么說，學(xué)好這套技術(shù)好就業(yè)呢？要回答這個問題，還需更進一步說明，使用這套技術(shù)到底能干什么。

我們掌握這套技術(shù)后，可以開發(fā)全端程序，比如 iPhone Android 的 APP ，可以開發(fā) Web 程序，可以開發(fā)桌面應(yīng)用程序，甚至可以開發(fā)物聯(lián)網(wǎng)程序等等，更重要的是它節(jié)省了開發(fā)成本，提高了開發(fā)效率。

節(jié)省開發(fā)成本，是因為雇傭一個程序員，可以同時開發(fā)前后端，工資要比兩個人少，而且由于 Node.js 本身的特點，可以節(jié)省公司服務(wù)器，這也是 paypal 之所以用 Node.js 技術(shù)重寫系統(tǒng)的原因。

而提高開發(fā)效率，是因為使用這套技術(shù)，可以寫一套程序，運行在 Android iPhone PC 和 服務(wù)器端，當(dāng)然這樣說有些夸張，多少會更改一些，但基本上做到了，一次編寫到處運行。

再有，Web 前端肯定要用到 HTML5 技術(shù)，后端可能會用到其他技術(shù)，但即便后端程序不用 Node.js 開發(fā)，或多或少都要用到 Node.js ，因為圍繞它誕生的一些工具，在開發(fā)中必然會用到的，比如 Webpack ，Gulp等 Node.js 相關(guān)技術(shù)。

Web 前端技術(shù)知識體系

前面講了兩點。第一點，說明人精力有限，有空要多陪陪基友和女友，所以我們要選擇一套全棧式開發(fā)技術(shù)，幫助我們輕松開發(fā)應(yīng)用程序，這就是 HTML5 + Node.js 技術(shù)體系。第二點，吹了半天，來說明這套技術(shù)多多好。

那么，HTML5 和 Node.js 就是兩種技術(shù)嗎？當(dāng)然不是了，衍生出的技術(shù)好多好多。HTML5 是什么，你 google 吧，我這里不粘貼了，可好？ 如果你說：google 臣妾做不到，那就百度吧。

Web 前端程序，實際上運行環(huán)境就是瀏覽器，現(xiàn)代瀏覽器已經(jīng)是一個平臺了，提供了很多 API ，我們叫做 Web API。編寫一個 Web 前端程序，需要用到的技術(shù)有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是這些技術(shù)的總稱。

那么，用這三個技術(shù)確實能寫出程序來了，但是從頭自己些也是很慢的，可以用很多工具庫和框架，幫助我們快速開發(fā)。

前端技術(shù)庫

比較火的技術(shù)包括： JQuery , Angular2 , React , Redux , Vue.js 等，這些工具庫各有千秋，比如，比較小的程序，用 JQuery 就可以搞定了，如果比較復(fù)雜的，可以用 React ，Angular2 或 Vue.js 庫。

開發(fā) Android 、iPhone 和桌面程序

上面介紹的部分前端技術(shù)，可以寫出程序來，但只能運行在瀏覽器中，我們也可以用打包工具，讓開發(fā)好的程序，運行在 Android iPhone 和 電腦上。

PhoneGap 和 React-Native 就可以用我們已知的技術(shù)，來開發(fā)Android 和 iPhone 程序，而用 electron 就可以把程序打包成 PC 電腦桌面程序。

掌握以上技術(shù)，就讓我們可以開發(fā)各種客戶端程序了。

服務(wù)器端技術(shù)

那么，服務(wù)器端程序用 Node.js 就可以了嗎？ 你當(dāng)然可以從頭寫服務(wù)器端程序，最好是用現(xiàn)成的框架。比如 Express koajs 等框架，來編寫 Web 服務(wù)器端程序。

數(shù)據(jù)庫也是需要的，要不數(shù)據(jù)就沒法持久化和查詢了，我推薦用 mongodb 數(shù)據(jù)庫，采用 mongoosejs 庫來寫 Node.js 的數(shù)據(jù)庫程序，因為 mongodb 數(shù)據(jù)庫的文檔結(jié)構(gòu)，和 javasript 的 json 是很類似的，另外 mongodb shell 用的也是 javascript 語言。

單元測試

到目前為止，前后端程序所需技術(shù)，都夠用了。那么，還有一個問題，就是測試！ 程序開發(fā)后，再整體測試，會出現(xiàn)很多幽靈bug，也就是很難找到問題根源bug。所以，最好是單元測試，就是寫點代碼就測試一下，遇到問題及時解決，而不是 bugs 攢多了到最后無法解決。這方面的單元測試工具也有很多，推薦 Node.js 后端程序用 mocha 做單元測試，前端用 jasmine + karma 做單元測試，因為karma 可以讓我們在終端就能看到多個瀏覽器測試結(jié)果，而不是各種瀏覽器，挨著個的刷新看結(jié)果，前端瀏覽器測試最麻煩，因為有兼容問題，所以用 karma 大大提高了我們測試效率。

打包工具

像 Webpack , gulp 等技術(shù)也是需要掌握的，可以幫助我們自動打包程序。

Web 前端技術(shù)學(xué)習(xí)路線圖

上面說了這么多，到底如何一步步掌握這些技術(shù)呢？ 下面推薦一個學(xué)習(xí)路線圖，希望對初學(xué)者有幫助。

Javascript 語言：全棧開發(fā)中，用的編程語言就是 javascript

HTML5 標(biāo)簽和 DOM：這是前端最核心技術(shù)，為之后學(xué)習(xí)各種開發(fā)框架，打下堅實基礎(chǔ)。

CSS3：學(xué)習(xí)通過 css 開發(fā)網(wǎng)頁和各種可視 UI 組件。

SASS：利用 sass 語言，開發(fā)復(fù)雜的頁面 css

Node.js：掌握Node.js 核心 API ，具備后端開發(fā)能力。

Express 5.x 框架：掌握 Express 框架，從而具備快速開發(fā)后端程序的能力。

http://socket.io庫：讓前后端通過websocket協(xié)議通信，是web 開發(fā)游戲、聊天等程序必備技術(shù)。

Mongoose 框架：可以讓程序具備文檔數(shù)據(jù)儲存能力

Git 命令與 github：可以對項目進行版本管理，從而能團隊開發(fā)項目。

Gulp 構(gòu)建工具實戰(zhàn)：通過 gulp 工具，靈活對項目進行構(gòu)建。

Webpack：可以用和 Node.js 后端模塊化方式，開發(fā)前端程序，從而能開發(fā)大型系統(tǒng)。

Jasmine & karma：可以利用 Jasmine & karma 輕松實現(xiàn)，多種瀏覽器同時進行單元測試，而不必切換界面。

前端相關(guān)框架：JQuery ／ Bootstrap ／ Vue.js ／React ／ Angular通過框架幫我我們快速開發(fā)程序

移動端與桌面程序開發(fā)工具：phonegap ／ react-native / electron / 微信小程序開發(fā)，這套工具，基本上只是打包工具，和提供了一些特定平臺 API ，開發(fā)還是使用之前的 Web 技術(shù)。

如果通過這套學(xué)習(xí)路線圖學(xué)完，那么就業(yè)是毫無壓力的，但是做為有志向的碼奴，我們還需要展望未來和擴展眼界。

一提到擴展眼界，有些人就會，瘋狂的拿來一本永遠(yuǎn)不用技術(shù)的書，啃起來，比如你是用 html5 寫前端界面的，永遠(yuǎn)用不上 QT 寫界面，你買本 QT 津津有味的學(xué)起來，如果你感覺不錯，那就學(xué)吧。

其實，我們學(xué)任何技術(shù)，都要講究是否有用，技術(shù)本身是冰冷的，如果沒有價值，或用不上就不必學(xué)，除非你理論計算機學(xué)家，這個職位我編出來的，不造有沒有這個崗位。

廢話不多說了，我們來擴展一下有用的眼界，展望一下有用的未來！

擴展眼界與未來展望

前文提到的，說實話也只是冰山一角，這個一角也確實能開發(fā)，幾乎所有的應(yīng)用程序了，但是冰山的下半部分，卻讓我們更加神往！ 雖然技術(shù)是冰冷的，但做為活力四射的技術(shù)，還是會感受到一絲震撼人心的靈光！下面我挑兩個高端技術(shù)，來分享一下。

CQRS framework 我一手帶大的孩子

Web 前端開發(fā)人員，記住你們只是前端！ 不要越界好不好！你們沒這個本事！

但遺憾的是，本文的標(biāo)題 “如何學(xué)習(xí) Web 前端技術(shù)？” 真的只是謙虛說法，誰說我們不能開發(fā)后端程序了？！

Node.js 為后端開發(fā)提供了基石，望著老牌技術(shù)的一些框架啊，數(shù)據(jù)分析相關(guān)的框架啊，給人的感覺 Node.js 還很年輕，開發(fā)一些簡單的 Web CURD 程序就得了。但是，這些并不正確，隨著 Node.js 本身能量，和各種第三方庫讓 Node.js 可以開發(fā)微服務(wù)，大型系統(tǒng)，比如 paypal 系統(tǒng)就是用 Node.js 寫的，難道不夠強大嗎？

后端是個籠統(tǒng)的概念，如果后端只是 Web 服務(wù)器端，那么 Node.js 開發(fā)是沒問題的，那么為什么給人的感覺，后端好像很牛逼呢？因為后端指的是支持高并發(fā)訪問、大型系統(tǒng)、復(fù)雜系統(tǒng)。

也就是系統(tǒng)很龐大，用一般的 CURD 簡單開發(fā)模式，無法勝任這種復(fù)雜性。那么，這個其實和技術(shù)無關(guān)；而是，是否有應(yīng)對開發(fā)復(fù)雜系統(tǒng)的框架。

CQRS是 DDD 領(lǐng)域驅(qū)動設(shè)計理論的落地框架，我為 Node.js 開發(fā)了 CQRS framework ， 從而可以讓 Node.js 具備開發(fā)超大型系統(tǒng)的能力，當(dāng)然它不只限于此！

來來來，讓我們“吹”一下吧！

Node.js CQRS 框架，適合于開發(fā)大中小程序，也很適合開發(fā)微服務(wù)，它具有橫向無限擴展機制，可以利用多cpu和多服務(wù)器分布式性能，具備事件驅(qū)動、saga長故事、saga回輪、actor模式、事件回溯。在未來，也將運行在瀏覽器，可替代 redux 和其他數(shù)據(jù)管理框架，將統(tǒng)一管理業(yè)務(wù)數(shù)據(jù)，通過 cqrs framework 強大的兼容性和 js 的簡單性相結(jié)合，實現(xiàn)無所不在的開發(fā)便利。

最近，Node.js CQRS 框架增加了 DCI 特性，從而完成 CQRS + DDD + Actor + DCI 的有機整合，為開發(fā)大 中小 項目提供強大的核心支持，分布式／微服務(wù)，或普通的 react 應(yīng)用 （cqrs將代替類redux框架，提供更完善、更可靠和更強悍的技術(shù)支持），將在一開始，給程序員一種可控性，而不是一盤散沙，無論多大規(guī)模的項目，可控性、可擴展性、無限橫向擴展性，都是成功項目的必備。

這是一個很大的話題，先吹到這里。

WebAssembly

WebAssembly 是瀏覽器和 Node.js 環(huán)境下，新加入的程序格式，簡單來說，就是讓運行效率接近原生程序。未來的新開發(fā)應(yīng)用軟件，基本上采用 HTML5 + Node.js 前后端全棧來開發(fā)，因為開發(fā)效率高，而程序中的一些需要高繁運算部分，采用 Javascript/Typescript 開發(fā)后轉(zhuǎn)換為字節(jié)碼，但不應(yīng)把整個項目轉(zhuǎn)換為字節(jié)碼二進制，那是很傻的。不準(zhǔn)確的說 95%＋的動態(tài)JS代碼加 <5% JS/TS轉(zhuǎn)為wasm二進制的字節(jié)碼，構(gòu)成了完整的程序。

先說這些吧，還有很多要說的，不過留到下次吧。希望本文對你有些啟發(fā)！

作者：Python實戰(zhàn)講師團
鏈接：經(jīng)驗分享：如何系統(tǒng)學(xué)習(xí) Web 前端技術(shù)？
來源：CSDN

想要了解更多的同學(xué)可以點擊：

【尚學(xué)堂】web前端HTML教程、web前端CSS教程