派大星

vuePress-theme-reco 派大星    2021 - 2022
派大星 派大星
主页
博客
  • 前端
  • JavaScript文章
  • 三级目录
  • 笔记
  • 学习笔记
  • 页面
  • CSS
  • HTML
  • 技术
  • 技术文档
  • GitHub技巧
  • 技术笔记
  • 实用工具
  • Nodejs
  • 博客搭建
  • 更多
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • JavaScript
  • 浏览器&网络
  • 前端框架
  • 资源工具
  • 持续集成
  • 小程序
  • 杂谈
  • React
  • Mysql
  • 面试题
  • uniapp
  • 《ES6 教程》笔记
  • 《Git》学习笔记
  • 《JavaScript教程》笔记
  • 《React》笔记
  • 核心概念
  • 高级指引
  • Hook
  • 案例演示
  • 《TypeScript 从零实现 axios》
  • 初识 TypeScript
  • TypeScript 常用语法
  • ts-axios 项目初始化
  • ts-axios 基础功能实现
  • ts-axios 异常情况处理
  • ts-axios 接口扩展
  • ts-axios 拦截器实现
  • ts-axios 配置化实现
  • ts-axios 取消功能实现
  • ts-axios 更多功能实现
  • ts-axios 单元测试
  • ts-axios 部署与发布
  • 《Vue》笔记
  • 基础
  • 组件
  • 过渡&动画
  • 工具
  • 规模化
  • 可复用性&组合
  • 其他
  • Vuex
标签
时间轴
关于
author-avatar

派大星

272

文章

69

标签

主页
博客
  • 前端
  • JavaScript文章
  • 三级目录
  • 笔记
  • 学习笔记
  • 页面
  • CSS
  • HTML
  • 技术
  • 技术文档
  • GitHub技巧
  • 技术笔记
  • 实用工具
  • Nodejs
  • 博客搭建
  • 更多
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • JavaScript
  • 浏览器&网络
  • 前端框架
  • 资源工具
  • 持续集成
  • 小程序
  • 杂谈
  • React
  • Mysql
  • 面试题
  • uniapp
  • 《ES6 教程》笔记
  • 《Git》学习笔记
  • 《JavaScript教程》笔记
  • 《React》笔记
  • 核心概念
  • 高级指引
  • Hook
  • 案例演示
  • 《TypeScript 从零实现 axios》
  • 初识 TypeScript
  • TypeScript 常用语法
  • ts-axios 项目初始化
  • ts-axios 基础功能实现
  • ts-axios 异常情况处理
  • ts-axios 接口扩展
  • ts-axios 拦截器实现
  • ts-axios 配置化实现
  • ts-axios 取消功能实现
  • ts-axios 更多功能实现
  • ts-axios 单元测试
  • ts-axios 部署与发布
  • 《Vue》笔记
  • 基础
  • 组件
  • 过渡&动画
  • 工具
  • 规模化
  • 可复用性&组合
  • 其他
  • Vuex
标签
时间轴
关于

一些前端开发的干货

vuePress-theme-reco 派大星    2021 - 2022

一些前端开发的干货

派大星 2021-02-28 02:29:20 资源工具
  • 库? (opens new window)
  • 目前最全的前端开发面试题及答案 (opens new window)

推荐

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

周刊

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

编码规范

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

前端库搜索

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

前端导航

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

API文档

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

移动端资料

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

# 学习资料/文章

# Git

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

