github優秀前端項目分享(轉)

http://microjs.com/#javascript

該網站的資源都託管到了githubmicrojs.com是一個可讓你選擇微型的js類庫的網站,該網站裏的js庫都是壓縮後不大於5KB的,很是實用css

https://plainjs.com/(10.22更新)html

The Vanilla JavaScript Repository,該倉庫都是用原生js寫的插件和組件,很實用。裏面的項目也都託管到了github前端

綜合/資源

  • frontend-dev-bookmarks 一個巨大的前端開發資源清單。star:15000

    vue

  • front-end-collect 分享本身長期關注的前端開發相關的優秀網站、博客、以及活躍開發者。star:860

    html5

  • Front-end-Interview-questions 史上最全前端開發面試問題及答案

    java

  • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100

    node

  • awesome-javascript 一系列很棒的javascript 庫,資源。star:3100

    react

  • fks 前端技能彙總,包含前端知識架構,後端知識,linux,書籍推薦等。star:4000

    jquery

  • node123 node.js中文資料導航。star:1200

  • mobile-web-favorites 移動端web開發收藏夾。star:200

  • gulp-book Gulp 入門指南

樣式/UI/css

  • Semantic-UI 讓你使用任何HTML標籤 來表現UI控件。
    這是一款語義化設計的前端框架,爲攻城師而製做的可複用的開源前端框架。star:17500

  • primer CSS風格指南。star:3600

  • glue 一個生成CSS sprites的簡單的命令行工具。star:2.5K (7.19更新)

  • postcss 用js插件來對css進行轉換,相似Sass的預編譯器,但實現了模塊化,而且更增強大。star:4.5K(7.31更新)

  • css3 PIE 容許在IE上使用CSS3絕大部分的酷炫功能。官網:http://css3pie.com/

  • mui 輕量級css框架。star:1.5K(10.15更新)

測試/工具

  • mocha 一個簡單、靈活有趣的 JavaScript 測試框架,用於 Node.js 和瀏覽器上的 JavaScript 應用測試。 star:6680

  • csscss css代碼冗餘分析儀,用於分析冗餘 。star:2800

  • es6-tools es6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860

  • async 一個工具模塊,提供了直接而強大的 JavaScript 異步功能。雖然是爲 Node.js 設計的,可是它也能夠直接在瀏覽器中使用。star:13000

  • simditor 團隊協做工具 Tower 使用的富文本編輯器。star:1300

  • HTMLHint HTML 靜態代碼分析工具,能夠集成到IDE環境或編譯系統中。star:900

  • jshint js靜態代碼分析工具,能夠幫你檢測js語法錯誤和潛在的問題。star:5100

  • csslint 分析和優化你的CSS樣式表的工具。由[Nicholas C.
    Zakas][28]所寫。star:2700

  • protractor 一款端對端的angular apps 測試框架。star:4K

  • casperjs 一個基於PhantomJS的開源導航腳本和測試工具。star:4.8K

  • Karma 自動化完成單元測試,容許你在多個瀏覽器裏執行js代碼。讓你的TDD變得簡單,快速,有趣。star:5.3K

  • jasmine 是一個簡易的JS單元測試框架, 用來測試Javascript代碼。star:9.1K(6.28更新)

  • chai 一個針對 Node.js 和瀏覽器的TDD(測試驅動開發)/BDD(行爲驅動開發)的斷言框架,可與任何 JavaScript 測試框架集成。star:2K(6.29更新)

  • Qunit 一個很容易使用的js單元測試框架,該框架是由jQuery團隊的成員所開發,而且是jQuery的官方測試套件。star:3.3K(6.29更新)

Workflow/構建工具

  • Grunt 基於Node.js的項目構建工具。擁有數量龐大的插件,是一款優秀的前端自動化工具。star:9500

  • yeoman 一個強健的工具,庫,及工做流程的組合。star:960

  • gulp 基於node.js流的新一代前端構建系統。star:14000

  • spmCMD 的包管理工具,須要和 Sea.js 配合使用。

