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

時間 2021-05-31

標籤 javascript 前端 java node git 程序員 github web 面試算法欄目 JavaScript 简体版

原文原文鏈接

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

關於貓哥，你們能夠看看個人年終總結前端工程師的 2020 年終總結 - 乾坤未定，你我皆黑馬。前端

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

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

1. javascript-algorithms

2020 年增加 31.9K

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

每種算法和數據結構都有本身的 README，包含相關說明和連接，以便進一步閱讀 (還有 YouTube 視頻) 。程序員

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

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

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

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

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

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

youtube 的教學視頻： https://www.youtube.com/playl...

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

並且這個項目還一直有維護和更新內容哦！真的很是不錯的一個項目！

https://github.com/trekhleb/j...

更多算法相關的項目推薦能夠看看這篇文章：7 個 GitHub 上超火的前端學習的數據結構與算法項目

2. nodebestpractices

2020 年增加 20.2K

Node.js 最佳實踐。

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

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

項目結構實踐 (5)
異常處理實踐 (11)
編碼規範實踐 (12)
測試和整體質量實踐 (8)
進入生產實踐 (16)
新: 安全實踐(23)
Performance Practices (coming soon)

好比錯誤處理最佳實踐中使用 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/goldbergyo...

3. You-Dont-Know-JS

2020 年增加 18K

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

內容大綱

入門與進階
做用域與閉包
this 與對象原型
類型與文法
異步與性能
ES6 與將來

https://github.com/getify/You...

4. clean-code-javascript

2020 年增加 15.1K

優秀的 JS 代碼規範。

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

Bad：

getUserInfo(); 
getClientData(); 
getCustomerRecord();

Good：

getUser();

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

在開發過程當中，咱們閱讀代碼的時間會遠遠超過編寫代碼的時間，所以保證代碼的可讀性與可搜索會很是重要。

切記，沒事不要坑本身。

Bad:

//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

// 聲明爲全局變量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
  runCronJob();
}

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

5. 30-seconds-of-code

2020 年增加 13.3K

該項目講的是知足你全部開發需求的簡短代碼段，裏面都是些常常會用到並且是很是經典的代碼，很是值得學習！

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

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

Array.prototype.map()

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

Array.prototype.filter()

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

Array.prototype.reduce()

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

Array.prototype.find()

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

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

同步版本

const sleepSync = (ms) => {
  const end = new Date().getTime() + ms;
  while (new Date().getTime() < end) { /* do nothing */ }
}

const printNums = () => {
  console.log(1);
  sleepSync(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

異步版本

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

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

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