# 其他

  • Node.js 最佳实践 (opens new window)

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

  • 深入理解 TypeScript (opens new window)

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

  • 数据结构和算法动态可视化 (opens new window)

  • JavaScript开发者应懂的33个概念 (opens new window)

  • 谈谈一些有趣的 CSS 话题 (opens new window)

  • 中国程序员容易发音错误的单词 (opens new window)

  • 面向对象的JavaScript编程:原理与实践 (opens new window)

  • React 入门教程-中文 (opens new window)

  • React Bits - 有关React,你需要知道的一切 (opens new window)

  • React-Native学习指南 (opens new window)

  • [译]看漫画理解Flux (opens new window)

  • 《看漫画,学 Redux》 —— A cartoon intro to Redux (opens new window)

  • 什么是正则表达式? (opens new window)

  • 前端基础进阶系列 (opens new window)

  • Study-Step-by-Step 书籍合集 (opens new window)

  • 渲染性能 (opens new window)

  • awesome-javascript (opens new window)

  • JavaScript教程 - 廖雪峰的官方网站 (opens new window)

  • 逐行剖析Vue.js源码 (opens new window)

  • node.js中文资料导航 (opens new window)

  • 了不起的Nodejs Nodejs的各种资源,英文 (opens new window)

  • AngularJS ,一些关于 AngularJS 的博客,文章,视频,书籍等 (opens new window)

  • HelloSea.js seajs教程 (opens new window)

  • HTTP API 设计指南 (opens new window)

  • JSON API:用 JSON 构建 API 的标准指南中文版 (opens new window)

  • 了不起的React React的各种资源,英文 (opens new window)

  • 一家伙(s5s5)学习css3动画的心得 (opens new window)

  • 让WEB前端的变优雅的东东,如:代码规范,代码组织,最佳实践之类 (opens new window)

  • 前端工具推荐 (opens new window)

  • 腾讯团队web移动文章 (opens new window)

  • 视觉设计师是怎样让前端工程师 100% 实现设计效果的? (opens new window)

  • JavaScript 秘密花园 (opens new window)

  • vue 教程 (opens new window)

  • 10 个原则让动画带你飞 (opens new window)

  • React Native 中文网 (opens new window)

  • cssreference.io (opens new window)

  • 大话设计模式 (opens new window)

  • YOU MIGHT NOT NEED JQUERY - 是用原生写法代替jq (opens new window)

  • 全景漫游VR -(淘宝造物节背后的库) (opens new window)

  • 从零开始构建 JavaScript 技术栈 (opens new window)

  • 微信小程序开发资源汇总 (opens new window)

  • 《一起学 Node.js》彻底重写完毕 (opens new window)

  • TypeScript 入门教程 (opens new window)

  • TypeScript 官方文档 (opens new window)

  • 第一本 PWA 中文书 (opens new window)

  • 如何通过饿了么 Node.js 面试 (opens new window)

  • JavaScript 算法与数据结构 (opens new window)

  • 《编程之法:面试和算法心得》 (opens new window)

  • learnVue - Vue.js源码分析 (opens new window)

  • 前端面试手册 (opens new window)

  • 全栈工程师之路-Node.js (opens new window)

  • css-gif 一个动图,一个CSS知识点 (opens new window)

  • 《Flutter 实战》 (opens new window)

  • JavaScript 资源大全中文版 (opens new window)

  • 现代 JavaScript 教程中文版 (opens new window)

  • CheatSheet,一图读懂系列 (opens new window)

  • vue 源码解析及实现 (opens new window)

书籍资料

  • USTC-CS-Courses-Resource 中国科学技术大学众多课程资源 (opens new window)

  • 免费的计算机编程类中文书籍 (opens new window)

  • 免费编程书籍 (opens new window)

  • 码农周刊整理-推荐关注 (opens new window)

  • 运维实践指南 (opens new window)

  • 《微服务:从设计到部署》 (opens new window)

  • 【编程随想】收藏的电子书清单 (opens new window)

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

# 一些社区

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

# 系列文章

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

# 其他工具

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

# js插件网站

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

前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

# 手势库

  • TouchSwipe (opens new window)

# vue专题

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

# Vue相关开源项目库汇总

  • http://www.opendigg.com/tags/front-vue
  • https://github.com/opendigg/awesome-github-vue
  • https://vuejsexamples.com/
  • Vue.js Script (opens new window)

# vue ui组件库

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

# vue 其他插件组件

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

# React 相关

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

# Weex

  • Weex Ui (opens new window)

# Node

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

# 小程序相关

  • 娜娜奇 - 基于 React 的多端小程序转译框架 (opens new window)

