今天說說 項(xiàng)目延期 

「 起因 」

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

而且后面有此系列課程推薦，報(bào)我名字或者公眾號(hào)名字可領(lǐng)取1000優(yōu)惠券，別說沒給福利

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

「 人生苦短 我們需要一個(gè)基線」

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

問題是，現(xiàn)實(shí)一點(diǎn)來說，一個(gè)武者，很難掌握所有的武功秘籍，因?yàn)槌兼霾坏桨?；所以如果有一種武功，能夠遠(yuǎn)攻和近攻，能逃跑能單挑，那就極好了。

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

技術(shù)也是一樣，我通過一套技術(shù)，每天用這套技術(shù)開發(fā)，不斷磨練，好過啥都學(xué)，啥都不深入，因?yàn)橹陨钊?，是因?yàn)槟悴粩嗳ビ茫芏鄷r(shí)候，一個(gè)技術(shù)名出來，就買書學(xué)，其實(shí)很傻很天真，因?yàn)榧夹g(shù)是手段，目的是解決開發(fā)問題，如果用不上，就毫無意義。

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

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

符合這些特點(diǎn)的技術(shù)，當(dāng)屬 Web 技術(shù)了，下個(gè)主題讓我們探討，它為什么符合。另外需要說明的是，這里說的 Web 技術(shù)，是我進(jìn)一步濃縮的技術(shù)體系，因?yàn)閺V義上的 Web 技術(shù)，其實(shí)涵蓋的面太廣了，我們需要進(jìn)一步，抽離出更符合這些特性的具體技術(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ù)，所以完全免費(fèi)，隨便用。另外，當(dāng)你進(jìn)入到 npmjs.com 網(wǎng)站，會(huì)發(fā)現(xiàn)無數(shù) Node.js 第三方庫，最重要的，這都是免費(fèi)的，開源的，這為我們的項(xiàng)目開發(fā)提供了一個(gè)強(qiáng)大的、免費(fèi)的開發(fā)團(tuán)隊(duì)！你可以直接用別人的開發(fā)成果！

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

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

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

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

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

我們所說的 HTML5 和 Node.js ，是前后端技術(shù)的代名詞，因?yàn)閲@它們的，是非常龐大的生態(tài)圈。這個(gè)我們會(huì)在下一主題中說明。

一個(gè)軟件可以分為前端和后端，比如一個(gè) 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ā)。這樣前后端的很多庫，都可以共享，既可以運(yùn)行前端，又可以運(yùn)行后端，提高了開發(fā)效率。

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

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

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

節(jié)省開發(fā)成本，是因?yàn)楣蛡蛞粋€(gè)程序員，可以同時(shí)開發(fā)前后端，工資要比兩個(gè)人少，而且由于 Node.js 本身的特點(diǎn)，可以節(jié)省公司服務(wù)器，這也是 paypal 之所以用 Node.js 技術(shù)重寫系統(tǒng)的原因。

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

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

綜上所述，這套技術(shù)對于公司來說，百利而無一害，所以掌握這套技術(shù)很好就業(yè)。

「 web前端技術(shù)體系 」

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

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

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

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

前端技術(shù)庫

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

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

上面介紹的部分前端技術(shù)，可以寫出程序來，但只能運(yùn)行在瀏覽器中，我們也可以用打包工具，讓開發(fā)好的程序，運(yùn)行在 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ù)庫程序，因?yàn)?nbsp; mongodb 數(shù)據(jù)庫的文檔結(jié)構(gòu)，和 javasript 的 json 是很類似的，另外 mongodb shell 用的也是 javascript 語言。

單元測試

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

打包工具

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

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

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

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

HTML5 標(biāo)簽和 DOM：這是前端最核心技術(shù)，為之后學(xué)習(xí)各種開發(fā)框架，打下堅(jiān)實(shí)基礎(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ā)后端程序的能力。

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

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

Git 命令與 github：可以對項(xiàng)目進(jìn)行版本管理，從而能團(tuán)隊(duì)開發(fā)項(xiàng)目。

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

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

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

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

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

如果通過這套學(xué)習(xí)路線圖學(xué)完，那么就業(yè)是毫無壓力的，但是做為有志向的碼奴，我們還需要展望未來和擴(kuò)展眼界。想要詳細(xì)查看學(xué)習(xí)知識(shí)點(diǎn)的，點(diǎn)我查看吧！傳送門在此。

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

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

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

擴(kuò)展眼界與未來展望

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

CQRS framework 我一手帶大的孩子

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

但遺憾的是，本文的標(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 寫的，難道不夠強(qiáng)大嗎？

后端是個(gè)籠統(tǒng)的概念，如果后端只是 Web 服務(wù)器端，那么 Node.js 開發(fā)是沒問題的，那么為什么給人的感覺，后端好像很牛逼呢？因?yàn)楹蠖酥傅氖侵С指卟l(fā)訪問、大型系統(tǒng)、復(fù)雜系統(tǒng)。

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

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

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

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

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

這是一個(gè)很大的話題，先吹到這里。

WebAssembly

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

寫了這么長最后，做一個(gè)小小的推薦。十年河?xùn)| 十年河西，從2016年開始，Web前端工程師開始大放異彩，人才需求和價(jià)值重要性都到了巔峰。

幫忙推薦一個(gè)csdn 的快速進(jìn)階：4個(gè)月從零成長為市場需求的前端工程師計(jì)劃。目的是：將學(xué)員培養(yǎng)有核心競爭力的前端開發(fā)者

（我沒收費(fèi)，完全義務(wù)推薦）想著沒壞處，有興趣的可以去，報(bào)前端你別鬧 可以半價(jià)或者免費(fèi)優(yōu)惠

課程成長階段：

第一階段：Web 全棧核心技術(shù)實(shí)戰(zhàn)（1～6周）

第二階段：Node.js 技術(shù)與開發(fā)工具實(shí)戰(zhàn) (7~10周)

第三階段：前端框架實(shí)戰(zhàn)（11～15周）

第四階段：移動(dòng)端與桌面程序開發(fā)（16～19周）

第五階段：畢業(yè)項(xiàng)目實(shí)戰(zhàn)

課程特色：

從零實(shí)戰(zhàn)，學(xué)習(xí)路徑分明，獨(dú)家體系大綱，有多名助教隨時(shí)答疑，不再困擾遇到的技術(shù)問題。在線學(xué)習(xí) 直播形式，無需脫產(chǎn)。

有專人（助教）來跟蹤你的學(xué)習(xí)進(jìn)度，并根據(jù)你的編程基礎(chǔ)來制定專屬學(xué)習(xí)計(jì)劃，保證不掉隊(duì)。講師有著深厚的經(jīng)驗(yàn)，產(chǎn)、學(xué)、研結(jié)合緊密。

報(bào)名加微信號(hào)：CSDN06

加好友時(shí)候

備注 '前端你別鬧' 可領(lǐng)取 半價(jià) 或者 全免課程優(yōu)惠券