前端资源总览
目录
- JavaScript 框架
- JavaScript 库
- UI 框架
- 前端游戏框架
- 打包工具
- 前端脚手架
- Node.js 框架
- 可视化插件
- CSS 处理器
- 测试相关
- 状态管理
- 小程序相关
- 性能分析工具
- 包管理工具
- 前端编码规范
- 项目集成及自动化
- git 仓库
- 在线工具
- UA 识别
- 页面交互
- 音频/视频
- APP 框架
- CSS 框架
- 富文本编辑器/Markdown编辑器/Markdown解析器
- 颜色(CSS Colors)/SVG/Canvas
- 代码高亮插件/代码编辑器
- 动画(Animate)
- 本地存储
- 模板引擎
- 加密/转码
- 计算机相关书籍
JavaScript 框架
JavaScript 库
- jquery
- lodash
- zepto
- underscore.js
- immutable-js 数据集控制
- sprint
- lazy.js 像 underscore.js 的工具库
- dayjs 操作日期库
- dayjs 在javascript中解析，验证，操作和显示日期，类似 moment
- moment 在javascript中解析，验证，操作和显示日期
- tui.calendar 日历库
- em-cookie cookie 的处理
- EM-NORMALIZE 样式重置
UI 框架
基于 Vue.js
- quasar-framework
- vue-material
- vuetify
- muse-ui
- buefy
- element-ui
- vulma
- vue-bulma-components
- iview-ui
- AT-UI
- v-semantic - 参照 semantic-ui
- bootstrap-vue 参照 bootstrap-4
- fish-ui
- Zircle UI
- vue-mdc-adapter guidelines.
- Material Components Vue material-components-web
- PrimeVue
- vuesax
- vuecidity
- em-fe
基于 react
基于 angular
基于 jquery
前端游戏框架
- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
- Stage.js
- phaser - 一个快速、免费、开源的 HTML5 游戏框架
- lufylegend.js
打包工具
前端脚手架
Node.js 框架
可视化插件
CSS 处理器
测试相关
状态管理
小程序相关
性能分析工具
- analyze-css CSS选择器的复杂性和性能分析器
包管理工具
前端编码规范
- Airbnb 的 JavaScript 编码规范
- JavaScript Standard Style
- clean-code-javascript - javascript 编码风格指南
- spec - 百度前端团队代码规范
项目集成及自动化
git 仓库
在线工具
在线编程
转换
图标管理
其他
UA 识别
页面交互
Slider
- slick - the last carousel you'll ever need
- Swipe - the most accurate touch slider
- Swiper - Most modern mobile touch slider
- iscroll - Smooth scrolling for the web
- iSlider - 移动端滑动组件
- OwlCarousel - create beautiful responsive carousel slider
- jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
- Glide.js - 轻量级滑块组件
- PhotoSwipe
- TouchSlide - 触屏滑动特效(焦点图,Tab切换)
- better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance
瀑布流
懒加载/加载监听/预加载
- imagesLoaded
- Echo.js
- lazySizes
- jquery_lazyload
- BttrLazyLoading
- lazyload.js
- layzr.js - 一个小巧快速的图片懒加载库
- waitForImages - 图片加载监听库
- PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
- bindWithDelay - jQuery Plugin For Delayed Event Execution
- TypeWatch - 停止输入时调用
图片轮播(幻灯片)/图片展示
- FlexSlider
- unslider - 小而美的轮播库
- prettyPhoto
- FlickerPlate - A cool jQuery plugin that lets you flick through content.
- Holder.js - Client-side image placeholders.
- RowGrid.js - 在径直的行里放置图片
- ImageLightbox.js - 灯箱效果
- JQuery Panorama Viewer - 全景视图
- Intense Images - 全屏查看图片
- Picturefill - 一个响应式图片 JS 插件
- zoom.js - 一个 jQuery 图片放大插件
- watermarkjs - 一个在浏览器中添加图片水印的 JS 库
- responsive-images.js
- Turntable.js - 轻易实现图像的3D旋转
- ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分
- react-slick - React 实现的轮播图插件
图片剪裁/图片处理
- Jcrop - Image Cropping Plugin for jQuery
- croppic - an image cropping jquery plugin
- smartcrop.js - 智能图片裁剪库
- jQuery.eraser - 图像擦除插件
- DD_belatedPNG.js - 让IE6支持透明PNG图片
- FocusPoint.js 实现图片的响应式裁剪
- imgareaselect
- CSSgram - CSS 实现的 Instagram 滤镜库
- instagram.css - 另一个 CSS 实现的 Instagram 滤镜库
- antimoderate - 图片模糊库
进度条/加载动画(Loading)
- NProgress.js
- progress.js
- Pace - Automatic page load progress bar
- jquery-ajax-progress
- nanobar - Very lightweight progress bars.
- waitMe - 很漂亮的loading效果
- spin.js
- sonic.js
- fakeLoader.js
- loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
- css-loaders
- Sausage - 跟踪滚动条并记录当前阅读所处节点
- loading.io - 一个 Loading 图标的网站
侧滑插件(offcancas)
菜单(Menu)
滚动侦测(ScrollSpy)
滚动加载更多/下拉刷新(Pull to Refresh)
- jScroll
- web-pull-to-refresh
- pulltorefresh
- RubberBand.js - add pull-to-refresh functionality to any page.
平滑滚动插件(Smooth Scroll)
- jquery-smooth-scroll
- jquery.scrollTo - 平滑滚动到页面指定位置
- smooth-scroll
- scrollUp
- elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件
全屏滚动/全屏切换
- pagePiling.js - 全屏滚动效果
- fullPage.js
- onepage-scroll
- zepto.fullpage - 专注于移动端的fullPage.js
- screenfull.js - 切换全屏模式
分屏滚动
转场效果
固定元素(Sticky)
触控事件
拖拽组件
隐藏或展示页面元素
滚动条(Scrollbar)
视差滚动(Parallax Scrolling)
缩放 (Zooming)
下载组件
Ajax模块
- fetch - A window.fetch JavaScript polyfill
- reqwest - browser asynchronous http requests
- ajax - Standalone AJAX library
- then-request
- browser-request
- superagent
- minAjax.js
- qwest 第三方的Ajax库
- axios - Promise based HTTP client for the browser and node.js
- whatwg-fetch
- jsonp跨域处理
- isomorphic-fetch
- em-jsonp 跨域处理
音频/视频
- jPlayer - HTML5 Audio & Video for jQuery
- video.js - HTML5 & Flash video player
- Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
- Clappr - 开源的Web视频播放器
- Plyr - A simple HTML5 media player
- FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- BigVideo.js - The jQuery Plugin for Big Background Video
- BigScreen - A simple library for using the JavaScript Full Screen API
- Vide - 视频背景
- winamp2-js
- Buzz - A Javascript HTML5 Audio library
- MediaElement.js
APP 框架
CSS 框架
富文本编辑器/Markdown编辑器/Markdown解析器
- Simditor - 简单快速的富文本编辑器
- BachEditor - 一个有情怀的编辑器
- TinyMCE
- bootstrap-markdown
- marked - markdown解析器
- Markdown Plus
- Editor.md - 开源在线Markdown编辑器
- stackedit
- Redactor Text Editor
- micromarkdown.js - 轻量级的md解析器
- wangEditor - 支持移动端的轻量级web富文本框
- CKEditor - 可视化 HTML 编辑器
- Quill - 富文本编辑器
- xEditor - 富文本编辑器
颜色(CSS Colors)/SVG/Canvas
- CSS Colours
- SVGeneration
- SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
- Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
- Seen.js - 渲染3D场景为SVG或者HTML Canvas
- jquery-color - 可以动态改动颜色
- lee-colorpicker
代码高亮插件/代码编辑器
- google-code-prettify
- highlight.js
- Rainbow
- ACE
- CodeMirror
- Crayon Syntax Highlighter
- prism - Lightweight, robust, elegant syntax highlighting.
动画(Animate)
- animate.css - A cross-browser library of CSS animations.
- Transit - CSS transitions and transformations for jQuery
- anime.js - Javascript 动画引擎
- WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
- AniJS - A Library to Raise your Web Design without Coding
- Move.js - 简化CSS3动画的JS库
- ScrollMe – 在网页中加入各种滚动动画效果
- Effeckt.css - A Performant Transitions and Animations Library
- NEC动画库
- csshake - CSS classes to move your DOM
- magic - CSS3 Animations with special effects
- SpinKit
- Velocity.js - 加速JavaScript动画
- lenticular.js - 响应倾斜或鼠标事件创建图片动画
- jQuery Interactive 3D - Create a 3D interactive object using images
- AnimateScroll - A Simple jQuery Plugin for Animating Scroll
- Blast.js - 把动画和样式注入到文本中
- Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
- Sticker.js - create a Sticker Effect
- scrollReveal.js - 元素进入可视区域自动触发设置好的动画
- stroll.js - CSS3 list scroll effects
- jQuery Easing - 动画效果扩展
- animations - CSS3 ANIMATION CHEAT SHEET
- iconate.js：将 icons 增加动画效果的 JS 库
- Odometer - 数字之间的垂直切换
- Hover - 悬停效果
- Multi-touch gestures library - Web手势库
本地存储
- cross-storage - Cross domain local storage
- localForage
- pouchdb
- basil.js
- Neurosync - JavaScript 本地离线 ORM 库
- LokiJS - 性能优先的 JavaScript 内存数据库
- turbolinks - Javascript pushState
模板引擎
- doT.js
- mustache.js
- Handlebars.js
- artTemplate
- baiduTemplate
- JSRender
- EJS - JavaScript Templates
- Juicer - A Light Javascript Templete Engine.
- Tempo
- json2html
- Hogan.js - JavaScript templating from Twitter.
- Dust.js - Linkedin维护的项目
- nunjucks - A powerful templating engine
加密/转码
计算机相关书籍
操作系统
- 开源世界旅行手册
- 鸟哥的Linux私房菜
- The Linux Command Line (中英文版)
- Linux 设备驱动 (第三版)
- 深入分析Linux内核源码
- UNIX TOOLBOX
- Docker中文指南
- Docker —— 从入门到实践
- Docker入门实战
- Docker Cheat Sheet
- FreeRADIUS新手入门
- Mac 开发配置手册
- FreeBSD 使用手册
- Linux 命令行(中文版)
- Linux 构建指南
- Linux工具快速教程
- Linux Documentation (中文版)
- 嵌入式 Linux 知识库 (eLinux.org 中文版)
- 理解Linux进程
- 命令行的艺术
- SystemTap新手指南
- 操作系统思考
智能系统
分布式系统
编译原理
函数式概念
计算机图形学
WEB服务器
- Nginx开发从入门到精通 (淘宝团队出品)
- Nginx教程从入门到精通(PDF版本，运维生存时间出品)
- OpenResty最佳实践
- Apache 中文手册
版本控制
- Git教程 （本文由 廖雪峰 创作，如果觉得本教程对您有帮助，可以去 iTunes 购买）
- git - 简易指南
- 猴子都能懂的GIT入门
- Git 参考手册
- Pro Git
- Pro Git 中文版 (整理在gitbook上)
- Git Magic
- GotGitHub
- Git权威指南
- Git Community Book 中文版
- Mercurial 使用教程
- HgInit (中文版)
- 沉浸式学 Git
- Git-Cheat-Sheet （感谢 @flyhigher139 翻译了中文版）
- GitHub秘籍
- GitHub帮助文档
- git-flow 备忘清单
- svn 手册
- GitHub漫游指南
编辑器
- exvim--vim 改良成IDE项目
- 笨方法学Vimscript 中译本
- Vim中文文档
- 所需即所获：像 IDE 一样使用 vim
- vim 实操教程
- Atom飞行手册中文版
- Markdown·简单的世界
- 一年成为 Emacs 高手
- Emacs 生存指南
- Atom官方手册
管理和监控
- ELKstack 中文指南
- Mastering Elasticsearch(中文版)
- ElasticSearch 权威指南
- Elasticsearch 权威指南（中文版）
- Logstash 最佳实践
- Puppet 2.7 Cookbook 中文版
项目相关
- 持续集成（第二版） (译言网)
- 让开发自动化系列专栏
- 追求代码质量
- selenium 中文文档
- Selenium Webdriver 简易教程
- Joel谈软件
- 約耳談軟體(Joel on Software)
- Gradle 2 用户指南
- Gradle 中文使用文档
- 编码规范
- 开源软件架构
- GNU make 指南
- GNU make 中文手册
- The Twelve-Factor App
设计模式
Web 前端
- 关于浏览器和网络的 20 项须知
- 浏览器开发工具的秘密
- Chrome 开发者工具中文手册
- Chrome扩展开发文档
- Grunt中文文档
- gulp中文文档
- Gulp 入门指南
- 移动Web前端知识库
- 正则表达式30分钟入门教程
- 前端开发体系建设日记
- 移动前端开发收藏夹
- JSON风格指南
- HTTP 接口设计指北
- 前端资源分享（一）
- 前端资源分享（二）
- 前端代码规范 及 最佳实践
- 前端开发者手册
- 前端工程师手册
- w3school教程整理
- Wireshark用户手册
- 一站式学习Wireshark
- HTTP 下午茶
- HTTP/2.0 中文翻译
- RFC 7540 - HTTP/2 中文翻译版
- http2讲解
- 3 Web Designs in 3 Weeks
- 站点可靠性工程
编程艺术
- 程序员编程艺术
- 每个程序员都应该了解的内存知识(译)【第一部分】
- 取悦的工序：如何理解游戏 (豆瓣阅读，免费书籍)
JavaScript
- Google JavaScript 代码风格指南
- Google JSON 风格指南
- Airbnb JavaScript 规范
- JavaScript 标准参考教程（alpha）
- Javascript编程指南 (源码)
- javascript 的 12 个怪癖
- JavaScript 秘密花园
- JavaScript核心概念及实践 (PDF) (此书已由人民邮电出版社出版发行，但作者依然免费提供PDF版本，希望开发者们去购买，支持作者)
- 《JavaScript 模式》 “JavaScript patterns”中译本
- 命名函数表达式探秘 (注:原文由为之漫笔翻译，原始地址无法打开，所以此处地址为我博客上的备份)
- 学用 JavaScript 设计模式 (开源中国)
- 深入理解JavaScript系列
- ECMAScript 5.1 中文版
- ECMAScript 6 入门 (作者：阮一峰)
- JavaScript Promise迷你书
- You-Dont-Know-JS (深入JavaScript语言核心机制的系列图书)
- JavaScript 教程 廖雪峰
- MDN JavaScript 中文文档
- jQuery
- Node.js
- underscore.js
- backbone.js
- AngularJS
- Zepto.js
- Sea.js
- React.js
- impress.js
- CoffeeScript
- TypeScipt
- ExtJS
- Meteor
- Chrome扩展及应用开发
Shell
读书笔记及其它
- 编译原理（紫龙书）中文第2版习题答案
- 把《编程珠玑》读薄
- 学习笔记: Vim、Python、memcached
- 精彩博客集合
- 中文文案排版指北
- Git Cheatsheet Chs
- GitBook简明教程
- JavaScript语言精粹
- 提问的智慧
- Markdown 入门参考
- AsciiDoc简明指南
- 背包问题九讲
- 老齐的技术资料
- 前端技能汇总
- 借助开源项目，学习软件开发
- 前端工作面试问题
- leetcode/lintcode题解/算法学习笔记
- 前端开发笔记本
- OpenWrt智能、自动、透明翻墙路由器教程
- SAN 管理入门系列
- Sketch 中文手册
- 深入理解并行编程
- 程序员的自我修养
- Growth: 全栈增长工程师指南