# Nginx

  • Nginx 入门教程 (opens new window)
  1. 前端自动化(Workflow)
  • 依赖安装
    • yarn (opens new window)
    • npm (opens new window)
  • 前端构建工具
    • Yeoman - a set of tools for automating development workflow (opens new window)
    • gulp - The streaming build system (opens new window)
    • grunt - the JavaScript Task Runner (opens new window)
    • F.I.S - 前端集成解决方案 (opens new window)
  • 前端模块管理器
    • Bower - A package manager for the web (opens new window)
    • Browserify (opens new window)
    • Component (opens new window)
    • Duo (opens new window)
    • RequireJS (opens new window)
    • Sea.js (opens new window)
    • webpack (opens new window)
    • ESL (opens new window)是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。
  • css预处理器
    • Sass - Syntactically Awesome Style Sheets (opens new window)
    • Less - Less is More , Than CSS (opens new window)
    • Stylus - Expressive, dynamic, robust CSS (opens new window)
  1. 前端框架(Frameworks)
  • Material-UI 移动端ui框架,效果好 (opens new window) github (opens new window)
  • Frozen UI 腾讯移动UI框架 (opens new window)
  • Bootstrap (opens new window)
  • Foundation (opens new window)
  • Amaze UI (opens new window)
  • Semantic UI (opens new window)
  • Pure CSS (opens new window)
  • topcoat (opens new window)
  • UIkit (opens new window)
  • Material UI (opens new window)
  • Framework7 (opens new window)
  • mui (opens new window)
  • ionic framework (opens new window)
  • Fries (opens new window)
  • jQuery Mobile (opens new window)
  • H-ui 前端框架 (opens new window)
  • Skeleton (opens new window)
  • HaloJS (opens new window)
  • QMUI Web 是一个专注 Web UI (opens new window)
  • LuLu ui (opens new window)

1.2 后端UI框架

  • Layui (opens new window)
  • BUI (opens new window)
  1. JavaScript 框架汇总
  • JavaScript 框架

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

    • Min.js - Super minimal selector and event library (opens new window)
    • skel.js - A lightweight responsive framework (opens new window)
    • LAB.js 异步加载js (opens new window)
  • JavaScript 工具库[扩展库]

    • es5-shim (opens new window)

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

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

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

    • Ramda.js 函数式编程库 (opens new window)

    • functional.js 函数式编程库 (opens new window)

    • Lazy.js 性能超越underscore和Lodash的工具类库 (opens new window)

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

    • Way.js - 双向数据绑定库 (opens new window)

    • Keys.js - 应用快捷键 (opens new window)

    • Mousetrap - 键盘快捷键操作 (opens new window)

    • 移动web开发调试工具AlloyLever介绍 - 打印信息 (opens new window)

    • vConsole.js 同上 (opens new window)

    • Hotkeys.js 捕获键盘输入和输入的组合键快捷键 (opens new window)

    • keymaster.js 同上 (opens new window)

  1. 前端游戏框架(动画引擎)
  • Hilo 跨终端的互动游戏解决方案 阿里出品 (opens new window)
  • Pixi.js v4 - WebGL 国外游戏引擎 (opens new window)
  • cocos2d-html5 (opens new window)
  • Egret Engine (opens new window)
  • LimeJS (opens new window)
  • EaselJS (opens new window)
  • three.js (opens new window)
  • AlloyStick (opens new window)
  • The-Best-JS-Game-Framework (opens new window)
  • CanvasEngine (opens new window)
  • Quintus (opens new window)
  • LayaAir 引擎 国内游戏框架,跟白鹭比较??暂时不知道 (opens new window)
  • soya2d 一个 好学、易用、强大、开源的 H5游戏引擎 现在,有你掌控 (opens new window)
  • phina.js JavaScript游戏开发库 (opens new window)
  • melon.js (opens new window)
  • Phaser - HTML5 Game Framework (opens new window)
  • PlayCanvas WebGL Game Engine (opens new window)
  • Popmotion.js – 小巧,灵活的 JavaScript 运动引擎 (opens new window)
  • Dynamics.js - 创建逼真的物理动画的 JS 库 (opens new window)
  • Snabbt.js – 极简的 JavaScript 动画库 (opens new window)
  1. ui组件库
  • GMU - 基于zepto的ui组件库,适用于移动端 (opens new window)
  • FrozenUI - 腾讯移动端组件库 (opens new window)
  • NEC (opens new window)
  • NEJ (opens new window)
  • Pure CSS Components (opens new window)
  • magic-of-css (opens new window)
  • Primer - The CSS toolkit and guidelines that power GitHub (opens new window)
  • [ZUI - 一个开源前端实践方案,帮助你快速构现代跨屏应用。][1]
  • [WeX5开源前端][2]
  • [B-JUI][3]
  • MUI 轻量级WEB框架 (opens new window)
  • jQuery WeUI - V0.7.1 WeUI 的jQuery实现版,提供了大量官方WeUI没有的组件, 同时兼容 jQuery 和 Zepto。 (opens new window)
  • Light7 手机ui组件 (opens new window)
  • bttn.css Awesome buttons for awesome projects (opens new window)
  • CSS Pressable 3D Buttons (opens new window)
  1. 基础模版
  • 浏览器统一(Cross Browser)

    • HTML5 BOILERPLATE (opens new window)
    • Modernizr (opens new window)
    • Normalize.css (opens new window)
    • cssFx - 为CSS3自动生成浏览器前缀 (opens new window)
    • -prefix-free - Break free from CSS prefix hell (opens new window)
  • 响应式

    • Responsive - 响应式布局 (opens new window)
    • Spectre.css - 轻量级响应式 CSS 框架 (opens new window)
    • Wing 是一个微型(压缩后仅有4KB)响应式的 CSS 框架,它提供了一个 12 列响应式网格以及基础的样式组件集 (opens new window)
    • Core.css 是一个用于构建响应式网站的轻量级框架。它压缩后仅有 1.3kb,同时它没有预先设定的元素和内置动画。所以适用于搭建任何小型的 Web 项目。 (opens new window)
    • Enquire.js - Awesome Media Queries in JavaScript (opens new window)
    • Free Wall - 创建桌面,移动和平板的动态网格布局 (opens new window)
    • reframe.js 让非响应式元素响应的JavaScript插件。 Reframe对iframe和video元素特别有用 (opens new window)
    • Grid—A—Licious (opens new window)
    • MUURI - Responsive, sortable, filterable and draggable grid layouts , ie9+ (opens new window)
  1. 排版
  • yue.css (opens new window)
  • typo.css (opens new window)
  • chinese-copywriting-guidelines - 中文文案排版指南 (opens new window)
  1. 网格系统
  • flex.css - 快速入门,极速布局 (opens new window)
  • grid (opens new window)
  • Flexbox Grid (opens new window)
  • MasonJS - creating a perfect grid (opens new window)
  • Juiced: a Flexbox CSS Framework (opens new window)
  • Neutron 创建灵化、简洁网页布局的SASS框架 (opens new window)
  • flexible.gs 灵活的响应式栅格布局CSS框架 (opens new window)
  • Decorator - HTML, CSS, and JavaScrip 前端框架 (opens new window)
  • minigrid.js 只有2KB的零依赖栅格布局-瀑布流 (opens new window)
  • Reflexbox 用于React的Flexbox网格系统,提供Grid, Flex, 和Box组件用于开发 (opens new window)
  1. HTML5 API 应用
  • History.js - gracefully supports the HTML5 History/State APIs (opens new window)
  • jquery-pjax - pushState+ajax (opens new window)
  • jquery-address - Deep Linking (opens new window)
  • Notify.js(Web Notifications API) (opens new window)
  1. UA 识别
  • detector (opens new window)
  1. 表单处理

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

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

