[[392770]]

今天給大家推薦的是排名前十的 10 大前端開源項目，每個都有 100K 左右的 Star，都開源了些啥？

相信很多人都不知道吧，今天帶大家來了解一下吧。

1. freeCodeCamp

• 323 K

[[392771]]

FreeCodeCamp 是一個自由開源的學習編程的社區，致力于幫助人們利用零散時間學習編程。它的使命是 Learn to code and help nonprofits（學習編程，去幫助那些非盈利組織）。

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

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

FreeCodeCamp 國內的中文版請看 https://freecodecamp.cn （這是由國內愛好者翻譯的中文版本）

https://github.com/freeCodeCamp/freeCodeCamp

2. Vue.js

• 182K

Vue.js 是一個漸進式 JavaScript 框架，也是目前前端最流行的框架。

易用

• 已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

靈活

• 不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

• 最省心的優化

https://github.com/vuejs/vue

3. React

• 167K

一個聲明性，高效且靈活的 JavaScript 庫，用于構建用戶界面。

聲明式

React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新并正確地渲染組件。

以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調試。

組件化

創建擁有各自狀態的組件，再由這些組件構成更加復雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應用中傳遞數據，并使得狀態與 DOM 分離。

一次學習，隨處編寫

無論你現在正在使用什么技術棧，你都可以隨時引入 React 來開發新特性，而不需要重寫現有代碼。

React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發原生移動應用。

https://github.com/facebook/react

4. awesome

• 157K

awesome：令人敬畏的；使人畏懼的；可怕的；極好的

就像我們匯總我們常用的電腦環境軟件一樣，我們會找一些非常好的適合我們用的軟件來做一個總結，awesome 項目也是如此，由于 GitHub 上有大量的開源項目，開發者就會根據需要匯總一些常用的好用的資源，并且根據 awesome 的主題做一下劃分，開發語言等也有類似資源匯總。

https://github.com/sindresorhus/awesome

5. bootstrap

• 149K

[[392775]]

流暢，直觀且功能強大的前端框架，可更快，更輕松地進行 Web 開發。

使用世界上最流行的前端開源工具包 Bootstrap 快速設計和自定義響應式移動優先站點，它具有 Sass 變量和 mixins，響應式網格系統，大量的預構建組件以及強大的 JavaScript 插件。

https://github.com/twbs/bootstrap

6. You-Dont-Know-JS

• 136K

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

內容大綱

• 入門與進階

• 作用域與閉包

• this 與對象原型

• 類型與文法

• 異步與性能

• ES6 與未來

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

7. vscode

• 114K

Visual Studio Code 是一個運行于 OS X，Windows 和 Linux 之上的，針對于編寫現代 Web 和云應用的跨平臺編輯器。

也是當今天前端最流行的編輯器！

https://github.com/microsoft/vscode

8. javascript

• 107K

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

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

https://github.com/airbnb/javascript

9. javascript-algorithms

• 103K

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

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

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

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

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

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

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

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

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

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

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

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

10. d3

• 96K

使用 SVG、Canvas 和 HTML 使數據生動起來。

D3（或D3.js）是一個 JavaScript 庫，用于使用 Web 標準可視化數據。D3 可幫助您使用SVG，Canvas 和 HTML 使數據栩栩如生。D3 將強大的可視化和交互技術與數據驅動的 DOM 操作方法相結合，為您提供現代瀏覽器的全部功能，并為您的數據設計正確的可視界面提供了自由。

https://github.com/d3/d3