canvas/數據可視化

  • echarts 基於Canvas,純Javascript圖表庫,提供直觀,生動,可交互,可個性化定製的數據可視化圖表。star:6900

  • Chart.js 使用<canvas>標籤的簡易HTML5圖表。star:14600

  • sketch.js 跨平臺JavaScript創意編碼框架,gzip壓縮後僅有2kb。star:1500

  • d3 一個基於數據操做文檔的js數據可視化框架,最流行的可視化庫之一。star:38000

  • zrender 一個輕量級的Canvas類庫,MVC封裝,數據驅動,提供類DOM事件模型,讓canvas繪圖大不一樣!star:850

  • c3 一個基於 D3.js 的可重用 JavaScript 圖表庫。幾乎零學習曲線。star:4.5K(6.28更新)

  • img2css 將圖片轉爲純css代碼。(11.3更新)

模塊管理/加載器

  • ESL 是一個瀏覽器端、符合AMD的標準加載器,適合用於現代Web瀏覽器端應用的入口與模塊管理。

ESL vs RequireJS

體積更小 (Smaller)
性能更高 (Higher performance)
更健壯 (More Robustness)
不支持在非瀏覽器端使用 (Browser only)
依賴模塊用時定義 (Lazy define)
  • seajs 一個遵循CommonJS規範的JavaScript模塊加載器。提供簡單、極致的模塊化開發體驗。star:4100

  • Component 一個模塊化的JavaScript框架,同時也是面向前端的包管理器。

  • webpack一個模塊打包工具,你可使用WebPack管理你的模塊依賴,並編繹輸出模塊們所需的靜態文件。star:9K

動畫

  • animate.css 一個跨瀏覽器的CSS動畫庫。簡單易用易上手。star:23000

  • move.js 極小的 JavaScript 庫,支持 CSS3 的動畫效果,很是簡單優雅。star:2600

  • TweenJS 是一個簡單但強大的 Javascript 動畫庫。CreateJS 套件的一部分。star:1500

  • bounce.js 一個用於製做漂亮的 CSS3 關鍵幀動畫的 JavaScript
    庫,使用其特有的方式生成的動畫效果。star:3600

  • Swipe 號稱最精確的Slider觸摸庫,專爲移動設備優化。star:4.7K

  • tween.js 一款可生成平滑動畫效果的js動畫庫。tween.js容許你以平滑的方式修改元素的屬性值。它能夠經過設置生成各類相似CSS3的動畫效果。star:2.5K(7.15更新)

  • parallax.js輕量級的的視差引擎,能對智能設備的方向做出反應。。star:9K (10.17更新)

插件

 

  • zepto.fullpage 專一於移動端的全屏滾動插件。star:510

  • fullPage.js pc端的全屏滾動插件。 star:9500 view demo

  • onepage-scroll 能夠輕鬆創建一個動感的響應式的滾動效果頁面,比較適用於單頁面的專題站。支持現代瀏覽器和IE8以上版本。View demostar:7700

  • slick 一款徹底響應式的 jQuery 圖片滾動插件,可以根據容器自動適應寬度。star:10000 view demo

  • superslides 致力於解決網站大部分特效展現問題。網站上經常使用的「焦點圖/幻燈片」「Tab標籤切換」「圖片滾動」「無縫滾動」等只須要一個SuperSlide便可解決! view demo star:1100

  • jQuery-One-Page-Nav 當用戶滾動網頁時,實現平滑滾動和智能導航。star:1100

  • slider 一個jquery徹底開源的JavaScript代碼庫,用戶能夠開發,調試和深度定製本身的滑塊。star:850 view demo

  • github-hovercard github 鼠標懸停顯示用戶,倉庫等摘要信息。(10.15更新)

  • onepage-scroll 一款帶有背景視覺差效果的jQuery整頁滾動特效插件。star:8K (10.17更新)view demo

  • justlazy.js 輕量級js圖片延遲加載插件。(10.22更新)

