猛增 110K Star！年增長數最多的 10 大頂級前端學習資源項目！

https://risingstars.js.org/2019/en

大家好，我是你們的 貓哥，那個不喜歡喫魚、又不喜歡喵 的超級貓 ~

今天給大家推薦 2020 年增長數最多的 10 大頂級前端學習資源項目！

看完這 10 大頂級項目，你會發現原來 GitHub 上也有這麼多的 JavaScript 學習資源！

  1. javascript-algorithms

該倉庫包含了多種基於 JavaScript 的算法與數據結構。

每種算法和數據結構都有自己的 README，包含相關說明和鏈接，以便進一步閱讀 (還有 YouTube 視頻) 。

數據結構包含了 鏈表、雙向鏈表、隊列、棧、哈希表 (散列)、堆、優先隊列、字典樹、樹、優先隊列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數組、圖、並查集、布隆過濾器

算法包含了 算法主題 和 算法範式。

其中算法主題又包含了：數學、集合、字符串、搜索、排序、鏈表、樹、圖、加密、機器學習。

算法範式：算法範式是一種通用方法，基於一類算法的設計。這是比算法更高的抽象，就像算法是比計算機程序更高的抽象。

算法範式包含了：BF 算法、貪心法、分治法、動態編程、回溯法、Branch & Bound 等等。

這項目還出了對應的教學視頻，總共 81 個視頻講解，每個視頻大概 5 - 10 分鐘左右，還能學習英語哦 😉

youtube 的教學視頻：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

貓哥之前學習算法的時候，也在這個項目中收益良多呢！

而且這個項目還一直有維護和更新內容哦！真的非常不錯的一個項目！

https://github.com/trekhleb/javascript-algorithms

  1. nodebestpractices

Node.js 最佳實踐。

這個項目是對 Node.js 最佳實踐中排名最高的內容的總結和分享。

這裏是最大的彙集，且每週都在增長 - 當前，超過 50 個最佳實現，樣式指南，架構建議已經呈現。

目錄

比如 錯誤處理最佳實踐 中 使用 Async-Await 和 promises 用於異步錯誤處理

TL;DR: 使用回調的方式處理異步錯誤可能是導致災難的最快的方式 (a.k.a the pyramid of doom)。對您的代碼來說，最好的禮物就是使用規範的 promise 庫或 async-await 來替代，這會使其像 try-catch 一樣更加簡潔，具有熟悉的代碼結構。

否則: Node.js 回調特性, function(err, response), 是導致不可維護代碼的一個必然的方式。究其原因，是由於混合了隨意的錯誤處理代碼，臃腫的內嵌，蹩腳的代碼模式。

https://github.com/goldbergyoni/nodebestpractices

  1. You-Dont-Know-JS

該項目爲 YDNJS(You Don’t Know JS) 圖書系列，包含一系列深入探討 JavaScript 語言核心機制的書籍。

內容大綱

https://github.com/getify/You-Dont-Know-JS

  1. clean-code-javascript

優秀的 JS 代碼規範。

比如：對相同類型的變量使用相同的關鍵字

Bad：

1getUserInfo(); 
2getClientData(); 
3getCustomerRecord();
4
5

Good：

1getUser();
2
3

再比如：使用可搜索的命名

在開發過程中，我們閱讀代碼的時間會遠遠超過編寫代碼的時間，因此保證代碼的可讀性與可搜索會非常重要。

切記，沒事不要坑自己。

Bad:

1//525600到底啥意思？
2for (var i = 0; i < 525600; i++) {
3  runCronJob();
4}
5
6

Good:

1// 聲明爲全局變量
2var MINUTES_IN_A_YEAR = 525600;
3for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
4  runCronJob();
5}
6
7

https://github.com/ryanmcdermott/clean-code-javascript

  1. 30-seconds-of-code

該項目講的是滿足你所有開發需求的簡短代碼段，裏面都是些經常會用到而且是非常經典的代碼，非常值得學習！

比如 JavaScript 模塊就分爲了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便學習的。

比如：你必須知道的 4 種 JavaScript 數組方法

Array.prototype.map()

1const arr = [1, 2, 3];
2const double = x => x * 2;
3arr.map(double); // [2, 4, 6]
4
5

Array.prototype.filter()

1const arr = [1, 2, 3];
2const isOdd = x => x % 2 === 1;
3arr.filter(isOdd); // [1, 3]
4
5

Array.prototype.reduce()

