Github資源聚集

Github資源聚集javascript

綜合資源

資源連接聚集

電子書

優秀網站

  • 綜合
  • stackexchange.com - 包含Stack Overflow在內的43個不一樣領域站點的問答社區的總和
  • codeproject - 開源的程序設計網站,主要的使用者是Windows平臺上的程序員,每一篇文章幾乎都附有來源碼和例子css

  • 新聞類
  • Hacker News - 關於電腦黑客和創業公司的社會化新聞網站html

  • 博客類
  • 伯樂在線 - 小而精的精選博客,優秀的原創/譯文前端

我的博客html5

  • 粉絲日誌 - 跨界的IT博客|Hadoop家族, R, RHadoop, Nodejs, AngularJS, KVM, NoSQL, IT金融
  • 夢想天空(山邊小溪)的博客園 - 前端開發技術/網頁設計資源/HTML5 & CSS3技術分享java

  • 前端相關
  • codepen.io - 優秀HTML和CSS展現網站 :+1:
  • front-end-collect - 前端開發相關的優秀網站、博客、以及活躍開發者
  • codrops - 包含大量的優秀的前端交互案例,有大量炫酷的HTML5特效、CSS3特效、Js特效,有大量的前端設計教程
  • SDC設計師網址導航node

  • Java相關
  • programcreek - Java 代碼大全 :+1:
  • ImportNew - 專一Java & Android 技術分享react

  • 其它
  • Algomation - 查看、建立和分享算法的學習平臺jquery

工具

  • jsdelivr - 免費開源的 CDN 解決方案,用於幫助開發者和站長。包含 JavaScript 庫、jQuery 插件、CSS 框架、字體等等 Web 上經常使用的靜態資源)
  • freecdn - 前端公共庫cdn
  • soundjay - 用於網站使用的各類聲音特效
  • docker - 開源的應用程序容器引擎

API && 文檔 && 規範

JavaScript

====

Package Managers

在遠程主機存放JavaScript庫,並提供工具下載到本地或打包上傳

  • bower(twitter 推出的一款包管理工具,基於nodejs的模塊化思想,把功能分散到各個模塊中,讓模塊和模塊之間存在聯繫,經過 Bower 來管理模塊間的這種聯繫)
  • spm - Brand new static package manager.

Loaders

JavaScript模塊或加載系統

  • headjs(The only script in your HEAD)
  • RequireJS - A file and module loader for JavaScript.
  • SeaJS - A Module Loader for the Web.

Testing Frameworks

  • qunit - An easy-to-use JavaScript Unit Testing framework.
  • jasmine(DOM-less simple JavaScript testing framework)
  • jquery-mockjax(The jQuery Mockjax Plugin provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses)
  • jquery-mockjax (模擬ajax請求和響應)

QA Tools

  • JSHint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.

Building Tools

  • generator (爲你提供項目腳手架的生成系統, 完成新建文件、安裝模塊、類庫等重複性操做)

MVC Frameworks and Libraries

  • angular.js - HTML enhanced for web apps.
  • backbone - Give your JS App some Backbone with Models, Views, Collections, and Events.

Non-MVC Frameworks

非MVC結構框架,主要是綜合性的工具類庫

  • ember.js(A JavaScript framework for creating ambitious web applications)
  • react(A declarative, efficient, and flexible JavaScript library for building user interfaces.)
  • aralejs(開放、簡單、易用的前端基礎類庫)
  • todomvc(Backbone.js, Ember.js, AngularJS及更多框架版本的TODO應用)

UI Frameworks

  • fuelux(Extends Twitter Bootstrap with additional lightweight JavaScript controls.)
  • ionic(Advanced HTML5 mobile development framework and SDK. Build great hybrid apps with web technologies you already know and love. Best friends with AngularJS.
    )

Data Binding

  • way.js(簡單、輕量級、穩定的雙向數據綁定庫)
  • bindonce(Zero watches binding for AngularJs)
  • swarm(JavaScript replicated model (M of MVC) library)

Templating Engines

使用戶界面與業務數據(內容)分離,提升開發效率

  • handlebars.js(JavaScript語義模板庫,經過對view和data的分離來快速構建Web模板)
  • mustache.js(Minimal templating with {{mustaches}} in JavaScript)
  • artTemplate(性能卓越的 js 模板引擎)

Data Visualization

以圖表或圖形化方式展現數據

Timeline

  • TimelineJS(A Storytelling Timeline built in JavaScript)

Gantt