框架、庫和組件

  • polymer web組件構建框架。一套以「一切皆組件、最少化代碼量、最少框架限制」爲設計理念的Web UI框架。 star:9900

  • impress.js 建立使人興奮的演示。使用CSS3的轉換和過渡,這個庫容許你建立使人印象深入的演示文稿。view demostar:24300

  • ionic 先進的HTML5 移動端開發框架。幫助開發者使用HTML5, CSS3和js作出難以想象的hybrid appstar:17000

  • reveal.js 基於CSS3的3D幻燈片工具。可以製做絢麗的演示文稿並生成HTML格式,將它發佈到web上。star:21500 view demo

 

  • pure.css 一組很小的,響應式的css組件,你能夠在網頁的項目上處處使用。star:12000

  • three.jsJavaScript編寫的WebGL第三方庫。提供了很是多的3D顯示功能。star:20000

  • TimelineJS 輕鬆製做時間軸。star:8000

  • jquery-pjaxajaxpushState的封裝,讓你能夠很方便的使用pushState技術,用以實現頁面無刷新加載。star:11500

  • highlight.js javascript語法高亮。既能夠運行在瀏覽器端也能夠運行在服務端。star:5500

  • commander.js Node.js命令行工具。star:3800

  • togetherjsMozilla打造的一款能夠給網站添加實時協做功能的JavaScript庫。star:5K

  • HTML.js 輕量級的簡化與DOM操做的js庫。view demo star:1.5K

  • MEAN.JS 全棧式javascript,使用`MongoDB, Express,
    AngularJSNode.jsstar:2.2K`

  • wechat.js 微信相關的 js 操做:分享、網絡、菜單。star:700

  • JavaScript-Load-Image 一個js加載和轉換圖像文件的庫。 star:1.2K [view
    demo][91]

  • progress.js 一個 jsCSS3的庫,幫助開發人員爲網頁上的每一個對象建立和管理進度條效果。star:1.6K view demo

  • foundation 號稱世界上最早進的響應式前端框架,也是一款Mobile First的框架。star:21K

  • Sugar 一個JavaScript庫。它擴展了現有的JS對象的方法,讓你能夠用更少的代碼作更多的事情。star:2.8K

  • todomvc 幫你挑選一款MV*框架,它使用不一樣的最流行的js MV*框架實現了一個相同的Todo應用。star:13K

  • yepnope.js 這是一個異步的條件加載框架,速度超快,只爲用戶加載須要的腳本。使用很是簡單,很是有用!star:2.5K

  • Material UI 是一個 CSS 框架和一組實現谷歌 Material Design 設計規範的 React
    組件。star:8.8K(6.28更新)

  • Pikaday 是一個 JavaScript 日期選擇器,特色是輕量級、無依賴和模塊化的
    CSSstar:2.8K view demo][100



  • vuejs 用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統,具備簡單、靈活的 API。star:6K(7.12更新)

  • meteor 超簡單的,數據庫無處不在的,用於自動化和簡化實時運行的 Web 應用程序的開發。純JavaScript的Web框架。star:27K(7.12更新)

  • webuploader
    一個簡單的以HTML5爲主,FLASH爲輔的現代文件上傳組件。支持大文件分片併發上傳,極大的提升了文件上傳效率。star:1.8K

  • fastclick觸摸UI上的消除點擊延遲js庫。star:1W(10.15更新)

  • wangEditor 輕量級web富文本框。 (10.15更新)

  • benchmark.js是強大的基準測試庫,幾乎適用於全部JavaScript平臺。支持high-resolution定時器,並返回重要的統計結果。star:1.7k(10.15更新)

  • headroom.js是一個輕量級、純 JS 組件,用來隱藏或展示頁面上的元素,爲你的頁面留下更多展現內容的空間。star:7.5K (10.15更新)

移動端

  • Swipe 加速移動觸摸滑塊與硬件之間的轉換。star:5000

  • hammer.js 一個支持多點觸摸的手勢庫。star:11000

  • amDoc 無線Web解決方案 - 文檔規範指南

  • amazeui 移動優先的跨屏前端框架。面向HTML5開發,使用css3作動畫和交互。star:4.1K

  • Zepto 一款面向移動端設備、APIjQuery兼容的基礎庫。

  • mui 最接近原生APP體驗的高性能框架 。star:1.1K(6.28更新)

  • Swiperjavascript打造的滑動特效插件,面向手機、平板電腦等移動終端。
    能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。star:6K(10月18更新)


    Node.js相關


http://nodeframework.com/ 專門收集node.jsweb框架的網站。其項目一樣均託管在github上。


  • nodeclub 使用 Node.jsMongoDB 開發的社區系統。star:3000

  • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300

  • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800

  • node-inspector 基於Blink開發者工具的Node.js調試器。star:7000

  • node-lessonsNode.js包教不包會。star:2.5K

  • nodePPT 使用nodejs寫的網絡幻燈片。多是迄今爲止最好的網頁版PPTstar:1.6K view demo

  • hexo 一款快捷,簡單,強大的博客框架,基於Nodejsstar:5.2K

  • koa 下一代Node.js Web 框架。由 Express 團隊設計。star:6.3K

  • awesome-nodejs 關於Nodejs 包和資源的收集。star:7K

  • connect Node平臺的中間件框架。Express就是基於Connect開發的。star:5.6K(6.29更新)

  • n node版本管理,tj大神所寫。star:2.7K

  • nvm node版本管理,經過bash腳原本管理。star:7.5K

React相關

  • react-styleReact.js 可維護的樣式組件

  • react-component 基於reactjs的組件。

  • react-native 一個用React構建native apps的框架。star:15000

  • react-native-guide 聚集了react-native學習資源與各種開源app。star:850

  • awesome-react 關於react的工具,資源,視頻的集合。star:700

  • Flux 是一個Facebook開發的、利用單向數據流實現的應用架構,用於
    ReactFlux應用有三個主要的部分組成:調度程序、存儲和視圖(React 組件)。star:6.8K(6.28更新)

  • iscroll 高性能,體積小,無外部依賴,跨平臺的滾動組件 star:6K(7.19更新)

HTML5

  •  

  • video.js 開源的HTML5和Flash視頻播放器。支持自定義進度條、按鈕以及工具欄的底色。star:9.1K

  • html5shiv 主要解決HTML5提出的新的元素不被IE6-9識別。star:6K(7.15更新)

  • brunch 快速的前端 HTML5 構建工具。star:4.5K(7.19更新)

  • ulkit 一個輕量級的、模塊化前端框架,它被用於快速開發強大的web界面。也是一款優秀的響應式HTML5 框架。star:5.3K (8.3更新)

模板引擎

  • Handlebars.js 一個js語義模板庫,能讓你輕鬆高效的編寫語義化模板。star:8.6K(6.29 update)

  • artTemplate 性能卓越的 js 模板引擎。star:1.7K

  • jade 一款高性能簡潔易懂的模板引擎,JadeHamlJavascript實現。star:8.7K

瀏覽器兼容方案

  • es6-shim 提供兼容性墊片,使ES6能兼容於傳統的JavaScript引擎。star:1.5K(7.15更新)

  • Modernizr 用來檢測瀏覽器功能支持狀況的JavaScript庫,能夠檢測18項CSS3功能以及40多項關於HTML5的功能。star:16000

  • normalize.css 一個可定製的 CSS 文件,使瀏覽器呈現的全部元素,更一致和符合現代標準。支持IE8+。star:17000

  • html5shiv 主要解決HTML5提出的新的元素不被IE6-9識別。star:6K(7.15更新)

  • css3please 跨瀏覽器自動生成css3前綴

  • Babel 是一款爲了寫下一代js的編譯器,無需等待瀏覽器支持就可使用新的語法。star:8.3K (7.29更新)

高產大牛

  • Evan You 前端輕量級框架MVVM框架vue.js做者,前Google工程師。followers:1.6K

  • TJ Holowaychuk Luna 編程語言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名開源項目的建立和貢獻者。 followers:14.1K

  • PaulIrish 著名的前端開發工程師,同時他也是Chrome開發者關係團隊成員,jQuery團隊成員,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K

  • Mike Bostock 知名可視化庫 D3.js的主要做者。followers:8.3K

  • Nicolas Gallagher Normalize.css 做者。followers:3.6K

  • 司徒正美 前端迷你MVVM框架Avalon做者。followers:2.1K

其餘

  • javascript-style-guide 最合理的使用javascript的方法。 star:18000

  • Mars 騰訊移動Web前端知識庫。star:1600

  • brackets 一款使用 HTML,CSS,JavaScript 建立的開源的針對 Web 開發的編輯器。star:23000

  • Ghost Node.js開發最新博客系統, 簡單簡潔, 響應式設計, 支持徹底自定義, 免費, 專一博客。star:16000

  • io.jsNodeJS裏分離出來的一條分支。star:13000

  • 2048 遊戲 view demo star:7000

  • ueditor 百度前端團隊出品的富本文編輯器。star:1.1K

優秀開源組織

 

本篇文章會持續更新,歡迎收藏。

文章已推送至個人github,歡迎pullrequest:https://github.com/webpushsky

相關文章
相關標籤/搜索