❤️❤️❤️前端成神之路必看学习资源（二），建议收藏起来，偷偷学习！！！❤️❤️❤️

admin管理员组

文章数量:1660067

整理一下我博客上的学习资源，具体可以查看我的个人博客：[卡夫卡的岛上书店–资源工具]

• https://kaimo313.gitee.io/blogs/resource-tools/
• https://kaimo313.github.io/blogs/resource-tools/

冴羽的博客

下面是冴羽大佬写的系列文章，如果觉得写得不错可以去大佬项目star一下

浏览器相关

1. 浏览器系列之 Cookie 和 SameSite 属性

面试相关

1. 淘系前端校招负责人元彦直播答疑文字实录
2. 业务前端的困境

深入系列目录

1. JavaScirpt深入之从原型到原型链
2. JavaScript深入之词法作用域和动态作用域
3. JavaScript深入之执行上下文栈
4. JavaScript深入之变量对象
5. JavaScript深入之作用域链
6. JavaScript深入之从ECMAScript规范解读this
7. JavaScript深入之执行上下文
8. JavaScript深入之闭包
9. JavaScript深入之参数按值传递
10. JavaScript深入之call和apply的模拟实现
11. JavaScript深入之bind的模拟实现
12. JavaScript深入之new的模拟实现
13. JavaScript深入之类数组对象与arguments
14. JavaScript深入之创建对象的多种方式以及优缺点
15. JavaScript深入之继承的多种方式以及优缺点
16. JavaScript深入系列15篇正式完结！
17. JavaScript深入之浮点数精度
18. JavaScript深入之头疼的类型转换(上)
19. JavaScript深入之头疼的类型转换(下)

专题系列目录

1. JavaScript专题之跟着underscore学防抖
2. JavaScript专题之跟着underscore学节流
3. JavaScript专题之数组去重
4. JavaScript专题之类型判断(上)
5. JavaScript专题之类型判断(下)
6. JavaScript专题之深浅拷贝
7. JavaScript专题之从零实现jQuery的extend
8. JavaScript专题之如何求数组的最大值和最小值
9. JavaScript专题之数组扁平化
10. JavaScript专题之学underscore在数组中查找指定元素
11. JavaScript专题之jQuery通用遍历方法each的实现
12. JavaScript专题之如何判断两个对象相等
13. JavaScript专题之函数柯里化
14. JavaScript专题之偏函数
15. JavaScript专题之惰性函数
16. JavaScript专题之函数组合
17. JavaScript专题之函数记忆
18. JavaScript专题之递归
19. JavaScript专题之乱序
20. JavaScript专题之解读 v8 排序源码
21. JavaScript专题系列20篇正式完结！
22. JavaScript专题之花式表示26个字母

underscore 系列目录

1. underscore 系列之如何写自己的 underscore
2. underscore 系列之链式调用
3. underscore 系列之内部函数 cb 和 optimizeCb
4. underscore 系列之内部函数 restArgs
5. underscore 系列之防冲突与 Utility Functions
6. underscore 系列之实现一个模板引擎(上)
7. underscore 系列之实现一个模板引擎(下)
8. underscore 系列之字符实体与 _.escape
9. underscore 的源码该如何阅读？

ES6 系列目录

1. ES6 系列之 let 和 const
2. ES6 系列之模板字符串
3. ES6 系列之箭头函数
4. ES6 系列之模拟实现 Symbol 类型
5. ES6 系列之迭代器与 for of
6. ES6 系列之模拟实现一个 Set 数据结构
7. ES6 系列之 WeakMap
8. ES6 系列之我们来聊聊 Promise
9. ES6 系列之 Generator 的自动执行
10. ES6 系列之我们来聊聊 Async
11. ES6 系列之异步处理实战
12. ES6 系列之 Babel 将 Generator 编译成了什么样子
13. ES6 系列之 Babel 将 Async 编译成了什么样子
14. ES6 系列之 Babel 是如何编译 Class 的(上)
15. ES6 系列之 Babel 是如何编译 Class 的(下)
16. ES6 系列之 defineProperty 与 proxy
17. ES6 系列之模块加载方案
18. ES6 系列之我们来聊聊装饰器
19. ES6 系列之私有变量的实现
20. ES6 完全使用手册

Jony的博客

下面是Jony写的系列文章，如果觉得写得不错可以去大佬项目star一下

最新3篇文章

• Typescript代码整洁之道
• 快速高斯模糊算法的原理以及webgl工程实现
• 如何优雅的通过canvas实现一个简单的文本编辑器

历史文章列表

• Css/Css3
  • 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
  • 深入浅出浏览器中的ES modules
  • 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
• JS/ES6/ES.next
  • 前端监控和前端埋点方案设计
  • 你真的懂switch吗？聊聊switch语句中的块级作用域
  • 发布一个npm包，用于监控页面中的所有API请求的状态和结果
  • 在单页应用中，如何优雅的上报前端性能数据
  • 在单页应用中，如何优雅的监听url的变化
  • 手把手教你实现json嵌套对象的范式化和反范式化
  • 实现一个完美符合Promise/A+规范的Promise
  • 从promise、process.nextTick、setTimeout出发，谈谈Event Loop中的Job queue
  • 总结一下ES6/ES7中promise、generator和async/await中的异常捕获方法
• Typescript
  • Typescript代码整洁之道
  • 在Typescript项目中，如何优雅的使用ESLint和Prettier
  • 聊一聊Typescript中与this相关的类型定义
  • 聊聊Typescript中的设计模式——装饰器篇(decorators)
• React/Redux/Mobx/RxJS
  • React hooks中swr的原理和源码解析
  • React Hooks工程实践总结
  • 如何优雅的使用react hooks来进行状态管理
  • React生态，dva源码阅读
  • 在React项目中，如何优雅的优化长列表
  • React-tiny-virtual-list源码阅读
  • 从mixin到hooks,谈谈对16.7.0-alpha中即将引入的hooks的理解
  • 发布一个react组件——react-read-pdf，用于在移动端展示PDF文件
  • 从路由原理出发，深入阅读理解react-router 4.0的源码
  • 彻彻底底教会你使用Redux-saga(包含样例代码)
  • React16.x中的服务端渲染（SSR）
  • Redux源码深度解读
  • Redux源码解读拾遗，createStore的第三个参数
  • RxJS入门——基础操作指北
  • React内部原理，第一部分：基础渲染
  • React内部原理，第二部分： componentWillMount and componentDidMount
