时间戳

首页 > 技术文章 > Github资源汇集

Github资源汇集

yuqlblog 2016-03-16 10:02 原文

Github资源汇集

综合资源

资源链接汇集

电子书

优秀网站

  • 综合
  • stackexchange.com - 包含Stack Overflow在内的43个不同领域站点的问答社区的总和

  • codeproject - 开源的程序设计网站,主要的使用者是Windows平台上的程序员,每一篇文章几乎都附有来源码和例子

  • 新闻类

  • Hacker News - 关于电脑黑客和创业公司的社会化新闻网站

  • 博客类

  • 伯乐在线 - 小而精的精选博客，优秀的原创/译文

个人博客

工具

  • 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)

推荐阅读