久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

2017 年要學(xué)習(xí)的 JavaScript 的頂級框架和主題

 Levy_X 2017-06-04

JavaScript的流行促進了一個非?;钴S的由相關(guān)技術(shù),框架和庫組成的生態(tài)圈的發(fā)展,。整個生態(tài)圈的多樣性和活躍性越來越強,,這讓許多人變得越來越困惑。 你應(yīng)該了解些什么技術(shù)呢?

我們應(yīng)該將時間花費在哪里才能獲得最大的收益,? 現(xiàn)在公司招聘要求的技術(shù)棧包括哪些,?哪項技術(shù)的發(fā)展?jié)摿ψ畲螅?/p>

當(dāng)前需要掌握的最重要的技術(shù)是什么? 

這篇文章高度概括了你需要了解的技術(shù),,并附上了每個技術(shù)對應(yīng)的鏈接,,通過鏈接中內(nèi)容你可以詳細了解該技術(shù)。

第 1 段(可獲 1.25 積分)

記住,在學(xué)習(xí)的過程中一定要多動手寫代碼,。 你可以通過 Codepen.io 網(wǎng)站來交互式地寫代碼,;或者如果你在學(xué)習(xí)ES6的話,可以嘗試通過 Babel REPL來對其進行轉(zhuǎn)碼,。

這將會是一份很長的清單,,但請不要氣餒。相信自己,,你能夠做到的,!如果你看著這份清單,擔(dān)心到什么時候才能學(xué)會構(gòu)建現(xiàn)代應(yīng)用程序所需的一切,,請先移步 “Why I’m Thankful for JavaScript Fatigue”,。然后沉下心來開始我們的學(xué)習(xí):

關(guān)于“可選學(xué)習(xí)”的注意事項

文章中的有些內(nèi)容是 可選的*,這里可選的意思是:如果你對這些內(nèi)容感興趣的話,,我向你推薦這些知識,;或者,找工作的時候可能會需要了解它們,,但是不是非得學(xué)習(xí)它們,。 任何標(biāo)有星號(如例*)的都是可選的。

第 2 段(可獲 1.78 積分)

任何沒有標(biāo)有 “*” 的內(nèi)容都需要學(xué)習(xí),,但不要覺得有義務(wù)去學(xué)習(xí)每項內(nèi)容,。你需要知道這些非可選的知識,但你不一定需要成為該主題絕對的專家,。

JavaScript 和 DOM 基礎(chǔ)