• WebGL
  • 优雅的学习webgl(1)—从0开始构造你的第一个webgl程序
  • 优雅的学习webgl(2)—webgl中的着色器和缓冲区
  • 优雅的学习webgl(3)—webgl中的三维图形和矩阵变换
  • 优雅的学习webgl(4)—webgl中的投影模型
  • 优雅的学习webgl(5)—webgl中的光照和反射变换
  • 通过webgl中的纹理贴图来自定义图片间的转场效果
  • 如何优雅的通过canvas实现一个简单的文本编辑器
  • 快速高斯模糊算法的原理以及webgl工程实现
• Nodejs
  • 从Express到Nestjs，谈谈Nestjs的设计思想和使用方法
  • 循序渐进教你实现一个完整的node的EventEmitter模块
  • nodejs中的子进程，深入解析child_process模块和cluster模块
• Golang
  • golang学习笔记（二）—— 深入golang中的协程
  • golang学习笔记（一）—— golang基础和相关数据结构
• 构建工具
  • Webpack4.0初体验
  • Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
• Threejs
  • 禁用Firefox和Chrome的安全性检测
  • Threejs官方文档-入门-（1）创建一个场景 ，demo地址
  • Threejs官方文档-入门-（2）模块的方法引入
  • Threejs官方文档-入门-（3）浏览器支持
  • Threejs官方文档-入门-（4）webgl兼容性检测
  • Threejs官方文档-入门-（5）画线，demo地址
  • 渲染器、场景和照相机简介
  • 照相机详细介绍
  • 几何形状
  • 文字形状和自定义形状，demo1地址，demo2地址
  • 材质,demo地址
  • 材质的纹理贴图，demo1地址，demo2地址
• 其他
  • 前端面试杂记
  • 前端面试总结——基础javascript篇
  • 前端面试总结——进阶javascript篇
  • 前端面试总结——http、html和浏览器篇
  • 前端面试总结——css篇

汪图南的博客

下面是老汪（汪图南）写的系列文章，如果觉得写得不错可以去大佬项目star一下

Github博客地址：https://wangtunan.github.io/blog/

Gitee国内镜像：http://wangtunan.gitee.io/blog/

面试

前端面试之道

前端书籍阅读笔记

• 你不知道的 JavaScript 上
• 你不知道的 JavaScript 中下
• 深入理解 ES6
• JavaScript 设计模式与开发实践
• JavaScript 数据结构和算法
• JavaScript 高级程序设计
• JavaScript 设计模式与开发实践
• JavaScript 数据结构和算法

Vue2.0 源码分析

Vue2.0 源码分析

自动化测试

• Vue 应用测试

Webpack4.0

• Webpack 基础知识

TypeScript

• TypeScript 基础知识

VuePress

• VuePress 基础知识

黑色技术：一些前端开发的干货

• 库?
• 目前最全的前端开发面试题及答案

推荐

• 渗透攻击10年系列
• 阮一峰每周分享摘录
• bird.so 用不了谷歌搜索可以用这个
• 公众账号推荐
• 掘金
• Easy Mock 模拟数据
• JavaScript错误监测
• 个人常用开发工具
• HEAD 能够放在文档的 <head> 中的各种配置元素,mate列表大全 中文
• ScriptOJ 是首个 Web 前端开发评测系统
• 项目规范-avaScript工程项目的一系列最佳实践策略
• 30 Seconds of CSS
• Zan Proxy - 本地代码调试线上页面，环境再也不是问题
• 最全前端资源汇集
• CSS Inspiration，在这里找到写 CSS 的灵感！
• 看图学算法
• OI-wiki 编程竞赛相关知识教程
• 成为专业程序员路上用到的各种优秀资料、神器及框架
• Web前端入门和进阶学习笔记
• Algorithm Visualizer 算法展示
• 大前端面试宝典 - 图解前端

周刊

• 由腾讯IVWEB出品的《IVWEB技术周刊》
• 前端精读周刊
• 《阿里云前端技术周刊》

编码规范

• 百度前端编码规范
• vue 风格指南
• Airbnb 的 JavaScript 编码规范
• frontend-guidelines - Some HTML, CSS and JS best practices.
• Vue.js 组件编码规范
• CSS 创作指南（Beta）
• JavaScript Standard Style
• AlloyTeam代码规范
• 中文文案排版指北
• 中文技术文档的写作规范
• JavaScript 风格指南

前端库搜索

• 玩林-前端框架搜索
• awesomes-前端资源库
• 常用库查询系统
• 常用库查询系统2 - 迷你库

前端导航

• 前端收集
• WEB前端知识库
• jsdig
• 前端笔记
• 醉牛前端
• 前端收藏夹
• web前端导航
• F2E前端导航

API文档

• Vue Docs 中文文档翻译合集
• css手册
• webkitcss 属性查询文档
• (英文)css属性详解 -各种参数有demo进行对比
• flex
• jQuery API 中文文档
• jQuery UI API中文文档
• Chrome 开发者工具
• Sass (3.4.21) 中文文档
• ES6 手册
• React 中文文档（V15.5.4）
• React 官方中文文档（V16.13.1）
• Zepto.js 中文文档
• Backbone.js 中文文档
• Underscore.js 中文文档
• JSDoc中文文档
• Bootstrap 中文文档
• Lodash 中文文档
• webpack 官方中文文档
• webpack 中文文档(2.2)
• avalon 2 中文文档
• vue1.0 中文文档
• vue2.0 中文文档
• vuex 中文文档
• Express 4.x API 中文手册
• koa 中文文档
• koa 中文文档 同上
• Koa 中文文档 同上
• rollup.js 中文文档
• Angular 中文文档
• weex
• Electron 中文文档
• SuperAgent中文使用文档
• Flutter中文网
• Linux 命令大全搜索工具
• CSS 种植手册
• Jest 测试单元文档
• three.js 中文手册
• Three.js 中文教程
• three.js 部分中文教程
• Nest.js 中文教程

