今天老K要
分享幾個Github上star過萬、形式多樣、非常有意思的前端專案
。
如果你正在學習前端技術，或者遇到了瓶頸，不妨讀完這篇文章，試試下面這些有趣的專案，也許就能找到感覺和動力
。
內容較多，建議收藏。
1。 30-seconds-of-code
url： https：//github。com/30-seconds/30-seconds-of-code
star： 10。4w
fork： 1。1w
watch： 2。6k
這個專案彙集了可以在短時間（30秒以內）理解的實用JavaScript技巧或程式碼片段，每一示例都是用markdown編寫，方便大家查閱。
值得一提的是，這個專案還有展示網站，不僅有javascript的專案分享，還有其它語言的示例，很適合學習分享。
2。 reveal。js
url： https：//github。com/hakimel/reveal。js
star： 6。2w
fork： 1。6w
watch： 1。7k
這是一個基於前端的演示框架，利用HTML和JavaScript實現類PPT展示，讓你告別傳統而死板的PPT製作方法，更便捷地使用HTML、Markdown語言製作PPT演示文件。
3。 marktext
url： https：//github。com/marktext/marktext
star： 3。6w
fork： 2。7k
watch： 384
這是一個Markdown語法編輯器，操作簡單而優雅，支援在Linux、macOS和 Windows不同操作環境下使用。官網地址->
https：//github。com/marktext/marktext#download-and-installation
功能包括但不限於：
實時預覽和簡潔明瞭的介面（所見即所得）；
支援Markdown擴充套件語法，如數學表示式、Latex和emoji表情等；
可以輸出HTML以及PDF檔案；
支援各種編輯模式：原始碼模式、打字機模式、專注模式。
4。 edex-ui
url： https：//github。com/GitSquared/edex-ui
star： 3。6w
fork： 2。1k
watch： 1。5k
這是基於Electron的炫酷終端工具。UI設計直逼好萊塢級別，使用體驗也非常流暢，啟動動畫非常炫酷、音效也很棒，還有直觀的檔案展示目錄、系統資源、網路資訊等。
效果請看下圖：
5。 Leaflet
url： https：//github。com/Leaflet/Leaflet
star： 3。6w
fork： 5。5k
watch： 902
這是一個久負盛名的移動端互動地圖JavaScript庫。它簡單易用，容量小巧，但包含了地圖絕大多數常用功能。
Leaflet設計很友好，可以快速上手，幾行簡單的程式碼就能實現地圖功能，支援多種類的地圖資料來源。很多大公司都是它的使用者，在生產環境中可以放心使用。
官網地址->
https：//leafletjs。com/reference。html
以下是示例程式碼：
var map = L。map（‘map’）。setView（［51。505， -0。09］， 13）；L。tileLayer（‘https：//{s}。tile。openstreetmap。org/{z}/{x}/{y}。png’， { attribution： ‘©OpenStreetMap contributors’}）。addTo（map）；L。marker（［51。5， -0。09］）。addTo（map） 。bindPopup（‘A pretty CSS3 popup。
Easily customizable。’） 。openPopup（）；
6。 drawio
url： https：//github。com/jgraph/drawio
star： 3。2w
fork： 6。3k
watch： 577
這是一款功能強大的繪圖工具。免費開源可以自行部署，也可以在線上使用。功能上對標Microsoft Visio。
支援的圖形包括：流程圖、序列圖、網路拓撲圖、甘特圖、思維導圖、模型圖等，支援多種檔案格式：png、svg、PDF、HTML和VSDX格式（Microsoft Visio 圖形格式）。
7。 carbon
url： https：//github。com/carbon-app/carbon
star： 3。1w
fork： 1。8k
watch： 250
一個程式碼片段圖片化工具，專案以美觀整潔的方式展示程式碼片段。支援SVG、PNG等多種輸出方式。
8。 30-Days-Of-JavaScript
url： https：//github。com/Asabeneh/30-Days-Of-JavaScript
star： 2。8w
fork： 6。5k
watch： 749
最符合題主的一個Github專案，30天JavaScript程式設計挑戰。
該教程是英文教程，但圖文並茂通俗易通，英文學渣也很好上手。練習題內容循序漸進，適合零基礎自學JavaScript的同學。
9。 wenyan
url： https：//github。com/wenyan-lang/wenyan
star： 1。9w
fork： 1。1k
watch： 253
想不想體驗一下文言文程式設計？
本專案支援文言文語法程式設計，很有意思，執行結果可以編譯成JavaScript、Python或者Ruby。
想寫出自己的文言文程式的同學快來這裡試試吧！官網地址->https：//wy-lang。org/
10。 rough
url： https：//github。com/rough-stuff/rough
star： 1。8w
fork： 572
watch： 161
一個手繪風格的圖形庫。可以用素描、手繪的風格來製作圖形。
const rc = rough。canvas（document。getElementById（‘canvas’））；rc。rectangle（10， 10， 200， 200）； // x， y， width， height
11。 p5。js
url： https：//github。com/processing/p5。js
star： 1。8w
fork： 2。7k
watch： 493
這是一個JavaScript創意程式設計庫，主要可以用來實現繪圖、藝術創意等任務。
該庫只需要會基礎的JavaScript程式碼就可以使用了，可以用它畫出許多有趣的東西。文件齊全，方便快速上手，還可以線上編輯。
官網地址->https：//p5js。org/
示例程式碼：
function setup（） { createCanvas（640， 480）；}function draw（） { if （mouseIsPressed） { fill（0）； } else { fill（255）； } ellipse（mouseX， mouseY， 80， 80）；}
以上就是本期想要和大家分享的專案。如果你對專案或者程式碼有任何疑問，可以在評論區留言或者私信我，有問必答。
碼字不易，不要光收藏，不點贊不準走啊！
我之前還分享過一些Github上熱門專案，有需要的同學可以直接點選下方連結獲取：
推薦閱讀
如何學習python？Github上這10個教程和專案幫你輕鬆入門
github上star過萬的Java新手入門教程 熱門學習材料
「2022」github上star過萬的熱門專案：JavaScript篇（二）
「2022版」github上star過萬的熱門專案：JavaScript篇
結束語
我是@老K玩程式碼
，專注於程式設計開發的經驗總結和專案分享，對程式設計有興趣、正在學習程式設計的同學可以關注我。