在找一份JavaScript工作之前,,你應(yīng)該熟練掌握相關(guān)的JS基礎(chǔ)知識:

  • ES6: JavaScript 的最新版本是 ES2016 (即 ES7),但很多開發(fā)人員還沒有完全掌握ES6,。是時候了解ES6了,至少需要了解下面這些基礎(chǔ)的知識:箭頭函數(shù),, rest參數(shù)/spread運算符,, 默認參數(shù),簡潔的對象直接量表示法,,解構(gòu)等等,;
  • 閉包: 學(xué)習(xí)JavaScript的函數(shù)作用域是如何發(fā)揮作用的;
  • 函數(shù) & 純函數(shù) : 也許你會認為自己已經(jīng)熟練掌握了函數(shù)的功能,,但是JavaScript中的函數(shù)有一些自己的技巧,,而且你需要學(xué)習(xí)純函數(shù)來應(yīng)付函數(shù)式編程;
  • 函數(shù)式編程基礎(chǔ) : 函數(shù)式編程通過組合數(shù)學(xué)函數(shù)來產(chǎn)生程序,,可以避免共享狀態(tài)和可變數(shù)據(jù),。在產(chǎn)品級JavaScript應(yīng)用程序中沒有大量使用函數(shù)式編程的情況我已經(jīng)很多年沒有見過了。因此,現(xiàn)在是時候掌握函數(shù)式編程的基本原理了,;
  • 部分應(yīng)用 & 柯里化
  • 原生方法 : 學(xué)習(xí)內(nèi)置標(biāo)準(zhǔn)數(shù)據(jù)類型的方法(尤其是 arraysobjectsstrings, 和 numbers類型),;
  • 回調(diào)函數(shù) : 回調(diào)函數(shù)是一個基本函數(shù),它由另一個函數(shù)在特定結(jié)果發(fā)生時調(diào)用,?;卣{(diào)函數(shù)可能會說: “執(zhí)行你自己的邏輯,在特定事件發(fā)生時調(diào)用我”,。
  • Promises機制 : 諾言是用來處理未來返回值的一種方法,。如果某函數(shù)調(diào)用返回一個諾言對象,你可以使用該對象的 .then()方法綁定一個回調(diào)函數(shù),,它在諾言兌現(xiàn)的時候被調(diào)用,。 而且,諾言兌現(xiàn)時候的值會傳遞到你的回調(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 promises doSomething().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'

 

第 3 段(可獲 3.58 積分)

 

第 4 段(可獲 1.83 積分)

使用工具

  • Chrome Dev ToolsDOM 檢查 & JS 調(diào)試器:最好的調(diào)試器,,在我看來,,你也會想用 Firebox 的一些很酷的工具。
  • npm: JavaScript 語言標(biāo)準(zhǔn)的開源包倉庫,。
  • git & GitHub: 分布式版本管理 —— 全程跟蹤源代碼的變化,。
  • Babel: 編譯 ES6 使之能用于更舊的瀏覽器。
  • Webpack: 最流行的標(biāo)準(zhǔn) JavaScript 打捆工具,。(尋找入門級工具/樣板配置示例以快速使用)
  • AtomVSCode, 或者 WebStorm   vim: 你會需要一個編輯器,。Atom 和 VSCode 是當(dāng)今最流行的 JS 編輯器。Webstorm 是另一個選擇,,它擁有強大的支持和質(zhì)量工具,。我建議學(xué)著使用 vim,至少收藏它的使用技巧,,因為你遲早會在服務(wù)器上去編輯文件,,而 vim 是最簡單易用的 —— vim 安裝在每個 Linux 兼容的操作系統(tǒng)中,而且可以在 SSH 連接的終端上運行良好,。
  • ESLint: 盡早發(fā)現(xiàn)語法錯誤和風(fēng)格相關(guān)的問題,。它是繼代碼審核和 TDD 之后,第三個值得你擁有并用來減少代碼缺陷的東西,。
  • Tern.js: 標(biāo)準(zhǔn) JavaScript 的類型推導(dǎo)工具,,是目前我最喜歡的類型相關(guān)的 JavaScript 工具 —— 它沒有編譯步驟,也不需要注解,。我?guī)缀鯂L試過所有相關(guān)工具,,Tern.js 是最好的,它作為 JS 的靜態(tài)類型系統(tǒng)工具,,幾乎不需要成本,。
  • Yarn*: 類似 npm,但能更加保證安裝行為的確定性。而且 Yarn 的目標(biāo)之一是比 npm 更快,。
  • TypeScript*: JavaScript 和靜態(tài)類型,。它完全是可選的,除非你學(xué)習(xí) Agnular 2 ,。如果你不使用 Angular 2 ,,在選擇  TypeScript 之前應(yīng)該仔細對其進行評估。我非常喜歡它,,也很佩服 TypeScript 團隊的優(yōu)秀工作,。但你需要了解它并進行權(quán)衡。需要閱讀: “The Shocking Secret About Static Types (靜態(tài)類型令人震驚的秘密)” & “你可能不需要 TypeScript”.
  • Flow*: JavaScript 的靜態(tài)類型檢查器,??纯?nbsp;“TypeScript vs Flow”,這里對兩個工具進行了令人印象深刻地客戶比較,。注意我在 IDE 中使用 Flow 的感覺并不好,,即使使用了 Nuclide
第 5 段(可獲 4.49 積分)

React

React 是一個JavaScript庫,用于構(gòu)建用戶界面,由Facebook創(chuàng)建. 它是基于單向數(shù)據(jù)流的概念, 意味著每個更新周期:

  1. React 采用組件作為props 和有條件地呈現(xiàn)DOM更新如果數(shù)據(jù)改變了DOM的特定部分. 數(shù)據(jù)更新在此階段不能再觸發(fā)器渲染,直到下一個繪畫階段.
  2. 事件處理階段?—?在DOM渲染之后, React 在DOM樹的根中自動將DOM事件委托給單個事件偵聽器(為了獲得更好的性能). 你可以偵聽事件和更新數(shù)據(jù)的響應(yīng).
  3. 使用任何更改數(shù)據(jù), 這過程將重復(fù)執(zhí)行步驟1.
第 6 段(可獲 1.44 積分)

這是雙向數(shù)據(jù)綁定,,在DOM變化的地方可直接更新ID, DOM的變化可以直接更新數(shù)據(jù) (e.g., 類似Angular 1 和 Knockout). 使用雙向綁定, DOM渲染過程中對DOM的更新(稱為消化周期 Angular 1) 有可能在觸發(fā)繪圖階段之前就完成了, 這樣也造成回流和重繪?—?減慢了性能.

React沒有規(guī)定數(shù)據(jù)管理系統(tǒng), 但是推薦使用 Flux-based. React’s ,,它是單向數(shù)據(jù)流的方法,借鑒于函數(shù)式編程不可變數(shù)據(jù)結(jié)構(gòu)改變了我們對前端框架結(jié)構(gòu)的思考方式.

第 7 段(可獲 1.28 積分)

更多關(guān)于 React & Flux 架構(gòu)的內(nèi)容請閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.

Redux

Redux 為你的 App 提供了事務(wù)的,、確定性狀態(tài)管理的功能。在 Redux 中,,可以對 action 對象流進行迭代來減少應(yīng)用的狀態(tài),。想要了解為什么這個問題很重要,請閱讀 “10 Tips for Better Redux Architecture.” ,。想要開始學(xué)習(xí) Redux ,,可以閱讀 Redux 創(chuàng)始人發(fā)布的超棒的教程

第 8 段(可獲 1.55 積分)

Redux是必須掌握的一項知識, 即便是你在生產(chǎn)項目從來沒有使用過Redux .

為什么必須要掌握學(xué)習(xí)? 因為它會給你大量的經(jīng)驗和指導(dǎo),,讓你了解使用純函數(shù)和教你新的思考方式reducers的價值, 一般的函數(shù)編程遍歷集合的數(shù)據(jù),只是能提取一些值. Reducers 通常是用于數(shù)組原型方法Array.prototype.reduce被 添加到JS的規(guī)范.

Reducers優(yōu)勢遠遠超越了僅僅使用數(shù)組,,它的作用對工作是很重要很有幫助,因此學(xué)習(xí)一種新的 Reducers知識是很有價值的.

第 9 段(可獲 1.25 積分)
  • redux-saga*: 為Redux設(shè)計的同步請求作用庫. 用這個來管理I/O數(shù)據(jù)流 (例如處理網(wǎng)絡(luò)請求).

Angular 2 *

Angular 2  是谷歌開發(fā)的非常受歡迎的一個Angular框架. 因為它瘋狂的流行,它會使你的簡歷看著非常棒?—但是我強烈建議你首先學(xué)習(xí) React.

我有一些建議關(guān)于 React 超越 Angular 2 因為:

  1. 這很簡單,,而且
  2. 它也非常受歡迎,用于大量的工作項目 ( Angular 2 也是如此)

基于這些原因我建議你學(xué)習(xí)React, 我把 Angular 2 設(shè)置為可選學(xué)的*. 如果你有強烈的偏愛Angular 2 , 兩者隨意使用.首先 主要學(xué)習(xí)Angular 2 , 然后考慮React 選學(xué). 這兩個的任何一個都會是你的簡歷看起來很棒.

第 10 段(可獲 1.6 積分)

不論你選擇哪一個,試著去關(guān)注它至少6個月?—?1年之后再去學(xué)習(xí)另一個. 要真正精通是需要時間的歷練.

RxJS*

RxJS is JavaScript的響應(yīng)編程實用程序的集合. 認為這是lodash流. 響應(yīng)式編程已經(jīng)正式官方的進入JavaScript的使用場景. ECMAScript可見提案草案階段1, and RxJS 5 規(guī)范化標(biāo)準(zhǔn)的實現(xiàn).

我非常喜歡 RxJS,如果你只是一下子就把整件事全部導(dǎo)入, 它真的可以擴大你的包大小 (會產(chǎn)生很多的數(shù)據(jù)流量,套餐不夠用了). 為了減小bundle生產(chǎn)環(huán)境文件的大小, 不要導(dǎo)入所有程序接口. 使用補丁 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));

 