Mind Map

  • treed(Powerful Tree Editor)
  • springy(A force directed graph layout algorithm in JavaScript)
  • arbor(a graph visualization library using web workers and jQuery)

PPT

  • nodePPT(這多是迄今爲止最好的網頁版PPT)
  • impress.js(It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.)

Flowchart

  • mermaid(Generation of diagram and flowchart from text in a similar manner as markdown)

File Upload

  • jQuery-File-Upload(功能強大的文件上傳組件,你值得擁有)
  • plupload(Plupload is a JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash. )
  • webuploader(It's a new file uploader solution!)
  • angular-file-upload(An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers)

Editors

Utility

JavaScript實用工具庫

  • underscore(JavaScript工具庫,提供了經常使用的功能函數,而不繼承任何JavaScript內置對象)
  • jquery-mousewheel(A jQuery plugin that adds cross-browser mouse wheel support.)
  • 101(A modern JS utility library)
  • jsqrcode(Javascript QRCode scanner)
  • ChromeSnifferPlus(Chrome探測器,能夠探測正在使用的開源軟件或者js類庫)
  • zeroclipboard(The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.)
  • jsdoc(An API documentation generator for JavaScript. )
  • FeHelper(Web前端助手--FeHelper(Chrome擴展))
  • minimap(A preview of full webpage or its DOM element with flexible positioning and navigation support :+1:)

Files

Code Formattring

Functional Programming

把運算過程儘可能寫成一系列嵌套的函數調用的"結構化編程"的JavaScript庫

Reactive Programming

更加有效率地處理事件流,而無需顯式去管理狀態

  • RxJS(The Reactive Extensions for JavaScript)
  • ripple(A tiny foundation for building reactive views)

Data Structure

  • immutable-js(Immutable Persistent Data Collections for Javascript)
  • seamless-immutable(Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.)
  • sift.js (受MongoDB啓發的數組過濾庫)

Date

  • moment(Parse, validate, manipulate, and display dates in javascript.)
  • date(Date() for humans)
  • timezone-js(Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.)

String

  • underscore.string(String manipulation extensions for Underscore.js javascript library. )
  • string.js(Extra JavaScript string methods.)

Number

  • numbers.js(Advanced Mathematics Library for Node.js and JavaScript)
  • accounting.js(A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies)
  • buddy.js(Magic number detection for JavaScript)
  • jquery-number(Easily format numbers for display use. Replace numbers inline in a document, or return a formatted number for other uses.)

Promise

  • q(A tool for making and composing asynchronous promises in JavaScript)
  • promise(Bare bones Promises/A+ implementation)
  • promisejs(Lightweight javascript implementation of promises.)

Storage

  • localForage(Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API)
  • jStorage(jStorage is a simple key/value database to store data on browser side)
  • cross-storage(Cross domain local storage, with permissions)
  • Cookies(JavaScript Client-Side Cookie Manipulation Library)
  • jquery-cookie(簡單、輕量級的cookie操做的jQuery插件)

Color

I18n And L10n

國際化和本地化

  • i18n-js(It's a small library to provide the I18n translations on the Javascript. It comes with Rails support)
  • i18next(internationalisation (i18n) with javascript the easy way (incl. jquery plugin))
  • jquery-i18n(A jQuery plugin for doing client-side translations in javascript)
  • l10n.js(Passive localization JavaScript library)

Class

JavaScript類繼承模型

  • klass(A utility for creating expressive classes in JavaScript)

Control Flow

  • wind(Wind.js是頗有特色的一個JavaScript異步編程類庫(其前身爲Jscex), Wind.js的惟一目的即是「改善編程體驗」,改善的「程度」以及改善的「方式」即是Wind.js與其餘異步流程控制方案最大的區別)
  • co(The ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc))
  • step(An async control-flow library that makes stepping through logic easy.)

Routing

  • director(a tiny and isomorphic URL router for JavaScript)
  • page.js(Micro client-side router inspired by the Express router (~1200 bytes))
  • crossroads.js(JavaScript Routes)
  • pathjs(Simple, lightweight routing for web browsers)
  • app-router(Router for Web Components)
  • jquery-address (jQuery Address - Deep linking for the masses)
  • history.js(gracefully supports the HTML5 History/State APIs)(pushState, replaceState, onPopState) in all browsers)
  • js-url(簡單、輕量級的url解析器)
  • ui-router(The de-facto solution to flexible routing with nested views)

Security

  • H5SC(HTML5 Security Cheatsheet)
  • js-xss(Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist. 根據白名單過濾HTML(防止XSS攻擊))
  • DOMPurify(DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.)