10.2 < select > 相关

  • Chosen (opens new window)
  • Select2 (opens new window)
  • bootstrap-select (opens new window)

10.3 单选框/复选框相关

  • iCheck - 增强复选框和单选按钮 (opens new window)

10.4 上传组件

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

10.5 日期选择

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

10.6 取色

  • Colorpicker plugin for Twitter Bootstrap (opens new window)

10.7 标签插件(Tag)

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

10.8 自动完成插件

  • At.js - 一个Twitter/微博样式的@自动完成插件 (opens new window)
  • jquery-textcomplete - 智能搜索提示框/自动补全 (opens new window)
  • typeahead.js - a fast and fully-featured autocomplete library (opens new window)
  • Awesomplete - 零依赖的简单自动完成插件 (opens new window) - github (opens new window)
  • Algolia Places:给输入框添加地址自动补全功能 (opens new window)

10.8.1

  • Cleave.js – 自动格式化表单输入框的文本内容 (opens new window)

10.9 样式修正

  • autosize - 使文本框自动适应所输入的内容 (opens new window)
  1. 图表绘制/图形库(Graphics)
  • Highcharts (opens new window)
  • Chart.js - 基于HTML5的JavaScript图表 (opens new window)
  • 百度 ECharts (opens new window)
  • Chartist.js (opens new window)
  • D3.js - D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。 (opens new window)
  • intro-to-d3 - a D3.js tutorial (opens new window)
  • Bonsai - 一个功能强大的JavaScript图形库 (opens new window)
  • Epoch - 漂亮、平稳流畅和高性能可视化的图表库 (opens new window)
  • SVG 2D绘图 (opens new window)
  • SVG Morpheus - SVG图形变形动画 (opens new window)
  • Sigma是一个专用于图形绘制的JavaScript库。 (opens new window)
  • GraphicsJS ,一个轻量级的前端图形库 支持ie6 (opens new window)
  • 强大的矢量图形库:Raphael JS (opens new window) http://www.jianshu.com/p/81c3fc5287d1
  • chart.xkcd - xkcd 风格(手绘风格)的图表库 (opens new window)
  1. 日期格式化
  • Day.js 2kB超轻量时间库 和Moment.js一样的API (opens new window)
  • Miment.js 轻量级的时间库 (opens new window)
  • Moment.js - 日期处理 (opens new window)
  • Smart Time Ago - 显示相对时间 (opens new window)
  • FormatJS – 让你的 Web 应用程序国际化 (opens new window)
  • 一个轻量级的时间处理工具库 - dateformat.js (opens new window)
  • timeago a jQuery plugin 返回类型xxx时间之前发表,支持18种语言 (opens new window)
  • date-fns 时间格式化 (opens new window)
  1. 页面交互