第 11 段(可獲 1.48 積分)

使用片段式導(dǎo)入減小和壓縮生產(chǎn)文件到~200k. 非常劃算. 它會使你的應(yīng)用程序更快.

編輯: 你為什么不列出<你最喜歡的 事>?

有幾個人問我為什么沒有列出他們最喜歡的框架,。 我考慮的一個重要標(biāo)準(zhǔn) “這對實際工作有用嗎?”.

是的,,這是一個受歡迎的挑戰(zhàn), 這些有利條件用一個框架去開發(fā)一個重要的條件在哪里你花費你的學(xué)習(xí)時間長短.

為了回答這個問題,我看了一些關(guān)鍵指標(biāo),。 一,、谷歌趨勢。 如果你想看看谷歌趨勢圖, 記住按主題選擇, 不是關(guān)鍵詞, 僅僅靠幾個簡單的關(guān)鍵詞很難做出正確的判斷. 換句話說, 這些都是主題聚焦的趨勢, 不是關(guān)鍵字搜索:

第 12 段(可獲 1.83 積分)

Google Trends 關(guān)于 JS 的主題

這個圖表告訴我們感興趣的幾個項目的信息。如果人們在搜索這些項目,,他們可能正在探索該選擇什么樣的項目,,或者是尋求幫助和文檔。這個是一個對項目受歡迎程度的一個比較不錯的指標(biāo),。

