Github資源聚集javascript
綜合資源
資源連接聚集
電子書
優秀網站
我的博客html5
工具
- 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請求和響應)
- JSHint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code.
- 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
使用戶界面與業務數據(內容)分離,提升開發效率
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
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)
播放器或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
select 下拉選擇框架
input 文本輸入框自動完成
輸入框掩碼
標籤管理
按鈕
- Ladda - Buttons with built-in loading indicators.
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
視差滾動
- 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)
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
Background
- 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)
Navigation
- 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插件)
Gallery
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)