一些前端开发的干货

标签（空格分隔）： 资料 #####出处:https://coding.net/u/f2e/p/Books/git/tree/master/%E7%A7%BB%E5%8A%A8Web ######包含pc端,移动端js库,框架,css框架,工具等等...在原文基础上添加修改

有些虽已经年代久远，但仍然可以学到很多有用的东西,可以整理资料的链接和其他链接资料或许有重复...... -->>另外一个链接:分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者

###移动端资料

• 支付宝无线Web开发经验谈
• 移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
• 移动web最佳实践（2013）
• 移动Web前端框架 ( 2014 )
• 移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
• iOS 微信 音频 视频自动播放

###学习资料/文章

• node.js中文资料导航
• 了不起的Nodejs Nodejs的各种资源,英文
• AngularJS ,一些关于 AngularJS 的博客，文章，视频，书籍等
• HelloSea.js seajs教程
• HTTP API 设计指南
• JSON API：用 JSON 构建 API 的标准指南中文版
• 了不起的React React的各种资源,英文
• 一家伙（s5s5）学习css3动画的心得
• 让WEB前端的变优雅的东东，如：代码规范，代码组织，最佳实践之类
• 前端工具推荐

###书籍资料

• 免费的计算机编程类中文书籍
• 免费编程书籍
• 码农周刊整理-推荐关注

---

###其他工具

HTML5 与 CSS3 技术应用评估

各种奇妙的hack

几乎所有设备的屏幕尺寸与像素密度表

移动设备参数表

ios端移动设备参数速查

浏览器兼容表

移动设备查询器

移动设备适配库

移动设备适配库2

viewport与设备尺寸在线检测器

html5 移动端兼容性速查

在线转换字体

css3 选择器测试

兼容性速查表

浏览器的一些独特参数

各种各样的媒体查询收集

css3 动画在线制作器

css3 渐变在线制作器

移动端手势表

webkit独有的样式分析

HTML5 Cross Browser Polyfills

HTML5 POLYFILLS

iPhone 6 屏幕揭秘

###js插件网站

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

###前端组件库

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

####0. 前端自动化(Workflow)

• 前端构建工具
  • 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
• css预处理器
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS

####1. 前端框架(Frameworks)

• Bootstrap

• Foundation

• Amaze UI

• Semantic UI

• Pure CSS

• topcoat

• UIkit

• Material UI

• Framework7

• mui

• ionic framework

• Fries

• jQuery Mobile

• H-ui 前端框架 ####2. JavaScript 框架汇总

• JavaScript 框架

  • react
  • Angular
  • jQuery
  • Backbone.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • ZeptoBuilder是Zepto的一个在线版本，从列表中选取你想包含的文件，就能得到你自定义的构建了
  • Vanilla JS
  • Avalon
  • Sprint.js - 一个高性能、小体积的 DOM 操作库 (Benjamin De Cock)
  • JSLite.js

• 轻量级JavaScript框架

  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework

• JavaScript 工具库

  • underscore.js
  • Way.js - 双向数据绑定库
  • Keys.js - 应用快捷键
  • Mousetrap - 键盘快捷键操作
  • Vue.js - 数据驱动的组件化MVVM库

####3. 前端游戏框架

• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus

####4. ui组件库

• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC
• NEJ
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• ZUI - 一个开源前端实践方案，帮助你快速构现代跨屏应用。
• WeX5开源前端
• B-JUI

####5. 基础模版

• 浏览器统一(Cross Browser)
  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell
• 响应式
  • Responsive - 响应式布局
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局

####6. 排版

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

####7. 网格系统

• grid
• Flexbox Grid
• MasonJS - creating a perfect grid

####8. HTML5 API 应用

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

####9. UA 识别

• detector

####10. 表单处理

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

• 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

######10.2 < select > 相关

• Chosen
• Select2
• bootstrap-select

######10.3 单选框/复选框相关

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

######10.4 上传组件

• 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提供了稳定可恢复的多文件上传功能。 ######10.5 日期选择

• Both Date and Time picker widget based on twitter bootstrap

• GMU 日历组件

• Mobiscroll

• Pikaday - 日期选择器

• TimelineJS - 时间轴 ######10.6 取色

• Colorpicker plugin for Twitter Bootstrap

######10.7 标签插件(Tag)

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

######10.8 自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件

• jquery-textcomplete - 智能搜索提示框/自动补全

• typeahead.js - a fast and fully-featured autocomplete library

• Awesomplete - 零依赖的简单自动完成插件 - github ######10.9 样式修正

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

####11. 图表绘制/图形库(Graphics)

• Highcharts

• Chart.js - 基于HTML5的JavaScript图表

• 百度 ECharts

• Chartist.js