另外一個很好的數(shù)據(jù)來源是 Indeed.com,,這里匯集了來自各種源頭的招聘信息數(shù)據(jù)列表。近年來,,工作崗位的受歡迎程度急劇下降,,但是他們?nèi)匀皇占俗銐蚨嗟臄?shù)據(jù)來做相對的比較,可以告訴你人們在生產(chǎn)項目和工作中實際使用的技術(shù):

第 13 段(可獲 1.23 積分)

為了重現(xiàn)這些結(jié)果,,請搜索框架名稱 javascript,,然后讓地址欄為空。你就可以清晰的看到:

Angular 和 React 占據(jù)主導(dǎo)地位:其他的暫時無法比擬,。(除了 jQuery ,,這是大量網(wǎng)站正在使用的框架,包括非 App,,因為它在幾乎所有的老舊系統(tǒng)中使用,,包括廣受歡迎的 CMS —— WordPress)。

你可能會看到 Angular 相比起 React 有較明顯的優(yōu)勢,。那為什么我會首先推薦 React 呢,?因為:

  1. 更多的人對 React 的興趣比 Angular 更大
  2. React 在用戶滿意度上明顯優(yōu)于 Angular
第 14 段(可獲 1.19 積分)

換句話說,React 贏得了媒體和客戶滿意度的戰(zhàn)斗,,如果這個勢頭繼續(xù)保持,,React 非常有機會能夠干掉 Angular ,成為前端框架的主導(dǎo),。

Angular 2 有機會扭轉(zhuǎn)這一局面,,所以它卷土重來,但是到目前為止,,React 還是打了一場很好的戰(zhàn)斗,。

需要關(guān)注的框架:

  • Vue.js* 獲得大量的 GitHub 點贊和下載。照著這個勢頭,,它在 2017 年會表現(xiàn)得非常好,。但我不認為它會在未來一年內(nèi)取代 React 和 Angular (這兩者同樣發(fā)展迅速)。你可以在學(xué)習(xí) React 和 Angular 后學(xué)習(xí)一下合這個框架,。
  • MobX* 是一個很棒的數(shù)據(jù)管理庫,,而且已經(jīng)成為了 Redux 非常受歡迎的替代品。同樣增長快速,,我希望它在 2017 年可以表現(xiàn)得很好,。對絕大多數(shù) App 來說,,我更傾向于 Redux,但肯定有一些場景是 MobX 更適合的,。例如,,如果你的頁面中有成百上千的動態(tài) DOM 對象,那么 MobX 表現(xiàn)會更好一些,。同樣,,如果你的App 工作流非常簡單,而且不需要事務(wù)以及確定的狀態(tài),,你可能也不需要 Redux,。MobX 完全是一個更簡單的解決方案。你可以在學(xué)完 Redux 后再去學(xué) MobX,。

編者注:關(guān)于 MobX 和 Redux 的比較請閱讀這篇文章,。

第 15 段(可獲 2.88 積分)

緊接著下一步

現(xiàn)在你已經(jīng)研究了這些熱門技術(shù), 閱讀 “如何在5個簡單步驟中開始你的第一個開發(fā)工作”.

提高你的JavaScript技能. 如果你還沒有進入角色, 你將會錯過很多.

“JavaScript應(yīng)用程序編程”(O’Reilly) 的作者是埃里克·艾略特 ,  “學(xué)習(xí)JavaScript和Eric Elliott”. 他曾經(jīng)的軟件經(jīng)驗 Adobe 系統(tǒng)Zumba 健身《華爾街日報》ESPN英國廣播公司, 頂級錄音藝術(shù)家包括 亞瑟,弗蘭克海洋,金屬樂隊, and many more.

他大部分時間都呆在舊金山灣,和世界上最漂亮的女人在一起.

第 16 段(可獲 1.31 積分)

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請點擊一鍵舉報,。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多