2017年，你需要學(xué)習的JavaScript框架和主題

　　點(diǎn)擊關(guān)注▲一燈科技

　　知識|經(jīng)驗|資訊|資料四大版塊

　　中國專(zhuān)業(yè)的Web前端高端培訓機構

　　

　　原文：#.wjdqwi2hr

　　

　　隨著(zhù)JavaScript的普及，應運而生了一個(gè)非?；钴S的集技術(shù)，框架和庫為一體的生態(tài)圈。由于這個(gè)充滿(mǎn)多樣性的和活力的生態(tài)圈，因此大家非常困惑。應該學(xué)習哪種技術(shù)？

　　你應該投資哪一種技術(shù)才能獲得最大的收益？公司現在最需要招的人最需要哪一種技術(shù)堆棧？哪一個(gè)發(fā)展空間最大？

　　現在最需要了解的是哪個(gè)技術(shù)？這篇文章高度概括了你所需要了解的內容，同時(shí)附上了鏈接，你可以自行了解。

　　記住，當你正在實(shí)驗一些新的代碼，你可以在Codepen.io上玩玩，如果你在學(xué)習ES6，那么你可以看看如何使用Babel REPL編譯。

　　這個(gè)學(xué)習的列表很長(cháng)，但是你不用感到灰心。你可以做到的！如果你在研究這列表，擔憂(yōu)該如何學(xué)習這一切，如何創(chuàng )建現代APP，移步閱讀“為什么我該感謝JavaScript疲勞”。然后開(kāi)始認真學(xué)習，動(dòng)起來(lái)。

　　選擇性學(xué)習的一個(gè)注意事項

　　有些內容是完全可選的，也就是說(shuō)，如果你對我推薦東西此感興趣，或者工作需要，但是你不能感覺(jué)是被迫學(xué)的。每一個(gè)打了星號(*)的（比如example*）就是可選的。

　　沒(méi)有打*的，都是必須學(xué)的，但是并不是所有的都是一定要學(xué)透的，你需要熟悉每一樣內容。你需要了解可選的內容，但是你完全沒(méi)有必要精通所有的。

　　JavaScript & DOM 基礎

　　在你找到JavaScript的工作之前，你需要掌握JavaScript的基礎：

　　工具React

　　React是一個(gè)由Facebook創(chuàng )建的用于構建用戶(hù)接口的JavaScript庫。 這是一個(gè)基于單向數據流的概念，意味著(zhù)對于每次周期更新：

　　React將輸入變成組件作為props，然后如果特定的Dom部分的數據發(fā)生了改變，那么就會(huì )只重新渲染滿(mǎn)足條件的部分。在這個(gè)階段更新的數據，直到下一次渲染階段都不能重新觸發(fā)渲染。

　　事件處理階段 — DOM渲染之后，React*敏*感*詞*事件, 將事件委托到DOM樹(shù)的根節點(diǎn)上的一個(gè)單獨*敏*感*詞*器 （為了更好的性能）。 你可以*敏*感*詞*這些事件并響應更新數據。

　　數據的任何改變,步驟重新從第一步開(kāi)始。

　　這和雙向綁定形成了對比，雙向綁定是DOM的改變會(huì )改變數據（比如，Angular 1 和Knockout）。使用雙向綁定，當DOM渲染的時(shí)候（在A(yíng)ngular 1中稱(chēng)之為digest cycle），DOM的改變可能會(huì )在渲染完成前重新觸發(fā)渲染階段，導致重新載入DOM和重繪——降低了性能。

　　React沒(méi)有規定一個(gè)數據管理系統, 但是Flux-based方法是推薦的。 React的單向數據流方法，借鑒了函數編程和不可變的數據結構，改變了我們眼中的前端框架架構。

　　想了解更多關(guān)于React和Flux架構, 請閱讀“學(xué)習編程最好的方法就是開(kāi)始編程: 從創(chuàng )建App中學(xué)習App架構”.

　　Redux

　　Redux給你的APP提供了事務(wù)處理的（transactional）, 確定性（deterministic）狀態(tài)管理。在Redux中，我們通過(guò)迭代大量的操作對象，以減少當前應用程序狀態(tài)。想知道為什么這個(gè)很重要, 更多請看“給更好的Redux架構的10個(gè)建議.”。想要開(kāi)始使用Redux, 學(xué)習Redux的創(chuàng )建者Dan Abramov的極佳教程:

　　Redux對于生產(chǎn)項目是強制學(xué)習的，即使你從未用過(guò)Redux。

　　為什么？因為它給了你大量的練習，教會(huì )你純函數的價(jià)值，以及教會(huì )你新的思考reducers的方式, 這是迭代數據集和從中獲取數據的通用的函數。 reducers 如此實(shí)用，以至于A(yíng)rray.prototype.reduce都被加入了JS規范。