移动端资料

• H5 案例 - 不定期收集市面上优秀的 H5 作品。
• 移动H5前端性能优化指南
• 支付宝无线Web开发经验谈
• 移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
• 移动web最佳实践（2013）
• 移动Web前端框架 ( 2014 )
• 移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
• iOS 微信 音频 视频自动播放
• 解决ios下的微信打开的页面背景音乐无法自动播放
• 微信JS-SDK说明文档
• 微信js demo
• QQ浏览器X5内核问题汇总
• 手机分辨率查询
• 移动端响应式框架-测试阶段,不适用于复杂页面
• 视频H5のVideo标签在微信里的坑和技巧
• LAVAS 基于 Vue.js 的 PWA 解决方案 帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题

学习资料/文章

Git

• 連猴子都能懂的Git入門指南
• Git可视化教程，通俗易懂
• Github使用指南-从新手到专家
• 高质量的Git中文教程
• Git 学习目录 wiki
• GitHub秘籍
• Git的奇技淫巧
• git资料

其他

• Node.js 最佳实践

• 从零开始学 Web 前端系列教程。前端零基础自学入门进阶图文教程。

• 深入理解 TypeScript

• ChromeAppHeroes - Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类~

• 数据结构和算法动态可视化

• JavaScript开发者应懂的33个概念

• 谈谈一些有趣的 CSS 话题

• 中国程序员容易发音错误的单词

• 面向对象的JavaScript编程：原理与实践

• React 入门教程-中文

• React Bits - 有关React，你需要知道的一切

• React-Native学习指南

• [译]看漫画理解Flux

• 《看漫画，学 Redux》 —— A cartoon intro to Redux

• 什么是正则表达式?

• 前端基础进阶系列

• Study-Step-by-Step 书籍合集

• 渲染性能

• awesome-javascript

• JavaScript教程 - 廖雪峰的官方网站

• 逐行剖析Vue.js源码

• node.js中文资料导航

• 了不起的Nodejs Nodejs的各种资源,英文

• AngularJS ,一些关于 AngularJS 的博客，文章，视频，书籍等

• HelloSea.js seajs教程

• HTTP API 设计指南

• JSON API：用 JSON 构建 API 的标准指南中文版

• 了不起的React React的各种资源,英文

• 一家伙（s5s5）学习css3动画的心得

• 让WEB前端的变优雅的东东，如：代码规范，代码组织，最佳实践之类

• 前端工具推荐

• 腾讯团队web移动文章

• 视觉设计师是怎样让前端工程师 100% 实现设计效果的？

• JavaScript 秘密花园

• vue 教程

• 10 个原则让动画带你飞

• React Native 中文网

• cssreference.io

• 大话设计模式

• YOU MIGHT NOT NEED JQUERY - 是用原生写法代替jq

• 全景漫游VR -（淘宝造物节背后的库）

• 从零开始构建 JavaScript 技术栈

• 微信小程序开发资源汇总

• 《一起学 Node.js》彻底重写完毕

• TypeScript 入门教程

• TypeScript 官方文档

• 第一本 PWA 中文书

• 如何通过饿了么 Node.js 面试

• JavaScript 算法与数据结构

• 《编程之法：面试和算法心得》

• learnVue - Vue.js源码分析

• 前端面试手册

• 全栈工程师之路-Node.js

• css-gif 一个动图，一个CSS知识点

• 《Flutter 实战》

• JavaScript 资源大全中文版

• 现代 JavaScript 教程中文版

• CheatSheet，一图读懂系列

• vue 源码解析及实现

书籍资料

• USTC-CS-Courses-Resource 中国科学技术大学众多课程资源

• 免费的计算机编程类中文书籍

• 免费编程书籍

• 码农周刊整理-推荐关注

• 运维实践指南

• 《微服务：从设计到部署》

• 【编程随想】收藏的电子书清单

• 2019年最新总结，从程序员到CTO，从专业走向卓越，分享大牛企业内部pdf与PPT

一些社区

• Stack Overflow：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。
• segmentfault：是中国领先的开发者技术社区。

系列文章

• 《深入理解Node.js：核心思想与源码分析》
• 性能专栏
• Docker — 从入门到实践
• Nginx开发从入门到精通
• React Cookbook
• React.js 小书
• React 入门实例教程
• React-Native学习指南
• html5 Canvas画图系列教程目录
• web前端开发分享-目录系列
• 深入理解javascript原型和闭包系列
• 深入理解JavaScript系列
• JavaScript模式集合
• 深入理解JavaScripts设计模式系列：
• 设计模式总结,非js
• 7 天打造前端性能监控系统
• 七天学会NodeJS
• 前端之困 · XSS CookBook系列
• 一个月时间整理《深入浅出Node.js》
• 【web必知必会】——图解HTTP
• 廖雪峰-JavaScript基础教程
• MDN JavaScript基础教程
• 45个实用的JavaScript技巧、窍门和最佳实践
• Must-Watch JavaScript 需要翻墙
• Must-Watch CSS 需要翻墙
• 搜罗一切webpack的好文章好工具
• Vim 从入门到精通
• 如何提高英语技能
• 《Node.js 调试指南》
• 《JavaScript 闯关记》
• Node.js技术栈
• 手把手撕LeetCode题目，扒各种算法套路的裤子

其他工具