• D3.js - A JavaScript visualization library for HTML and SVG.

• intro-to-d3 - a D3.js tutorial

• Bonsai - 一个功能强大的JavaScript图形库

• Epoch - 漂亮、平稳流畅和高性能可视化的图表库 ####12. 日期格式化

• Moment.js - 日期处理

• Smart Time Ago - 显示相对时间

• FormatJS – 让你的 Web 应用程序国际化 ####13. 页面交互

######13.1 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 - 轻量级滑块组件

######13.2 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts

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

• layzr.js - git关注蛮高的 - github
• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

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

• 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

######13.5 图片剪裁/图片处理

• 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 为图片添加水印 ######13.6 进度条/加载动画(Loading)

• NProgress.js

• progress.js

• Pace - Automatic page load progress bar

• jquery-ajax-progress

• waitMe - 很漂亮的loading效果

• spin.js

• sonic.js

######13.7 侧滑插件(offcancas)

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

######13.8 菜单(Menu)

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

######13.9 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)

• jquery-scrollspy(2)

• Waypoints

• ScrollMagic - 像进度条一样使用滚动条

• onScreen - 滚动加载,滚动固定 ######13.10 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll

• web-pull-to-refresh

• pulltorefresh

• RubberBand.js - add pull-to-refresh functionality to any page.

• infinity.js/∞ .js 无限下拉加载

######13.11 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll

• jquery.scrollTo - 平滑滚动到页面指定位置

• smooth-scroll

• scrollUp

• Elevator.js 一个模拟电梯运行“返回顶部”的 JS 插件 (Tim Holman) ######13.12 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果

• fullPage.js

• onepage-scroll

• zepto.fullpage - 专注于移动端的fullPage.js

• screenfull.js - 切换全屏模式

• Space.js – HTML 驱动的页面 3D 滚动效果 - github ######13.13 分屏滚动

• multiscroll.js - 分屏滚动效果

######13.14 转场效果

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

######13.15 固定元素(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 ######13.16 触控事件

• Hammer.js

• jquery.event.move.js

######13.17 拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库

######13.18 隐藏或展示页面元素

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

######13.19 滚动条(Scrollbar)

• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar

######13.20 视差滚动(Parallax Scrolling)

• MidnightJS 效果很赞

• parallax.js

• jparallax

• StickyStack.js -github

• jquery.superscrollorama.js 很酷的动画效果 ####14. 代码高亮插件/代码编辑器

• google-code-prettify

• highlight.js

• Rainbow

• ACE

• CodeMirror

• Crayon Syntax Highlighter

• prism - Lightweight, robust, elegant syntax highlighting.

####15. UI Icon 组件

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

####16. 动画(Animate)

• js动画库

• 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 -注释动画

• 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

####17. 本地存储

• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js

####18. 模板引擎

• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html

####19. 通知组件/弹框组件/模态窗口

• 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 - 模态窗口插件

####20. 提示控件(Tooltips)

• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件

####21. 对话框/遮罩层/弹出层(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

####22. 文档/表格/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 - 交互式表格插件

####23. 目录树插件

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

####24. Ajax模块

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

####25. 音频/视频

• 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

####26. 按钮

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

####27. 富文本编辑器/Markdown编辑器/Markdown解析器

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

####28. 内容提取(Readability)

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

####29. 颜色(CSS Colors)/SVG

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

####30. 选项卡(Tabs)

• Easy Responsive Tabs to Accordion
• Responsive-Tabs
• ion.tabs - jQuery tabs plugin
• jQuery-EasyTabs

####31. 文本处理

• ZeroClipboard - 文本复制插件
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• 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 使您能为您的字体设置透明度和字间距。

####32. 布局(Layout)

• 分隔面板(Split Panel)

  • split-pane ####33. 实用工具/其他插件

• 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

####34. sass 库

• SpaceBase – 基于 Sass 的响应式 CSS 框架 - github

####35. 未知分类

• Rainyday.js - 实现雨滴效果
• Reveal.JS - 替代PPT,演示文稿。
• Gif.JS 是一个能运行在你的浏览器中的JavaScript GIF编码器。
• Sir Trevor是一个会完全重绘网页内容的工具：直观的编辑网页内容而不用假定任何关于它是如何重绘的事。
• BookBlock 翻书特效 - github

---

####前端参考集

• frontend-guidelines - Some HTML, CSS and JS best practices.
• Codrops - Useful resources
• Front-end Code Standards & Best Practices
• frontend-dev-bookmarks
• Airbnb 的 JavaScript 编码规范
• Clusterize.js 可以优化你的大型数据表格的性能 还有一大波干货待整理...

---

欢迎分享你的好东西给我

发布时间:2015-4-17日 修正更新时间:2015-6-2日