　　Reducer不僅僅對于組數（array）是重要的，并且學(xué)習用Reducer的新方式處理問(wèn)題，本身就十分有價(jià)值。

　　Angular 2*

　　Angular 2是繼來(lái)自谷歌的廣受歡迎的Angular之后的框架。因為這太受歡迎了， 這會(huì )讓你的簡(jiǎn)歷看上去十分高大上——不過(guò)我建議還是先學(xué)React。

　　與Angular 2相比，我更愛(ài)React，因為:

　　這個(gè)更簡(jiǎn)單, 以及……

　　這十分受歡迎，并且有許多相關(guān)職位 (當然 Angular 2也是的)

　　因為這個(gè)原因，我推薦學(xué)習React, 但是我認為 Angular 2完全是可選的*。 如果你非常喜歡Angular 2， 那么就換過(guò)來(lái). 先學(xué)Angular 2，將React列為可選。 每一個(gè)對你的簡(jiǎn)歷來(lái)說(shuō)都是受益匪淺的。

　　無(wú)論你選哪一個(gè)，試著(zhù)集中精力學(xué)習至少半年到一年，之后再去學(xué)習另一個(gè)。這需要時(shí)間，你才能真正熟練掌握。

　　RxJS*

　　RxJS是JavaScript的一些響應式編程工具?？梢援斪鱈odash中的流。響應式編程已經(jīng)正式登陸JavaScript的舞臺。ECMAScript的Observables提案是階段一的初稿, 而RxJS 5+是Observables權威標準的實(shí)現。

　　盡管我非常愛(ài)RxJS, 但是如果你一次性加載所有的包你的包會(huì )膨脹地很厲害（這里有許多操作）。為了控制包的大小, 不要加載所有的內容。請使用補丁加載：

　　使用補丁加載能夠將你的包對于rxjs依賴(lài)減少大約200k。這真的非常劃算。這會(huì )讓你的app變得更快。

　　EDIT: 為什么你不列出 ?

　　許多人問(wèn)我，為何不列出他們喜歡的框架。我評判框架的其中一個(gè)標準就是“這真的會(huì )在工作上用到？”。

　　是的，有一個(gè)框架的人氣投票。但是當你決定耗費時(shí)間專(zhuān)注學(xué)習一個(gè)框架，這是否會(huì )脫穎而出是個(gè)非常重要的考慮因素。

　　為了回答這個(gè)問(wèn)題，我看了一些關(guān)鍵指標。首先，谷歌趨勢（Google Trends）。如果你想要重現這個(gè)谷歌趨勢圖表，記得要選擇主題（topic)，而不是關(guān)鍵字（keyword），因為這些詞會(huì )過(guò)濾掉許多錯誤信息。換句話(huà)說(shuō)，這些是主題趨勢，而不是關(guān)鍵字搜索。

　　

　　谷歌趨勢上的JS主題

　　這個(gè)告訴我們在不同項目中的相對興趣。如果人們搜索他們，那么很有可能在探索他們的選擇，或者查找幫助或文檔。這是相對使用水平的一個(gè)非常不錯的指標。

　　另一個(gè)數據的有效來(lái)源是，這個(gè)集合了來(lái)自大量不同渠道的職位表數據。職位投遞熱點(diǎn)最近急速下降，但是他們依然收集足夠的數據，來(lái)做有效的相對對比，從而告訴你在生產(chǎn)項目中人們真正使用的框架。從職位中：

　　

　　想要重現這些發(fā)現，搜索javascript，然后工作地點(diǎn)保持空白。你就可以清晰看到：

　　Angular和React占領(lǐng)絕對優(yōu)勢：沒(méi)有可以與之相提并論的。（除了 在網(wǎng)站中具有巨大份額的jQuery——不包括app——因為它用于所有的遺留系統，包括受歡迎的CMS系統，比如WordPress）。

　　在這些列表中，與React相比，Angular具有絕對優(yōu)勢。那么為什么我推薦先學(xué)React？ 因為：

　　越來(lái)越多的人開(kāi)始學(xué)React，而不是Angular。

　　在用戶(hù)體驗上，React領(lǐng)先Angular。

　　換句話(huà)說(shuō)，React贏(yíng)得了思維占有率和用戶(hù)滿(mǎn)意度的競爭，并且如果按照過(guò)去幾年的趨勢，只需要按照一半的程度繼續下去，React完全有可能超越Angular作為主要的前端框架。

　　Angular 2也有可能扭轉戰局,，因此Angular也有可能東山再起，但是到目前為止， React確實(shí)打了一場(chǎng)漂亮的仗.

　　觀(guān)察中的框架下一步

　　現在你已經(jīng)研究了所有的熱點(diǎn)技術(shù)

　　提升你的JavaScript游戲。如果你不是其中一員，你會(huì )錯過(guò)的。

　　

　　快掃描二維碼，與志佳老師來(lái)聊聊吧～～