13.1 Slider

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

13.2 瀑布流

  • Masonry (opens new window) 推荐
  • Isotope - Filter & sort magical layouts (opens new window)
  • Wookmark-jQuery (opens new window)

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

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

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

  • SuperSlide - 国产的幻灯片,功能集成比较多,我个人推荐 (opens new window)
  • FlexSlider (opens new window)
  • unslider - 小而美的轮播库 (opens new window)
  • prettyPhoto (opens new window)
  • FlickerPlate - A cool jQuery plugin that lets you flick through content. (opens new window)
  • Holder.js - Client-side image placeholders. (opens new window)
  • RowGrid.js - 在径直的行里放置图片 (opens new window)
  • ImageLightbox.js - 灯箱效果 (opens new window)
  • JQuery Panorama Viewer - 全景视图 (opens new window)
  • PhotoSwipe - 移动开发必备的 iOS 风格相册 (opens new window) - github (opens new window)
  • lory.js (opens new window)
  • swipe2 – 非常轻量级的一个图片滑动切换效果库,跟3版本不一样,这个用于幻灯片 (opens new window)
  • RefineSlide A 3D transform/CSS transition-enabled jQuery (opens new window)

13.5 图片剪裁/图片处理

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

13.6 图片放大镜

  • EasyZoom for jQuery (opens new window)
  • ZooMove for jQuery (opens new window)
  • Magnifier.js (opens new window)

13.6 进度条/加载动画(Loading)

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

13.7 侧滑插件(offcancas)

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

13.8 菜单(Menu)

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

13.9 滚动侦测(ScrollSpy)

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

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

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

13.11 平滑滚动插件(Smooth Scroll)

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

13.12 全屏滚动/全屏切换

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

13.13 分屏滚动

  • multiscroll.js - 分屏滚动效果 (opens new window)

13.14 转场效果

  • Animsition - 页面切换时的过渡效果 (opens new window)

13.15 固定元素(Sticky)

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

13.16 触控事件

  • Hammer.js (opens new window)

13.17 拖拽组件

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

13.18 隐藏或展示页面元素

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

13.19 滚动条(Scrollbar)

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