• flexbox在线制作器
• SPARK动画平台 这是我们组做的一个动画效果平台，里面集合了所有的牛逼动画，可以让你灵感猛增！（目前已开放外网使用）
• OneDiv 这是个神奇的网站，里面的所有细节都是用一个div元素通过复杂的Css3实现的，有空可以去开开脑洞噢
• 贝塞尔曲线生成器
• HTML5 与 CSS3 技术应用评估
• 各种奇妙的hack
• 几乎所有设备的屏幕尺寸与像素密度表
• 移动设备参数表
• ios端移动设备参数速查
• 浏览器兼容表
• 移动设备查询器
• 移动设备适配库
• 移动设备适配库2
• viewport与设备尺寸在线检测器
• html5 移动端兼容性速查
• 在线转换字体
• css3 选择器测试
• 兼容性速查表
• 浏览器的一些独特参数
• 各种各样的媒体查询收集
• sass @include-media 媒体查询库
• css3 动画在线制作器
• css3 渐变在线制作器
• 移动端手势表
• webkit独有的样式分析
• HTML5 Cross Browser Polyfills
• HTML5 POLYFILLS
• iPhone 6 屏幕揭秘
• 智图客户端 – 你的图片你做主,本地图片快速压缩工具
• 网站视频/音乐 扒神器
• ELF 灵活可扩展的HTML5 构建工具
• 让小程序支持组件化开发的框架-类型vue组件开发
• APIJSON - API 服务的框架
• sentry-javascript - Official Sentry SDKs for Javascript 错误日志打点统计
• GitHub issues 备份工具

js插件网站

• Unheap
• jquer.in
• OpenLib–http://www.open-lib/
• jQuery插件库–http://www.jq22/
• jquery之家–http://www.htmleaf/
• 分享天空–http://www.sharetk/
• jQuery Script–http://www.jqueryscript/
• dowebok 做好网站–http://www.dowebok/
• Web前端开发–http://www.zjgsq/

手势库

• TouchSwipe

vue专题

• awesomes vue 各种组件
• 『收藏』VUE优秀UI组件库合集
• cooking更易上手的前端构建工具 for vue
• 一个记录使用了vue技术的网站列表-made with vue.js

Vue相关开源项目库汇总

• http://www.opendigg/tags/front-vue
• https://github/opendigg/awesome-github-vue
• https://vuejsexamples/
• Vue.js Script

vue ui组件库

• vue.js ie9+
• 滴滴 Web 移动端组件库 cube-ui
• AT UI 由阿里通信技术团队打造基于Vue的Web组件库
• 微信UI Vux 支持@^1.0.24
• bootstrap风格 Vux 支持@v1.x.x
• material风格 vue-mdl
• Keen-UI
• Mint UI
• iView UI
• element UI 支持vue@2.0
• Muse-UI - 基于 Vue 2.0 和 Material Desigin 的 UI 组件库
• Vue Material
• vant 有赞开发的基于 Vue.js 2.0 的 UI 组件库
• vue-beauty 基于 ant design 的漂亮的 vue 组件库

vue 其他插件组件

• PortalVue ， anywhere in the document/普通开发使用组件
• mpvue vue转微信小程序
• vue-axios
• Vue-Lazyload 图片延迟加载
• vue-amap 基于Vue 2.0 和高德地图的地图组件
• Vueditor 基于Vue 2.0 的富文本编辑器
• Scroller for Vue 2.0
• JRoll无限加载+下拉刷新 for Vue2
• Vue-Core-Image-Upload 2.0 一款轻量级图片裁剪上传插件
• vue-datepicker 日期拾取组件
• 一个生成 svg 图标组件的工具 (vue2.x)
• vue GUI generator

React 相关

• ANT DESIGN
• reactSPA
• ReCharts 是一个 React 图表组件库
• React-Bootstrap
• anu.js 是一个高级兼容React16的迷你React 框架

Weex

• Weex Ui

Node

• egg.js
• Nest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。

小程序相关

• 娜娜奇 - 基于 React 的多端小程序转译框架

Nginx

• Nginx 入门教程

前端自动化(Workflow)

• 依赖安装
  • yarn
  • npm
• 前端构建工具
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解决方案
• 前端模块管理器
  • Bower - A package manager for the web
  • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • webpack
  • ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。
• css预处理器
  • Sass - Syntactically Awesome Style Sheets
  • Less - Less is More , Than CSS
  • Stylus - Expressive, dynamic, robust CSS

前端框架(Frameworks)

• Material-UI 移动端ui框架,效果好 github
• Frozen UI 腾讯移动UI框架
• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• H-ui 前端框架
• Skeleton
• HaloJS
• QMUI Web 是一个专注 Web UI
• LuLu ui

后端UI框架

• Layui
• BUI

JavaScript 框架汇总

• JavaScript 框架

  • react
  • preact (react的代替者)
  • Angular
  • jQuery
  • Backbone.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • ZeptoBuilder是Zepto的一个在线版本，从列表中选取你想包含的文件，就能得到你自定义的构建了
  • Vanilla JS
  • Avalon
  • Sprint.js - 一个高性能、小体积的 DOM 操作库 (Benjamin De Cock)
  • JSLite.js
  • Ember.js：一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。

• 轻量级JavaScript框架

  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • LAB.js 异步加载js