Log

  • log(Console.log with style)
  • console.image(The one thing Chrome Dev Tools didn't need.)

RegExp

  • regexr(RegExr is a HTML/JS based tool for creating, testing, and learning about Regular Expressions)
  • JSVerbalExpressions(Create regular expressions using chained methods)
  • regulex(JavaScript Regular Expression Parser & Visualizer)
  • xregexp(Extended JavaScript regular expressions)
  • regexpbuilderjs(Create regular expressions using chained methods)

Media

播放器或CSS3媒體查詢

  • video.js(open source HTML5 & Flash video player)
  • muplayer(An open source web audio player from Baidu Music, support HTML5 and Flash engine on different platforms(百度音樂播放內核))
  • clappr(An extensible media player for the web)
  • mediaelement(HTML5
  • matchMedia.js(matchMedia polyfill for testing media queries in JS)

Voice Command

  • annyang(A javascript library for adding voice commands to your site, using speech recognition)
  • voicechat(VoiceChat is a set of APIs to create conference rooms on the fly to be used in the browser. Its built using the Plivo WebSDK and APIs)

API

  • jscapture(Screen recording and capturing with pure client-side JavaScript.)
  • brocco(在瀏覽器在將源碼和註釋抽離顯示在兩側,方便閱覽)

Vision Detection

  • tracking.js(A modern approach for Computer Vision on the web :+1:)
  • jsfeat(JavaScript Computer Vision library)

Code Highlighting

Loading Status

加載狀態指示器庫,通常用於Ajax請求時

  • nprogress(For slim progress bars like on YouTube, Medium, etc)
  • spin.js(A spinning activity indicator)
  • progress.js(ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.)
  • progressbar.js(Beautiful and responsive progress bars)
  • bootstrap-progressbar(progressbar interactions for twitter bootstrap 2 & 3 :+1:)
  • Ladda(Buttons with built-in loading indicators)
  • is-loading(Simple jQuery plugin to show visual feedback when loading data or any action that would take time)
  • GridLoadingEffects(Some inspiration for loading effects of grid items using CSS animations.)
  • flipload(Flipping elements and show a loading indicator easily.)
  • jquery-loading-overlay(jQuery Loading Overlay Plugin)

Lazy Load

延遲(異步)加載資源,提升頁面訪問速度

  • echo(Lazy-loading images with data-* attributes)
  • jquery_lazyload(jQuery plugin for lazy loading images)
  • lazysizes(High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.)
  • basket.js(A script and resource loader for caching & loading files with localStorage)
  • text(An AMD loader plugin for loading text resources)
  • eCSSential(An experiment in optimized loading of mobile-first responsive CSS)

Validation

Keyboard Wrappers

鍵盤事件

  • mousetrap(Simple library for handling keyboard shortcuts in Javascript)
  • jquery.hotkeys(jquery.hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination)
  • KeyboardJS(A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts)

鍵盤UI

  • Keyboard(Virtual Keyboard using jQuery UI)

Tours And Guides

  • bootstrap-tour(Quick and easy product tours with Twitter Bootstrap Popovers)
  • hopscotch(A framework to make it easy for developers to add product tours to their pages)
  • jquery-tourbus(A jQuery tour/walkthrough plugin)
  • shepherd(Guide your users through a tour of your app #hubspot-open-source)

Notifications

  • toastr(Simple javascript toast notifications)

Sliders

  • unslider(最簡單的jQuery滑塊插件)
  • slick(the last carousel you'll ever need)
  • Ideal-Image-Slider(Quite simply the ideal Image Slider in vanilla JS.)
  • jquery.smoothState.js(A jQuery plugin to stop the jank of page loads.)
  • bxslider-4(Responsive jQuery content slider)
  • slider(Bootstrap Javascript jQuery Carousel/Slider/Slideshow/Gallery/Banner Responsive Image :+1:)

Range Sliders

  • ion.rangeSlider(jQuery only range slider)
  • bootstrap-slider (bootstrap範圍滑塊)
  • jQRangeSlider(A jquery UI range selection slider that supports dates)
  • rangeslider.js(HTML5 input range slider element polyfill)
  • noUiSlider(輕量級的jQuery範圍滑塊插件,支持大多數設備的touch事件,包括IOS, Android, Windows 8 和 Windows Phone 8)

Form Widgets

select 下拉選擇框架

  • select2 - 支持搜索、遠程數據訪問、無限下拉滾動 :ok_hand:
  • jquery.selectBoxIt.js - 兼容移動端的、bootstrap風格的jQuery選擇框插件,Wonderful!
  • multi-select - 一個替換標準選擇框的、用戶友好的多屬性添加與移除選擇框
  • bootstrap-select - 基於Twitter Bootstrap的下拉選擇框
  • selectize.js - 個基於jQuery的自定義select UI 控件,具備自動完成、相似原生選擇框的鍵盤導航及較好的用戶體驗
  • bootstrap-multiselect - 基於Bootstrap的多選下拉框jQuery插件

input 文本輸入框自動完成

  • visualsearch - 加強的、可自動完成的搜索框jQuery插件
  • typeahead.js - is a fast and fully-featured autocomplete library
  • floatlabels.js - Follows the famous Float Label Pattern. Built on jQuery.

輸入框掩碼

標籤管理

  • bootstrap-tagsinput - 基於Twitter Bootstrap的可編輯標籤jQuery插件)
  • tagmanager - A jQuery plugin (working nicely with twitter bootstrap)

按鈕

  • Ladda - Buttons with built-in loading indicators.

Tooltips

Positioning

  • tether(A positioning engine to make overlays, tooltips and dropdowns better)
  • fixto(A jQuery plugin for sticky positioning)
  • position(Position Utility)
  • fixed-sticky(A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback)

Modals and Popups

  • jBox (強大靈活的彈窗、消息提示、通知...jQuery插件 :clap:)
  • flippant.js(一個迷你、依賴少的DOM節點翻轉UI庫 :+1: )
  • sweetalert(A beautiful replacement for JavaScript's "alert")
  • bootstrap-sweetalert(Bootstrap implementation)
  • noty(noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - b messages as an alternative the standard alert dialog. Each notification is added to a queue.)
  • alertify.js

Scroll

  • scrollup (建立自定義「回到頂部」的jQuery插件)
  • jquery.scrollTo
  • jquery.nicescroll(相似iphone/ipad的滾動條)
  • jQuery-slimScroll (能夠把任何Div轉換成帶漂亮滾動條的可滾動區域)
  • nanoScrollerJS(同上)
  • antiscroll(OS X Lion style cross-browser native scrolling on the web that gets out of the way.)
  • skrollr(Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love))
  • onepage-scroll(Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin)
  • smooth-scroll(A simple vanilla JS script to animate scrolling to anchor links.)
  • reveal.js(The HTML Presentation Framework)
  • scrollReveal.js(Easily reveal elements as they enter the viewport.)

視差滾動

  • parallax(Parallax Engine that reacts to the orientation of a smart device)
  • jQuery-Parallax(Used to recreate the Nike Better World parallax effect)
  • Parallaxjs(A Library for Javascript that allows easy page parallaxing)

Table/Grid

  • jquery-dynatable (A more-fun, semantic, alternative to datatables:thumbsup:)
  • grid(Drag and drop library for two-dimensional, resizable and responsive lists)

Pagination

Editable

  • x-editable(In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery :thumbsup:)

Sortable

  • html5sortable(Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.)

Chart

  • echarts (來自百度的直觀,生動,可交互,可個性化定製的數據可視化圖表庫 :thumbsup:)
  • peity(Progressive <svg> pie, donut, bar and line charts)
  • morris.js(Pretty time-series line graphs)
  • jquery.sparkline(A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser)
  • morris.js(漂亮、簡單的折線圖)

WebGL

Graphics Library

  • raphael(JavaScript Vector Library)
  • AlloyImage(基於HTML5的專業級圖像處理開源引擎)
  • d3(A JavaScript visualization library for HTML and SVG.)
  • lazy-line-painter(A JQUERY PLUGIN FOR SVG PATH ANIMATION)
  • SVG-Morpheus(實現SVG圖標變造成另一個SVG 圖標的過渡效果的JavaScript庫,借鑑了Material風格的過渡效果 :+1:)
  • obelisk.js (Obelisk.js是個很是酷的JS庫,它本質上是一個建立等距對象的JavaScript引擎)

Images

  • holder - 客戶端圖片佔位器
  • jQuery-menu-aim(用於電商網站的多級商品菜單)
  • jQuery.mmenu (The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.)
  • jQuery-contextMenu(contextMenu manager)
  • metisMenu(Easy menu jQuery plugin for Twitter Bootstrap 3)
  • toc(根據頁面內容生成目錄的jQuery插件)
  • jquery.tocify.js(Bootstrap風格的目錄jQuery插件)

Background

  • Vide(視頻背景效果Jquery插件)
  • jquery-backstretch (動態伸縮頁面元素、幻燈片式輪播背景圖片)

Effects Widgets

  • jquery.pin(將任意頁面元素「釘」在某個容器頂部,並且在尺寸小的屏幕上可以自動禁用這種效果)
  • stickUp(讓頁面目標元素 「固定」 在瀏覽器窗口的頂部)
  • headroom.js(爲頁面頂部多留些空間。在不須要頁頭時將其隱藏)
  • fullPage.js (fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple)
  • jquery-focuspoint(jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.)
  • shine.js(A library for pretty shadows.)
  • real-shadow(Module that casts photorealistic shadows)
  • gif.js(JavaScript GIF encoding library)
  • jquery-collagePlus(Create an image gallery like Google+ Albums)
  • zoom.js(zoom in on any element in the DOM)
  • Blur.js(blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.)
  • tip_cards(Create a card layout that let your user flip through it like you see on Google Tips)
  • purplecoat.js(Simple Labeled Overlays)
  • textillate(A simple plugin for CSS3 text animations :+1:)
  • focusable(Set a spotlight focus on DOM element adding a overlay layer to the rest of the page)
  • intro.js(A better way for new feature introduction and step-by-step users guide for your website and project.)
  • navgoco(Multi-level slide navigation with session storage and accordion effect for JQuery)
  • TinyNav.js(Responsive navigation plugin that weighs just 443 bytes)
  • flexnav(A jQuery plugin for responsive menus)
  • jquery-steps(A powerful jQuery wizard plugin that supports accessibility and HTML5.)
  • intro.js(以一種更好的方式展現新特性,很是適合用於在你的網站或項目上一步一步引導用戶)

Responsive

  • Respond(A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more))
  • responsive-nav.js(Responsive navigation plugin without library dependencies and with fast touch screen support.)

Drag Drop

  • dropzone(簡單地拖放庫,支持圖片預覽,有好看的進度條。)
  • jquery.pep.js(Pep, a lightweight plugin for kinetic drag on mobile/desktop)
  • jquery-filedrop(drag and drop desktop files and POST to a URL to handle files)
  • Bootstrap-Form-Builder(Web app for drag drop building bootstrap forms)
  • formbuilder(Formbuilder is a small graphical interface for letting users build their own webforms)
  • dragdealer(Drag-based JavaScript component, embracing endless UI solutions)
  • Nestable(可拖拽的層級列表,兼容移動端touch的jQuery插件)

Material

Hand-drawing Animation

  • vivus(JavaScript library to make drawing animation on SVG)
  • walkway(An easy way to animate simple SVG elements.)

Animations

  • jQuery-Animate-Enhanced(Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE>=10 and Opera and convert animations automatically.)
  • sprite.js(An efficient javascript sprite animation framework)

Other Resources

CSS

    • CSS
    • bootstrap (簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單:thumbsup:)
    • uikit (輕量級和模塊化的前端框架,快速開發web程序)
    • Semantic-UI(語義化設計的前端框架,爲攻城師而製做的可複用的開源前端框架)
    • amazeui (中國首個開源 HTML5 跨屏前端框架)
    • switchery (IOS7風格的checkbox)
    • animate.css (簡單的、跨瀏覽器的CSS動畫庫)
    • Buttons(A CSS button library built using Sass and Compass)
    • bootstrap-switch(Turn checkboxes and radio buttons in toggle switches. :+1:)
    • iCheck(Highly customizable checkboxes and radio buttons (jQuery & Zepto) )
    • messenger(Growl-style alerts and messages for your app. #hubspot-open-source)
    • css3patterns(The popular CSS3 patterns gallery)
    • 960-Grid-System(The 960 Grid System is an effort to streamline web development workflow.)
    • SubtlePatterns(All the patterns)
    • colors(Smarter defaults for colors on the web. )
    • ratchet(Build mobile apps with simple HTML, CSS, and JS components. )
    • colour-schemes(Colour schemes for a variety of editors created by Dayle Rees. )
    • bootswatch(Themes for Bootstrap)
    • ionicons(The premium icon font for Ionic Framework)
    • bootstrap-material-design(Material design theme for Bootstrap 3)
    • HoverEffectIdeas(Some inspiration and modern ideas for subtle hover effects.)
    • dashboards(Responsive dashboard templates for Bootstrap)
    • flipboard-layout(An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.)
    • textillate(A simple plugin for CSS3 text animations)
    • magic(CSS3 Animations with special effects)
相關文章
相關標籤/搜索