13.20 视差滚动(Parallax Scrolling)

  • MidnightJS 效果很赞 (opens new window)
  • parallax.js (opens new window)
  • jparallax (opens new window)
  • StickyStack.js (opens new window) -github (opens new window)
  • jquery.superscrollorama.js 很酷的动画效果 (opens new window)
  1. 代码高亮插件/代码编辑器
  • google-code-prettify (opens new window)
  • highlight.js (opens new window)
  • Rainbow (opens new window)
  • ACE (opens new window)
  • CodeMirror (opens new window)
  • Crayon Syntax Highlighter (opens new window)
  • prism - Lightweight, robust, elegant syntax highlighting. (opens new window)
  1. UI Icon 组件
  • Font Awesome (opens new window)
  • Glyphter: The SVG Font Machine (opens new window)
  • Perfect Icons (opens new window)
  • iconizr (opens new window)
  • Cikonss - 纯CSS实现的响应式Icon (opens new window)
  • Simple Icons (opens new window)
  1. 动画(Animate)
  • js动画库

  • GSAP.js 最屌的动画库 (opens new window)

  • Animate Plus CSS/SVG 动画库 (opens new window)

  • anime.js 动画库,支持svg-一直在更新 (opens new window)

  • dynamics.js js动画-很屌的样子,支持svg (opens new window)

  • snabbt.js - 简约的JavaScript动画库 (opens new window)

  • Transit - CSS transitions and transformations for jQuery (opens new window)

  • Move.js - 简化CSS3动画的JS库 (opens new window) - github (opens new window)

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

  • Velocity.js - 加速JavaScript动画 (opens new window)

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

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

  • jQuery Interactive 3D - 使用图片创建一个3D模型 (opens new window)

  • AnimateScroll - 动画滚动,应该是定点导航动画 (opens new window)

  • jq 元素抖动库 (opens new window)

  • Tween JS JavaScript 补间动画库 canvas (opens new window)

  • Rekapi 关键帧动画库 (opens new window)

  • favico.js v0.3.4 控制游览器标签小图标 (opens new window) - github (opens new window)

  • dom-animator -注释动画 (opens new window)

  • KUTE.js 支持SVG等动画-手机端性能不太好 (opens new window)

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

  • txt.wav.js 让文字飞起来 (opens new window)

  • jquery.path 动画路径 (opens new window)

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

  • mo.js (opens new window)

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

  • Direction Reveal (方向展示) (opens new window)

  • Rythm.js 让页面跳舞 (opens new window)

  • 一个 JavaScript 的 3D 设计和动画制作库 (opens new window)

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

  • css动画库

  • xless - 又一个css动画库 (opens new window) github (opens new window)

  • CSShake - css抖动库 (opens new window) - github (opens new window)

  • animate.css - css3动画库 (opens new window)

  • all animation - 同上,有sass版本 (opens new window) - github (opens new window)

  • magic - CSS3动画特效 (opens new window) - gihub (opens new window)

  • ScrollMe – 在网页中加入各种滚动动画效果 (opens new window)

  • Loaders.css - css加载动画 (opens new window) - github (opens new window)

  • css-loaders - 同上 (opens new window)

  • Hover.css (opens new window) - github (opens new window)

  • Effeckt.css - 手机动画库 (opens new window)

  • NEC动画库 (opens new window)

  • uilang - a minimal, ui-focused programming language for web designers (opens new window)

  • csshake 带有sass版本 (opens new window)

  • AniJS - 一个基于声明式语法的CSS动画库 (opens new window)

  • SpinKit ?? (opens new window)

  • JX.Animate - 腾讯css3动画库 (opens new window) - github (opens new window)

  • SpinThatShit 酷炫的Loading 动画sass库 https://matejkustec.github.io/SpinThatShit/ (opens new window)

  • OBNOXIOUS.CSS 冲击视觉的效果 (opens new window)

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

