JavaScript的流行促進(jìn)了一個(gè)非?；钴S的由相關(guān)技術(shù)，框架和庫組成的生態(tài)圈的發(fā)展。整個(gè)生態(tài)圈的多樣性和活躍性越來越強(qiáng)，這讓許多人變得越來越困惑。 你應(yīng)該了解些什么技術(shù)呢?
我們應(yīng)該將時(shí)間花費(fèi)在哪里才能獲得最大的收益？ 現(xiàn)在公司招聘要求的技術(shù)棧包括哪些？哪項(xiàng)技術(shù)的發(fā)展?jié)摿ψ畲螅?/p>
當(dāng)前需要掌握的最重要的技術(shù)是什么？
這篇文章高度概括了你需要了解的技術(shù)，并附上了每個(gè)技術(shù)對(duì)應(yīng)的鏈接，通過鏈接中內(nèi)容你可以詳細(xì)了解該技術(shù)。
記住，在學(xué)習(xí)的過程中一定要多動(dòng)手寫代碼。 你可以通過 Codepen.io 網(wǎng)站來交互式地寫代碼；或者如果你在學(xué)習(xí)ES6的話，可以嘗試通過 Babel REPL來對(duì)其進(jìn)行轉(zhuǎn)碼。
這將會(huì)是一份很長(zhǎng)的清單，但請(qǐng)不要?dú)怵H。相信自己，你能夠做到的！如果你看著這份清單，擔(dān)心到什么時(shí)候才能學(xué)會(huì)構(gòu)建現(xiàn)代應(yīng)用程序所需的一切，請(qǐng)先移步 “Why I’m Thankful for JavaScript Fatigue”。然后沉下心來開始我們的學(xué)習(xí)：
文章中的有些內(nèi)容是 可選的*，這里可選的意思是：如果你對(duì)這些內(nèi)容感興趣的話，我向你推薦這些知識(shí)；或者，找工作的時(shí)候可能會(huì)需要了解它們，但是不是非得學(xué)習(xí)它們。 任何標(biāo)有星號(hào)(如例*)的都是可選的。
任何沒有標(biāo)有 “*” 的內(nèi)容都需要學(xué)習(xí)，但不要覺得有義務(wù)去學(xué)習(xí)每項(xiàng)內(nèi)容。你需要知道這些非可選的知識(shí)，但你不一定需要成為該主題絕對(duì)的專家。
在找一份JavaScript工作之前，你應(yīng)該熟練掌握相關(guān)的JS基礎(chǔ)知識(shí)：
.then()方法綁定一個(gè)回調(diào)函數(shù)，它在諾言兌現(xiàn)的時(shí)候被調(diào)用。 而且，諾言兌現(xiàn)時(shí)候的值會(huì)傳遞到你的回調(diào)函數(shù)比如： doSomething().then(value => console.log(value));const doSomething = (err) => new Promise((resolve, reject) => { if (err) return reject(err); setTimeout(() => { resolve(42); }, 1000);});const log = value => console.log(value);// Using returned promisesdoSomething().then( // on resolve: log, // logs 42 // on reject (not called this time) log);// remember to handle errors!doSomething(new Error('oops')) .then(log) // not called this time.catch(log); // logs 'Error: oops'
lodash/fp.
React 是一個(gè)JavaScript庫,用于構(gòu)建用戶界面,由Facebook創(chuàng)建. 它是基于單向數(shù)據(jù)流的概念, 意味著每個(gè)更新周期:
這是雙向數(shù)據(jù)綁定，在DOM變化的地方可直接更新ID, DOM的變化可以直接更新數(shù)據(jù) (e.g., 類似Angular 1 和 Knockout). 使用雙向綁定, DOM渲染過程中對(duì)DOM的更新(稱為消化周期 Angular 1) 有可能在觸發(fā)繪圖階段之前就完成了, 這樣也造成回流和重繪?—?減慢了性能.
React沒有規(guī)定數(shù)據(jù)管理系統(tǒng), 但是推薦使用 Flux-based. React’s ，它是單向數(shù)據(jù)流的方法，借鑒于函數(shù)式編程不可變數(shù)據(jù)結(jié)構(gòu)改變了我們對(duì)前端框架結(jié)構(gòu)的思考方式.
更多關(guān)于 React & Flux 架構(gòu)的內(nèi)容請(qǐng)閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.
Redux 為你的 App 提供了事務(wù)的、確定性狀態(tài)管理的功能。在 Redux 中，可以對(duì) action 對(duì)象流進(jìn)行迭代來減少應(yīng)用的狀態(tài)。想要了解為什么這個(gè)問題很重要，請(qǐng)閱讀 “10 Tips for Better Redux Architecture.” 。想要開始學(xué)習(xí) Redux ，可以閱讀 Redux 創(chuàng)始人發(fā)布的超棒的教程。
Redux是必須掌握的一項(xiàng)知識(shí), 即便是你在生產(chǎn)項(xiàng)目從來沒有使用過Redux .
為什么必須要掌握學(xué)習(xí)? 因?yàn)樗鼤?huì)給你大量的經(jīng)驗(yàn)和指導(dǎo)，讓你了解使用純函數(shù)和教你新的思考方式reducers的價(jià)值, 一般的函數(shù)編程遍歷集合的數(shù)據(jù),只是能提取一些值. Reducers 通常是用于數(shù)組原型方法Array.prototype.reduce被 添加到JS的規(guī)范.
Reducers優(yōu)勢(shì)遠(yuǎn)遠(yuǎn)超越了僅僅使用數(shù)組，它的作用對(duì)工作是很重要很有幫助，因此學(xué)習(xí)一種新的 Reducers知識(shí)是很有價(jià)值的.
Angular 2 是谷歌開發(fā)的非常受歡迎的一個(gè)Angular框架. 因?yàn)樗偪竦牧餍?它會(huì)使你的簡(jiǎn)歷看著非常棒?—但是我強(qiáng)烈建議你首先學(xué)習(xí) React.
我有一些建議關(guān)于 React 超越 Angular 2 因?yàn)?
基于這些原因我建議你學(xué)習(xí)React, 我把 Angular 2 設(shè)置為可選學(xué)的*. 如果你有強(qiáng)烈的偏愛Angular 2 , 兩者隨意使用.首先 主要學(xué)習(xí)Angular 2 , 然后考慮React 選學(xué). 這兩個(gè)的任何一個(gè)都會(huì)是你的簡(jiǎn)歷看起來很棒.
不論你選擇哪一個(gè),試著去關(guān)注它至少6個(gè)月?—?1年之后再去學(xué)習(xí)另一個(gè). 要真正精通是需要時(shí)間的歷練.
RxJS is JavaScript的響應(yīng)編程實(shí)用程序的集合. 認(rèn)為這是lodash流. 響應(yīng)式編程已經(jīng)正式官方的進(jìn)入JavaScript的使用場(chǎng)景. ECMAScript可見提案草案階段1, and RxJS 5 規(guī)范化標(biāo)準(zhǔn)的實(shí)現(xiàn).
我非常喜歡 RxJS,如果你只是一下子就把整件事全部導(dǎo)入, 它真的可以擴(kuò)大你的包大小 (會(huì)產(chǎn)生很多的數(shù)據(jù)流量，套餐不夠用了). 為了減小bundle生產(chǎn)環(huán)境文件的大小, 不要導(dǎo)入所有程序接口. 使用補(bǔ)丁 imports, 替代:
import { Observable } from 'rxjs/Observable';// then patch import only needed operators:import 'rxjs/add/operator/map';import 'rxjs/add/observable/from';const foo = Observable.from([1, 2, 3]);foo.map(x => x * 2).subscribe(n => console.log(n));
使用片段式導(dǎo)入減小和壓縮生產(chǎn)文件到~200k. 非常劃算. 它會(huì)使你的應(yīng)用程序更快.
有幾個(gè)人問我為什么沒有列出他們最喜歡的框架。 我考慮的一個(gè)重要標(biāo)準(zhǔn) “這對(duì)實(shí)際工作有用嗎?”.
是的，這是一個(gè)受歡迎的挑戰(zhàn), 這些有利條件用一個(gè)框架去開發(fā)一個(gè)重要的條件在哪里你花費(fèi)你的學(xué)習(xí)時(shí)間長(zhǎng)短.
為了回答這個(gè)問題，我看了一些關(guān)鍵指標(biāo)。 一、谷歌趨勢(shì)。 如果你想看看谷歌趨勢(shì)圖, 記住按主題選擇, 不是關(guān)鍵詞, 僅僅靠幾個(gè)簡(jiǎn)單的關(guān)鍵詞很難做出正確的判斷. 換句話說, 這些都是主題聚焦的趨勢(shì), 不是關(guān)鍵字搜索:
Google Trends 關(guān)于 JS 的主題
這個(gè)圖表告訴我們感興趣的幾個(gè)項(xiàng)目的信息。如果人們?cè)谒阉鬟@些項(xiàng)目，他們可能正在探索該選擇什么樣的項(xiàng)目，或者是尋求幫助和文檔。這個(gè)是一個(gè)對(duì)項(xiàng)目受歡迎程度的一個(gè)比較不錯(cuò)的指標(biāo)。
另外一個(gè)很好的數(shù)據(jù)來源是 Indeed.com，這里匯集了來自各種源頭的招聘信息數(shù)據(jù)列表。近年來，工作崗位的受歡迎程度急劇下降，但是他們?nèi)匀皇占俗銐蚨嗟臄?shù)據(jù)來做相對(duì)的比較，可以告訴你人們?cè)谏a(chǎn)項(xiàng)目和工作中實(shí)際使用的技術(shù)：
為了重現(xiàn)這些結(jié)果，請(qǐng)搜索框架名稱 javascript，然后讓地址欄為空。你就可以清晰的看到：
Angular 和 React 占據(jù)主導(dǎo)地位：其他的暫時(shí)無法比擬。(除了 jQuery ，這是大量網(wǎng)站正在使用的框架，包括非 App，因?yàn)樗趲缀跛械睦吓f系統(tǒng)中使用，包括廣受歡迎的 CMS —— WordPress）。
你可能會(huì)看到 Angular 相比起 React 有較明顯的優(yōu)勢(shì)。那為什么我會(huì)首先推薦 React 呢？因?yàn)椋?/p>
換句話說，React 贏得了媒體和客戶滿意度的戰(zhàn)斗，如果這個(gè)勢(shì)頭繼續(xù)保持，React 非常有機(jī)會(huì)能夠干掉 Angular ，成為前端框架的主導(dǎo)。
Angular 2 有機(jī)會(huì)扭轉(zhuǎn)這一局面，所以它卷土重來，但是到目前為止，React 還是打了一場(chǎng)很好的戰(zhàn)斗。
需要關(guān)注的框架：
編者注：關(guān)于 MobX 和 Redux 的比較請(qǐng)閱讀這篇文章。
現(xiàn)在你已經(jīng)研究了這些熱門技術(shù), 閱讀 “如何在5個(gè)簡(jiǎn)單步驟中開始你的第一個(gè)開發(fā)工作”.
提高你的JavaScript技能. 如果你還沒有進(jìn)入角色, 你將會(huì)錯(cuò)過很多.
“JavaScript應(yīng)用程序編程”(O’Reilly) 的作者是埃里克·艾略特 , “學(xué)習(xí)JavaScript和Eric Elliott”. 他曾經(jīng)的軟件經(jīng)驗(yàn) Adobe 系統(tǒng), Zumba 健身, 《華爾街日?qǐng)?bào)》, ESPN, 英國(guó)廣播公司, 頂級(jí)錄音藝術(shù)家包括 亞瑟,弗蘭克海洋,金屬樂隊(duì), and many more.
他大部分時(shí)間都呆在舊金山灣，和世界上最漂亮的女人在一起.
聯(lián)系客服