1const arr = [1, 2, 3];
2
3const sum = (x, y) => x + y;
4arr.reduce(sum, 0); // 6
5
6const increment = (x, y) => [...x, x[x.length - 1] + y];
7arr.reduce(increment, [0]); // [0, 1, 3, 6]
8
9

Array.prototype.find()

1const arr = [1, 2, 3];
2const isOdd = x => x % 2 === 1;
3arr.find(isOdd); // 1
4
5

又比如：如何在 JavaScript 中實現睡眠功能？

同步版本

 1const sleepSync = (ms) => {
 2  const end = new Date().getTime() + ms;
 3  while (new Date().getTime() < end) { /* do nothing */ }
 4}
 5
 6const printNums = () => {
 7  console.log(1);
 8  sleepSync(500);
 9  console.log(2);
10  console.log(3);
11};
12
13printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
14
15

異步版本

 1const sleep = (ms) =>
 2  new Promise(resolve => setTimeout(resolve, ms));
 3
 4const printNums = async() => {
 5  console.log(1);
 6  await sleep(500);
 7  console.log(2);
 8  console.log(3);
 9};
10
11printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
12
13

其實上面講到的事例裏面還提供 api 和方法的講解的，方便讀者能看懂的，這裏就不寫出來了。

還想學更多的 經典 js 代碼片段，請看下面的倉庫

https://github.com/30-seconds/30-seconds-of-code

  1. javascript

這個項目是 JavaScript 編程風格指南。

包含了：類型、對象、數組、字符串、函數、屬性、變量、提升、比較運算符 & 等號、塊、註釋、空白、逗號、分號、類型轉化、命名規則、存取器、構造函數、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風格指南說明

https://github.com/airbnb/javascript

  1. tech-interview-handbook

技術人員求職面試，單刷 leetcode 上的大廠題庫可能還不夠。

簡歷怎麼寫才能吸引 HR 的眼光，可能會被技術老大問到哪些常見問題，拿到 Offer 之後怎樣才能讓自己的優勢最大化然後優中選優？

面對這些赤果果的問題，目前就職於 Facebook 的新加坡小哥 Yangshun Tay 就整理了一份乾貨。

面試全流程需要注意的事項都在裏面了，包含從簡歷準備、面經和談判全過程，教你如何避雷不踩坑。

精心策劃的內容可幫助您獲得下一次技術面試的機會，重點是算法。

除了常見的算法問題外，其他出色的功能還包括：

https://github.com/yangshun/tech-interview-handbook

  1. freeCodeCamp

FreeCodeCamp 是一個自由開源的學習編程的社區，致力於幫助人們利用零散時間學習編程。

它的使命是 Learn to code and help nonprofits（學習編程，去幫助那些非盈利組織）。

FCC 涵蓋 HTML5、CSS、React、JavaScript、Database 等課程，遊戲化程度非常高，學員可以通過線上聊天室和線下社區活動（Coffee and Code）相互幫助。

目前覆蓋全球 160+ 個國家、1000+ 個城市，40W+ 開發者在平臺學習。

https://github.com/freeCodeCamp/freeCodeCamp

  1. Front-End-Checklist

該項目是詳盡的關於前端開發的清單，它列出了將 HTML 頁面投入生產之前需要進行測試的所有元素。

它基於衆多前端開發人員的多年經驗，其中一部分整合自其他的開源清單。

內容包含：

https://github.com/thedaviddias/Front-End-Checklist

  1. vanillawebprojects

新手上路最開始用的就是基礎的 HTML+CSS+JS 三件套，而在框架和庫越來越多的現在，更多的時候使用它們來提高效率是常見的選擇。

這個項目則是反過來，是使用老三件套實現的一些小項目合集，不管是爲了更好理解框架，還是爲了驗證一下自己的知識水平，重新操刀老三件套都不失爲一個好選擇，要知道不管是什麼框架和庫，基礎都是由這三板斧搭建起來的。

https://github.com/bradtraversy/vanillawebprojects

最後

不知不覺，原創文章已經寫到第 33 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章裏面的項目幾乎都是對前端開發很有幫助的。

原創不易，一篇優質的文章都是要肝幾個晚上才能肝出來的，花費很多時間、精力去篩選和寫推薦理由，大佬們看完文章後順手點個贊或者轉發吧，給貓哥一點鼓勵吧。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/A5tu6zcd14ZLDpfvOfG9FQ

猜你喜歡