17.1 数据库

  • nedb (opens new window)
  • lowdb (opens new window)
  • localForage (opens new window)
  • Dexie.js (opens new window)
  • ZangoDB (opens new window)
  1. 模板引擎
  • paperclip.js ie8+ (opens new window)
  • mustache.js (opens new window)
  • Handlebars.js (opens new window)
  • artTemplate (opens new window)
  • baiduTemplate (opens new window)
  • JSRender (opens new window)
  • EJS - JavaScript Templates (opens new window)
  • Juicer - A Light Javascript Templete Engine. (opens new window)
  • Tempo (opens new window)
  • json2html (opens new window)
  • CMS.js是基于Jekyll的一个JavaScript网页生成器,使用普通的HTML,CSS和JavaScript的网站快捷的生成网页。 (opens new window)
  1. 通知组件/弹框组件/模态窗口
  • layer.js - 国产,也是集成很多功能,个人推荐 (opens new window)
  • AnimatedModal.js - CSS3 全屏模态窗口,支持 Firefox、Chrome、Safari、Opera 和 IE 10+ (opens new window)
  • alertify.js (opens new window)
  • AlertifyJS (opens new window)
  • SweetAlert (opens new window)
  • Messenger - 非常酷的弹框组件 (opens new window)
  • PNotify (opens new window)
  • Notify.js - A simple, versatile notification library (opens new window)
  • Remodal - 模态窗口插件 (opens new window)
  • Popper.js:强大的浮动提示库(pop 即弹出层,popper 即弹出层的内容) (opens new window)
  1. 提示控件(Tooltips)
  • qTip2 - Pretty powerful tooltips (opens new window)
  • tooltip - CSS Tooltips (opens new window)
  • tooltipster - A jQuery tooltip plugin (opens new window)
  • grumble.js - 气泡形状的提示(Tooltip)控件 (opens new window)
  • Ouibounce - 离站提示控件 (opens new window)
  • SweetAlert – 替代 Alert 的漂亮的提示效果 (opens new window)
  • SweetAlert2 - 不知道是不是克隆1的自己搞一个分支 (opens new window)
  • Tippy.js A lightweight, pure JavaScript tooltip library 迷你提示框 (opens new window)
  • tata.js 一款提示窗口 (opens new window)
  1. 对话框/遮罩层/弹出层(lightbox)
  • fancyBox - Fancy jQuery lightbox (opens new window)
  • jquery-lightbox - The popular lightbox script, ported to jQuery (opens new window)
  • Colorbox - a jQuery lightbox (opens new window)
  • artDialog - 经典的网页对话框组件 (opens new window)
  • DialogEffects (opens new window)
  • jQuery blockUI - Page or element overlay (opens new window)
  1. 文档/表格/PDF
  • handsontable - 在线可编辑excel表格 (opens new window)
  • jQuery Bootgrid - 用于ajax生成动态表格 (opens new window)
  • DataTables - Table plug-in for jQuery (opens new window)
  • PDF.js - 一个 JavaScript 编写的 PDF 阅读器 (opens new window)
  • jsPDF - Generate PDF files in JavaScript (opens new window)
  • Recline.js - 灵活操作和展示数据 (opens new window)
  • Dynatable - 交互式表格插件 (opens new window)
  1. 目录树插件
  • zTree_v3 - jQuery Tree Plugin (opens new window)
  • jstree - jQuery Tree Plugin (opens new window)
  • fancytree - Tree plugin for jQuery (opens new window)
  1. Ajax模块
  • fetch - A window.fetch JavaScript polyfill (opens new window)
  • reqwest - browser asynchronous http requests (opens new window)
  • minAjax.js (opens new window)
  1. 音频/视频
  • A HTML5 video player with a parser that saves traffic 西瓜播放器 (opens new window)
  • Chimee 组件化H5播放器框架-mp4、m3u8、flv (opens new window)
  • pizzicato.js (opens new window)
  • webaudiox.js (opens new window)
  • jWebAudio (opens new window)
  • jPlayer - HTML5 Audio & Video for jQuery (opens new window)
  • video.js - HTML5 & Flash video player (opens new window)
  • Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器 (opens new window)
  • Clappr - 开源的Web视频播放器 (opens new window)
  • Plyr - 简单,灵活的 HTML5 媒体播放器 (opens new window)
  • FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds. (opens new window)
  • BigVideo.js - The jQuery Plugin for Big Background Video (opens new window)
  • BigScreen - A simple library for using the JavaScript Full Screen API (opens new window)
  • Vide - 视频背景 (opens new window)
  • winamp2-js (opens new window)
  • Buzz - A Javascript HTML5 Audio library (opens new window)
  • [howler.js 是一个新的 JavaScript 库用于处理 Web 的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目。] (https://github.com/goldfire/howler.js)
  • Flv.js 实现了 FLV 格式视频的播放 (opens new window)
  • BIDEO.JS使得添加全屏背景视频更加容易。 (opens new window)
  • loud links一个很小的JavaScript库,允许您通过HTML5添加交互式音频元素在网站播放mp3 / ogg文件,目前支持所有浏览器。 (opens new window)
  • Waud.js – 使用HTML5降级处理的Web音频库 (opens new window)
  • Wad (opens new window)
  • Tone.js (opens new window)
  • PearPlayer.js 一个支持多协议、多源、混合P2P-CDN的流媒体播放器 (opens new window)
  1. 按钮
  • Buttons - A CSS button library (opens new window)
  • ButtonComponentMorph (opens new window)
  • ProgressButtonStyles (opens new window)
  • CreativeButtons (opens new window)
  • CSS3 buttons (opens new window)
  • jquery.onoff - Interactive, accessible toggle switches for the web. (opens new window)
  1. 富文本编辑器/Markdown编辑器/Markdown解析器
  • Simditor - 简单快速的富文本编辑器 (opens new window)
  • BachEditor - 一个有情怀的编辑器 (opens new window)
  • Squire – 简洁的 HTML5 富文本编辑器 (opens new window)
  • TinyMCE (opens new window)
  • bootstrap-markdown (opens new window)
  • marked - markdown解析器 (opens new window)
  • Markdown Plus (opens new window)
  • Editor.md - 开源在线Markdown编辑器 (opens new window)
  1. 内容提取(Readability)
  • Readability (opens new window)
  • json.human.js - Json Formatting for Human Beings (opens new window)
  1. 颜色(CSS Colors)/SVG
  • CSS Colours (opens new window)
  • SVGeneration (opens new window)
  • SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器 (opens new window)
  • Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素 (opens new window)
  1. 选项卡(Tabs)
  • Easy Responsive Tabs to Accordion (opens new window)
  • Responsive-Tabs (opens new window)
  • ion.tabs - jQuery tabs plugin (opens new window)
  • jQuery-EasyTabs (opens new window)
  • 以多标签页载入页面的功能插件 bTabs.js (opens new window)
  1. 文本处理
  • ZeroClipboard - 文本复制插件 (opens new window)
  • Bigfoot - 点击文章中的脚注弹窗显示 (opens new window)
  • Annotator - 文本注解插件,可以包括注释、标签、用户等 (opens new window)
  • Succinct - 用作截断多行文本,后面添加省略号 (opens new window)
  • Shave 是一个零依赖、轻量级的 JavaScript 插件,它能截断多行文本. (opens new window)
  • Flowtype.js - 自动调整字体大小和行号 (opens new window)
  • flat-shadow (opens new window)
  • FitText - A jQuery plugin for inflating web type (opens new window)
  • Squishy 是一个jQuery插件,它能自动调整文字,准确地对其各容器 (opens new window)
  • slabText 一个jQuery插件,用于创建大的,大胆的和敏感的头条新闻。 (opens new window)
  • Textillate 做CSS3文字动画。 (opens new window)
  • Bacon 是一个jQuery插件,它允许您环绕贝塞尔曲线文字或线条,它可以让您的文字沿贝塞尔曲线排列。 (opens new window)
  • Circletype.js 是一个很小的( 2.7kb )的jQuery插件,可以让你的字体在一个圆圈内显示。 (opens new window)
  • jQSlickWrap 是一个jQuery插件,让您可以轻松而准确地环绕浮动图像里的内容文字。 (opens new window)
  • TypeButter 使您能为您的字体设置透明度和字间距。 (opens new window)
  1. 布局(Layout)
  • 分隔面板(Split Panel)
    • jQuery Split Pane plugin (opens new window)
    • Split.js (推荐) (opens new window)
    • React Split Pane (opens new window)
    • Vue Split Pane (opens new window)
    • Vue Split Pane (opens new window)
    • vue-resize-split-pane (opens new window)
    • vue-multipane (opens new window)
  1. 实用工具/其他插件
  • jquery-cookie (opens new window)
  • FastClick - 处理移动端 click 事件 300 毫秒延迟 (opens new window)
  • Async.js - 异步操作 (opens new window)
  • html2canvas - 实现纯JS网页截图 (opens new window)
  • jquery.qrcode.js - 生成二维码的 jQuery 插件 (opens new window)
  • nakedpassword - 用脱衣女帮助检测密码强度 (opens new window)
  • KityMinder - 脑图编辑工具 (opens new window)
  • MixitUp - 动画过滤和排序 (opens new window)
  • JQuery Tip Cards - 创建卡片交互的cards布局 (opens new window)
  • Fallback.js - JavaScript library for dynamically loading CSS and JS files. (opens new window)
  • swfobject (opens new window)
  1. sass 库
  • Family.scss - css3选择器简写框架,非常不错 (opens new window)
  • SpaceBase – 基于 Sass 的响应式 CSS 框架 (opens new window) - github (opens new window)
  • breakpoint-sass 媒体查询库 (opens new window)
  • @include-media diy媒体查询库 (opens new window)
  • sass-mediaqueries 媒体查询库-推荐 (opens new window)
  • sass-mq Media Queries with superpowers-em单位媒体查询库 (opens new window)
  • sass-svg 一个内联 SVG 的 SASS 库 (opens new window)

34.1 分页

  • jqPagination 分页插件 (opens new window)

34.2 模拟打字

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

34.3 字数统计

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

# webpack 插件

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

# 其他

  • README文件语法解读 (opens new window)

# 前端参考集

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