• JavaScript 工具库[扩展库]

  • es5-shim

  • [es6-promise] (https://github/stefanpenner/es6-promise)

  • underscore.js JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。

  • Lodash.js 函数式编程库,一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。

  • Ramda.js 函数式编程库

  • functional.js 函数式编程库

  • Lazy.js 性能超越underscore和Lodash的工具类库

  • Babel.js 让浏览器支持新js ES6,其实就是把ES6,5的语法转换成旧的js形式

  • Way.js - 双向数据绑定库

  • Keys.js - 应用快捷键

  • Mousetrap - 键盘快捷键操作

  • 移动web开发调试工具AlloyLever介绍 - 打印信息

  • vConsole.js 同上

  • Hotkeys.js 捕获键盘输入和输入的组合键快捷键

  • keymaster.js 同上

前端游戏框架(动画引擎)

• Hilo 跨终端的互动游戏解决方案 阿里出品
• Pixi.js v4 - WebGL 国外游戏引擎
• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• LayaAir 引擎 国内游戏框架,跟白鹭比较??暂时不知道
• soya2d 一个 好学、易用、强大、开源的 H5游戏引擎 现在,有你掌控
• phina.js JavaScript游戏开发库
• melon.js
• Phaser - HTML5 Game Framework
• PlayCanvas WebGL Game Engine
• Popmotion.js – 小巧，灵活的 JavaScript 运动引擎
• Dynamics.js - 创建逼真的物理动画的 JS 库
• Snabbt.js – 极简的 JavaScript 动画库

ui组件库

• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC
• NEJ
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• [ZUI - 一个开源前端实践方案，帮助你快速构现代跨屏应用。][1]
• [WeX5开源前端][2]
• [B-JUI][3]
• MUI 轻量级WEB框架
• jQuery WeUI - V0.7.1 WeUI 的jQuery实现版，提供了大量官方WeUI没有的组件, 同时兼容 jQuery 和 Zepto。
• Light7 手机ui组件
• bttn.css Awesome buttons for awesome projects
• CSS Pressable 3D Buttons

基础模版

• 浏览器统一(Cross Browser)

  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell

• 响应式

  • Responsive - 响应式布局
  • Spectre.css - 轻量级响应式 CSS 框架
  • Wing 是一个微型（压缩后仅有4KB）响应式的 CSS 框架，它提供了一个 12 列响应式网格以及基础的样式组件集
  • Core.css 是一个用于构建响应式网站的轻量级框架。它压缩后仅有 1.3kb，同时它没有预先设定的元素和内置动画。所以适用于搭建任何小型的 Web 项目。
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局
  • reframe.js 让非响应式元素响应的JavaScript插件。 Reframe对iframe和video元素特别有用
  • Grid—A—Licious
  • MUURI - Responsive, sortable, filterable and draggable grid layouts , ie9+

排版

• yue.css
• typo.css
• chinese-copywriting-guidelines - 中文文案排版指南

网格系统

• flex.css - 快速入门，极速布局
• grid
• Flexbox Grid
• MasonJS - creating a perfect grid
• Juiced: a Flexbox CSS Framework
• Neutron 创建灵化、简洁网页布局的SASS框架
• flexible.gs 灵活的响应式栅格布局CSS框架
• Decorator - HTML, CSS, and JavaScrip 前端框架
• minigrid.js 只有2KB的零依赖栅格布局-瀑布流
• Reflexbox 用于React的Flexbox网格系统，提供Grid, Flex, 和Box组件用于开发

HTML5 API 应用

• History.js - gracefully supports the HTML5 History/State APIs
• jquery-pjax - pushState+ajax
• jquery-address - Deep Linking
• Notify.js(Web Notifications API)

UA 识别

• detector

表单处理

表单验证(Form Validator)/表单提示

• (Depreciated) A Laravel styled JavaScript Object/Form/JSON validation library
• validate.js
• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• 2016 年最好用的表单验证库 SMValidator.js

< select > 相关

• Chosen
• Select2
• bootstrap-select

单选框/复选框相关

• iCheck - 增强复选框和单选按钮

上传组件

• jQuery File Upload Plugin
• 百度 Web Uploader
• Uploadify
• Plupload
• Fine Uploader
• arale-upload - 轻量级 iframe and html5 file uploader
• Dropzone.js - drag’n’drop library拖拽上传
• flow.js
• localResizeIMG3 - 前端本地客户端压缩图片，兼容IOS，Android，PC
• FileAPI - 是文件上传（单个/多个）、拖放支持、图像裁剪、大小调整、应用过滤器和获取文件信息
• Resumable.JS 通过HTML5API提供了稳定可恢复的多文件上传功能。
• filepond.js - A Flexible and Fun JavaScript File Upload Library

日期选择

• 超强日历
• Both Date and Time picker widget based on twitter bootstrap
• Mobiscroll 超强扩展
• Pikaday - 日期选择器
• TimelineJS - 时间轴
• mobile-calendar 移动端日历插件，不依赖其他第三方框架
• mobile_calendar jQuery手机移动端日历日期选择
• Flatpickr ：轻量级日期时间选择器，无依赖 (英文日期)
• datePicker 一个适合移动端的日期选择插件，支持选择时间
• better-picker – 一款轻量级IOS风格的JavaScript选择器

取色

• Colorpicker plugin for Twitter Bootstrap

标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件
• selectize.js

自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library
• Awesomplete - 零依赖的简单自动完成插件 - github
• Algolia Places：给输入框添加地址自动补全功能
• Cleave.js – 自动格式化表单输入框的文本内容

样式修正

• autosize - 使文本框自动适应所输入的内容

图表绘制/图形库(Graphics)

• Highcharts
• Chart.js - 基于HTML5的JavaScript图表
• 百度 ECharts
• Chartist.js
• D3.js - D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
• intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• Epoch - 漂亮、平稳流畅和高性能可视化的图表库
• SVG 2D绘图
• SVG Morpheus - SVG图形变形动画
• Sigma是一个专用于图形绘制的JavaScript库。
• GraphicsJS ，一个轻量级的前端图形库 支持ie6
• 强大的矢量图形库：Raphael JS http://www.jianshu/p/81c3fc5287d1
• chart.xkcd - xkcd 风格(手绘风格)的图表库

日期格式化

• Day.js 2kB超轻量时间库 和Moment.js一样的API
• Miment.js 轻量级的时间库
• Moment.js - 日期处理
• Smart Time Ago - 显示相对时间
• FormatJS – 让你的 Web 应用程序国际化
• 一个轻量级的时间处理工具库 - dateformat.js
• timeago a jQuery plugin 返回类型xxx时间之前发表,支持18种语言
• date-fns 时间格式化

页面交互

Slider

• slick - the last carousel you’ll ever need
• Swipe - the most accurate touch slider
• Swiper - 移动端/pc端滑动组件比较强大 - github
• iscroll - 简约模拟滑动层
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件

瀑布流

• Masonry 推荐
• Isotope - Filter & sort magical layouts
• Wookmark-jQuery

懒加载/加载监听/预加载

• basket.js – 基于 LocalStorage 的资源加载器
• imagesLoaded – 检测网页中的图片是否加载完成
• layzr.js - git关注蛮高的 - github
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• jQuery.preload - 预加载图片资源
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

图片轮播(幻灯片)/图片展示

• SuperSlide - 国产的幻灯片,功能集成比较多,我个人推荐
• 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 - 全景视图
• PhotoSwipe - 移动开发必备的 iOS 风格相册 - github
• lory.js
• swipe2 – 非常轻量级的一个图片滑动切换效果库,跟3版本不一样,这个用于幻灯片
• RefineSlide A 3D transform/CSS transition-enabled jQuery

图片剪裁/图片处理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• Picturefill - 一个响应式图片 JS 插件 (Scott Jehl)
• jQuery picZoomer - 图片区域放大
• watermark.js 为图片添加水印
• image-compressor 图片压缩

图片放大镜

• EasyZoom for jQuery
• ZooMove for jQuery
• Magnifier.js

进度条/加载动画(Loading)

• CSS Loader 是一个非常有用加载器。它允许开发人员利用纯 CSS 文件，以及一个空<div>元素便可以快速的创建加载指示器。
• progressbar.js svg线条
• NProgress.js
• progress.js
• Pace - Automatic page load progress bar
• jquery-ajax-progress
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js - 依赖jQ的全屏加载js
• Easy Pie Chart

侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单
• Responsive Nav - 响应式导航

滚动侦测(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条
• onScreen - 滚动加载,滚动固定
• Choreographer.js 多帧动画处理 跟ScrollMagic 类似
• moveTo.js 轻量级滚动到指定位置插件
• basicScroll

滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.
• infinity.js/∞ .js 无限下拉加载
• pulltorefresh.js 下拉刷新
• infinite-scroll – 一款滚动加载按需加载的轻量级插件
• better-scroll 移动端滚动插件

平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• Elevator.js 一个模拟电梯运行“返回顶部”的 JS 插件 (Tim Holman)

全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式
• Space.js – HTML 驱动的页面 3D 滚动效果 - github

分屏滚动

• multiscroll.js - 分屏滚动效果

转场效果

• Animsition - 页面切换时的过渡效果

固定元素(Sticky)

• Sticky-Kit 比较出名,功能强大,个人推荐
• Sticky Navbar -可定点
• Waypoints
• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表
• Headroom.js
• ScrollMagic
• Sticky Float
• Sticky Mojo
• Zebra Pin
• HC-Sticky

触控事件

• Hammer.js

拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库
• jquery.event.move.js
• ScrollBooster 轻量级拖拽滚动

隐藏或展示页面元素

• Headroom.js - 在不需要页头时将其隐藏
• Readmore.js - 内容显示与隐藏插件
• oriDomi - 像指一样折叠Dom元素

滚动条(Scrollbar)

• jQuery-slimScroll pc效果不错5k,手机端不建议是用
• jquery.mCustomScrollbar pc,苹果效果不错,安卓效果略差,大小较大
• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar
• gemini-scrollbar

视差滚动(Parallax Scrolling)

• MidnightJS 效果很赞
• parallax.js
• jparallax
• StickyStack.js -github
• jquery.superscrollorama.js 很酷的动画效果

代码高亮插件/代码编辑器

• google-code-prettify
• highlight.js
• Rainbow
• ACE
• CodeMirror
• Crayon Syntax Highlighter
• prism - Lightweight, robust, elegant syntax highlighting.

UI Icon 组件

• Font Awesome
• Glyphter: The SVG Font Machine
• Perfect Icons
• iconizr
• Cikonss - 纯CSS实现的响应式Icon
• Simple Icons

动画(Animate)

• js动画库

• GSAP.js 最屌的动画库

• Animate Plus CSS/SVG 动画库

• anime.js 动画库,支持svg-一直在更新

• dynamics.js js动画-很屌的样子,支持svg

• snabbt.js - 简约的JavaScript动画库

• Transit - CSS transitions and transformations for jQuery

• Move.js - 简化CSS3动画的JS库 - github

• Animo.js - 堆栈动画，创建跨浏览器的模糊效果【效果不错，依赖jq】 - github

• Velocity.js - 加速JavaScript动画

• Morf.js 提供了一组 JavaScript 方法用于加速 CSS3的各种转换效果，支持的方法都在上图中，无需编写 CSS3 代码。 - github

• lenticular.js - 响应倾斜或鼠标事件创建图片动画

• jQuery Interactive 3D - 使用图片创建一个3D模型

• AnimateScroll - 动画滚动,应该是定点导航动画

• jq 元素抖动库

• Tween JS JavaScript 补间动画库 canvas

• Rekapi 关键帧动画库

• favico.js v0.3.4 控制游览器标签小图标 - github

• dom-animator -注释动画

• KUTE.js 支持SVG等动画-手机端性能不太好

• Granim.js 简单易用的渐变动画库,纯JavaScript(< 10kB) 实现。

• txt.wav.js 让文字飞起来

• jquery.path 动画路径

• Vivus.js 是一个轻量级的JavaScript类(完全无依赖) 来允许你创建 SVG 动画，让他们显示被画出来的轨迹。 Vivus提供很多不同种类的动画。 另外还有选项，你可以按你的想法来创建一个定制的脚本来创建你的SVG动画。

• mo.js

• micron.js Micron是一个允许你为DOM元素添加不同的CSS增强动画的库

• Direction Reveal （方向展示）

• Rythm.js 让页面跳舞

• 一个 JavaScript 的 3D 设计和动画制作库

• svg-text-animate 是一个在浏览器环境中将输入文本根据字体转化为描边动画的JavaScript库

• css动画库

• xless - 又一个css动画库 github

• CSShake - css抖动库 - github

• animate.css - css3动画库

• all animation - 同上,有sass版本 - github

• magic - CSS3动画特效 - gihub

• ScrollMe – 在网页中加入各种滚动动画效果

• Loaders.css - css加载动画 - github

• css-loaders - 同上

• Hover.css - github

• Effeckt.css - 手机动画库

• NEC动画库

• uilang - a minimal, ui-focused programming language for web designers

• csshake 带有sass版本

• AniJS - 一个基于声明式语法的CSS动画库

• SpinKit ??

• JX.Animate - 腾讯css3动画库 - github

• SpinThatShit 酷炫的Loading 动画sass库 https://matejkustec.github.io/SpinThatShit/

• OBNOXIOUS.CSS 冲击视觉的效果

本地存储

• bowl.js 一个轻量级的前端资源缓存加载器
• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js 是一个 JavaScript 的数据持久化层库,实现了统一的 LocalStorage、Cookie 和 Session 存储。
• store.js 公开了一个简单的接口来实现跨浏览器的本地存储。

数据库

• nedb
• lowdb
• localForage
• Dexie.js
• ZangoDB

模板引擎

• paperclip.js ie8+
• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• CMS.js是基于Jekyll的一个JavaScript网页生成器，使用普通的HTML，CSS和JavaScript的网站快捷的生成网页。

通知组件/弹框组件/模态窗口

• layer.js - 国产,也是集成很多功能,个人推荐
• AnimatedModal.js - CSS3 全屏模态窗口,支持 Firefox、Chrome、Safari、Opera 和 IE 10+
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的弹框组件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模态窗口插件
• Popper.js：强大的浮动提示库（pop 即弹出层，popper 即弹出层的内容）

提示控件(Tooltips)

• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件
• SweetAlert – 替代 Alert 的漂亮的提示效果
• SweetAlert2 - 不知道是不是克隆1的自己搞一个分支
• Tippy.js A lightweight, pure JavaScript tooltip library 迷你提示框
• tata.js 一款提示窗口

对话框/遮罩层/弹出层(lightbox)

• fancyBox - Fancy jQuery lightbox
• jquery-lightbox - The popular lightbox script, ported to jQuery
• Colorbox - a jQuery lightbox
• artDialog - 经典的网页对话框组件
• DialogEffects
• jQuery blockUI - Page or element overlay

文档/表格/PDF

• handsontable - 在线可编辑excel表格
• jQuery Bootgrid - 用于ajax生成动态表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一个 JavaScript 编写的 PDF 阅读器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 灵活操作和展示数据
• Dynatable - 交互式表格插件

目录树插件

• zTree_v3 - jQuery Tree Plugin
• jstree - jQuery Tree Plugin
• fancytree - Tree plugin for jQuery

Ajax模块

• fetch - A window.fetch JavaScript polyfill
• reqwest - browser asynchronous http requests
• minAjax.js

音频/视频

• A HTML5 video player with a parser that saves traffic 西瓜播放器
• Chimee 组件化H5播放器框架-mp4、m3u8、flv
• pizzicato.js
• webaudiox.js
• jWebAudio
• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
• Clappr - 开源的Web视频播放器
• Plyr - 简单，灵活的 HTML5 媒体播放器
• 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
• [howler.js 是一个新的 JavaScript 库用于处理 Web 的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目。] (https://github/goldfire/howler.js)
• Flv.js 实现了 FLV 格式视频的播放
• BIDEO.JS使得添加全屏背景视频更加容易。
• loud links一个很小的JavaScript库,允许您通过HTML5添加交互式音频元素在网站播放mp3 / ogg文件，目前支持所有浏览器。
• Waud.js – 使用HTML5降级处理的Web音频库
• Wad
• Tone.js
• PearPlayer.js 一个支持多协议、多源、混合P2P-CDN的流媒体播放器

按钮

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.

富文本编辑器/Markdown编辑器/Markdown解析器

• Simditor - 简单快速的富文本编辑器
• BachEditor - 一个有情怀的编辑器
• Squire – 简洁的 HTML5 富文本编辑器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 开源在线Markdown编辑器

内容提取(Readability)

• Readability
• json.human.js - Json Formatting for Human Beings

颜色(CSS Colors)/SVG

• CSS Colours
• SVGeneration
• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素

选项卡(Tabs)

• Easy Responsive Tabs to Accordion
• Responsive-Tabs
• ion.tabs - jQuery tabs plugin
• jQuery-EasyTabs
• 以多标签页载入页面的功能插件 bTabs.js

文本处理

• ZeroClipboard - 文本复制插件
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• Shave 是一个零依赖、轻量级的 JavaScript 插件，它能截断多行文本.
• Flowtype.js - 自动调整字体大小和行号
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• Squishy 是一个jQuery插件，它能自动调整文字，准确地对其各容器
• slabText 一个jQuery插件，用于创建大的，大胆的和敏感的头条新闻。
• Textillate 做CSS3文字动画。
• Bacon 是一个jQuery插件，它允许您环绕贝塞尔曲线文字或线条，它可以让您的文字沿贝塞尔曲线排列。
• Circletype.js 是一个很小的（ 2.7kb ）的jQuery插件，可以让你的字体在一个圆圈内显示。
• jQSlickWrap 是一个jQuery插件，让您可以轻松而准确地环绕浮动图像里的内容文字。
• TypeButter 使您能为您的字体设置透明度和字间距。

布局(Layout)

• 分隔面板(Split Panel)
  • jQuery Split Pane plugin
  • Split.js (推荐)
  • React Split Pane
  • Vue Split Pane
  • Vue Split Pane
  • vue-resize-split-pane
  • vue-multipane

实用工具/其他插件

• jquery-cookie
• FastClick - 处理移动端 click 事件 300 毫秒延迟
• Async.js - 异步操作
• html2canvas - 实现纯JS网页截图
• jquery.qrcode.js - 生成二维码的 jQuery 插件
• nakedpassword - 用脱衣女帮助检测密码强度
• KityMinder - 脑图编辑工具
• MixitUp - 动画过滤和排序
• JQuery Tip Cards - 创建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject

sass 库

• Family.scss - css3选择器简写框架,非常不错
• SpaceBase – 基于 Sass 的响应式 CSS 框架 - github
• breakpoint-sass 媒体查询库
• @include-media diy媒体查询库
• sass-mediaqueries 媒体查询库-推荐
• sass-mq Media Queries with superpowers-em单位媒体查询库
• sass-svg 一个内联 SVG 的 SASS 库

分页

• jqPagination 分页插件

模拟打字

• jQuery.type-typetype 用于textarea文本域;
• typing.js 华丽的打字效果JS插件
• superplaceholder.js 利用文本框的 placeholder 属性，以打字形式展示出自定义的文字，可用于提示。
• iTyped.js 实现打字效果

字数统计

• Countable.js：这个脚本可以添加实时段落，文字和字符数到一个html元素

未知分类

• 使用 tictac.js 实现倒计时
• 一个大小约 2k 的图片高斯模糊库 —— blurify.js
• Rainyday.js - 实现雨滴效果
• Reveal.JS - 替代PPT,演示文稿。
• Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。
• Sir Trevor是一个会完全重绘网页内容的工具：直观的编辑网页内容而不用假定任何关于它是如何重绘的事。
• feature.js 检测浏览器是否支持某属性
• a browser detector 检测浏览器类型,包括手机
• Mock.js 生成随机数据,拦截ajax
• BookBlock 翻书特效 - github
• intro.js 引导用户页面
• CSS滤镜 CSSgram
• Transformicons - CSS/SVG 元素模拟 图标/符号动画-过渡
• CSS 滤镜在线调试
• glfx.js canvas图片处理滤镜
• Crayon.css CSS颜色变量名与16进制对应列表。
• SVG圆形菜单生成器
• 优化和配置SVGO的WEB应用
• CSS单位对比视图
• 使用GUI快速创建SVG path
• 把CSS代码转成SASS的应用
• resizr 测试 CSS media queries 的轻量级应用-需要线上地址,没有线上地址,可以搞个coding-git
• 在线ppt
• flash文件转 canvas - Flash2x Tool http://www.annie2x/docs/
• testcafe 浏览器测试工具-类似(测试单元工具)
• Fuse.js 关键字-模糊查询
• Navigo 一个简单的简单的JavaScript路由，兼容老版本浏览器。
• Wysiwyg.css 使用漂亮的主题从HTML或Markdown生成文档
• sphinx.js 一个能够把字符串编码成png图片，或者从png图片中解码出字符串的超轻量级开源库
• Wenk 是一个轻量级纯 CSS 写的文本工具提示库。
• CurrencyFormatter.js 是一款简单实用的纯 JS 格式化货币库。它支持 155 种不同国家的货币格式，以及超过 700 种不同语言的本地化设置。
• Numeral.js – 格式化和操作数字的 JavaScript 库
• CCapture.js 可以使用固定的帧率实现对网页中 Canvas 的动画进行捕获，录制成视频。CCapture.js 依赖于 Whammy.js 和 gif.js。
• Base64.js
• Turntable.js 一款响应式 jQuery 滑块插件，可以创建一个类似3D图像旋转展示的效果。
• css3d-engine 全景漫游VR
• Pressure是一个允许您通过一个API在Safari浏览器上同时使用Force Touch and 3D Touch的JavaScript库
• [苹果手机 视频内联播放 iphone-inline-video] (https://github/bfred-it/iphone-inline-video)
• Immutable.js – JavaScript 不可变数据集合,函数式编程库（Facebook出品） 用处?
• Fort.js – 时尚、现代的表单填写进度提示效果
• MagicSuggest – Bootstrap 主题的多选组合框
• Draggabilly – 轻松实现拖放功能（Drag & Drop）
• scrollReveal.js – 使元素以非常酷帅的方式进入画布 (Viewpoint)
• share.js 一键分享
• Anchorme 是一个强大的 JavaScript 库，它可以接收任何字符串或文本文件，并检测其中的所有 URL 地址
• 500 个科幻主题的免费矢量图标网站
• 图片文字转真实文字
• WOWSlider css3幻灯片-软件生成
• marky.js 性能分析
• opentype.js web字体设计?
• gka 是一款简单的、高效的帧动画生成工具，图片处理工具,快速制作高性能帧动画解决方案
• Valine 留言板系统
• easyXDM.js 完美解决前端跨域
• Emergence.js 是一个轻量级，高性能的 JS 插件，用于检测和操作浏览器中的元素。
• FECS 基于 Node.js 的前端代码检查工具
• 一个绘制制svg图标的集合for react
• accounting.js 数字格式化
• 加载动画库 loading.io
• A JavaScript NES emulator/NES 模拟器
• proton-native - A React environment for cross platform native desktop apps
• FRANXX(js路由) - A vanilla JavaScript router that works everywhere
• driver.js 引导用户页面操作
• gitmoji - An emoji guide for your commit messages
• pico.js: a face-detection library in 200 lines of JavaScript- 人脸识别

Canvas库

• jCanvas - 语法简单实现canvas的js 库
• create.js
• Canvas Gauges 是一个利用纯 JavaScript 和 HTML5 Canvas（画布）打造的可完全自定义的仪表，你可以用它来创建诸如机动车速度表、温度计等类型的测量设备。
• APNG to Canvas 支持apng图片
• particles.js 背景的粒子动画生成库
• Fabric.js 是一个简单而强大的 JavaScript Canvas 库
• 腾讯 AlloyTeam 正式发布 Canvas 魔幻线条 - curve.js
• Fanvas 一键把swf转为html5 canvas动画
• inMap 是 一款基于 canvas 的大数据可视化库
• Rough.js 手绘风格
• merge-images - canvas简单图片合成

webpack 插件

• jarvis - A very intelligent browser based Webpack dashboard/美化监听错误图界面
• friendly-errors-webpack-plugin/友善的错误提示界面

其他

• README文件语法解读

前端参考集

• Codrops - Useful resources
• Front-end Code Standards & Best Practices
• frontend-dev-bookmarks
• Clusterize.js 可以优化你的大型数据表格的性能

本文标签： 必看神之建议收藏资源