前端組件庫(kù)
搭建web app常用的樣式/組件等收集列表(移動(dòng)優(yōu)先)
8. 路由和鏈接(Routing And URLs)
- History.js - gracefully supports the HTML5 History/State APIs
- jquery-pjax - pushState+ajax
- jquery-address - Deep Linking
- page.js - Micro client-side router
- crossroads.js
- hash.js
- path.js
- director.js - 前端路由庫(kù)(通過(guò)#符號(hào)進(jìn)行路徑組織,結(jié)合vue的component可進(jìn)行單頁(yè)的局部模塊刷新)
- URI.js
- Roadcrew.js
- SpeakingURL
- uparams - An URL params parser
- StateMan - 一個(gè)處理深層次單頁(yè)系統(tǒng)的路由庫(kù)
10. 表單處理
10.1 表單驗(yàn)證(Form Validator)/表單提示
- Validator
- Parsley
- jquery.form.js - jQuery Form Plugin
- Validform
- validator.js
- jquery-validation - jQuery Validation Plugin
- formvalidator.js
- Fort.js – 表單填寫(xiě)進(jìn)度提示
- mailcheck - 用于檢測(cè)email地址的域名
- Floatlable.js - 輸入時(shí)顯示placeholder文本
- jQuery Label Better
- validator.js
10.2 < input > 相關(guān)
10.3 < select > 相關(guān)
10.4 單選框/復(fù)選框相關(guān)
10.5 上傳組件
- jQuery File Upload Plugin
- 百度 Web Uploader
- uploadify
- Plupload
- Fine Uploader
- arale-upload - 輕量級(jí) iframe and html5 file uploader
- Dropzone.js - 文件上傳庫(kù)(可獲取文件mime, 文件大小等; 針對(duì)圖片可生成縮略圖,獲取圖片寬度,高度)
- flow.js
- localResizeIMG - 前端本地客戶(hù)端壓縮圖片，兼容IOS征冷，Android揍很，PC
- simple-uploader
10.6 日期選擇
- Both Date and Time picker widget based on twitter bootstrap
- GMU 日歷組件
- Mobiscroll
- Pikaday - 日期選擇器
- 價(jià)格日歷
10.8 標(biāo)簽插件(Tag)
10.9 自動(dòng)完成插件
- At.js - 一個(gè)Twitter/微博樣式的@自動(dòng)完成插件
- jquery-textcomplete - 智能搜索提示框/自動(dòng)補(bǔ)全
- typeahead.js - a fast and fully-featured autocomplete library
10.10 樣式修正
12. 日期格式化 & 時(shí)間軸
- Moment.js - 日期處理
- Smart Time Ago - 顯示相對(duì)時(shí)間
- timeline.js
- timeago.js
- date-utils - Date Pollyfills for Node.js and Browser
13. 頁(yè)面交互
13.1 Slider
- slick - the last carousel you'll ever need
- Swipe - the most accurate touch slider
- Swiper - Most modern mobile touch slider
- iscroll - Smooth scrolling for the web
- iSlider - 移動(dòng)端滑動(dòng)組件
- OwlCarousel - create beautiful responsive carousel slider
- jquery-mousewheel - jQuery鼠標(biāo)滾輪滾動(dòng)偵測(cè)插件
- Glide.js - 輕量級(jí)滑塊組件
- PhotoSwipe
- TouchSlide - 觸屏滑動(dòng)特效(焦點(diǎn)圖,Tab切換)
13.2 瀑布流
13.3 懶加載/加載監(jiān)聽(tīng)/預(yù)加載
- imagesLoaded
- Echo.js
- lazySizes
- jquery_lazyload
- BttrLazyLoading
- lazyload.js
- layzr.js - 一個(gè)小巧快速的圖片懶加載庫(kù)
- waitForImages - 圖片加載監(jiān)聽(tīng)?zhēng)?/a>
- PxLoader - JS預(yù)加載庫(kù):實(shí)現(xiàn)圖片湾蔓、聲音等各種文件的預(yù)加載功能
- bindWithDelay - jQuery Plugin For Delayed Event Execution
- TypeWatch - 停止輸入時(shí)調(diào)用
13.4 圖片輪播(幻燈片)/圖片展示
- FlexSlider
- unslider - 小而美的輪播庫(kù)
- prettyPhoto
- FlickerPlate - A cool jQuery plugin that lets you flick through content.
- Holder.js - Client-side image placeholders.
- RowGrid.js - 在徑直的行里放置圖片
- ImageLightbox.js - 燈箱效果
- JQuery Panorama Viewer - 全景視圖
- Intense Images - 全屏查看圖片
- Picturefill - 一個(gè)響應(yīng)式圖片 JS 插件
- zoom.js - 一個(gè) jQuery 圖片放大插件
- watermarkjs - 一個(gè)在瀏覽器中添加圖片水印的 JS 庫(kù)
- responsive-images.js
- Turntable.js - 輕易實(shí)現(xiàn)圖像的3D旋轉(zhuǎn)
- ResponsifyJS - 讓圖像完全響應(yīng)式而不會(huì)犧牲圖像的主要部分
- react-slick - React 實(shí)現(xiàn)的輪播圖插件
13.5 圖片剪裁/圖片處理
- Jcrop - Image Cropping Plugin for jQuery
- croppic - an image cropping jquery plugin
- smartcrop.js - 智能圖片裁剪庫(kù)
- jQuery.eraser - 圖像擦除插件
- DD_belatedPNG.js - 讓IE6支持透明PNG圖片
- FocusPoint.js 實(shí)現(xiàn)圖片的響應(yīng)式裁剪
- imgareaselect
- CSSgram - CSS 實(shí)現(xiàn)的 Instagram 濾鏡庫(kù)
- instagram.css - 另一個(gè) CSS 實(shí)現(xiàn)的 Instagram 濾鏡庫(kù)
- antimoderate - 圖片模糊庫(kù)
13.6 進(jìn)度條/加載動(dòng)畫(huà)(Loading)
- NProgress.js
- progress.js
- Pace - Automatic page load progress bar
- jquery-ajax-progress
- nanobar - Very lightweight progress bars.
- waitMe - 很漂亮的loading效果
- spin.js
- sonic.js
- fakeLoader.js
- loaders.css - 一個(gè)為性能優(yōu)化的實(shí)現(xiàn)加載動(dòng)畫(huà)效果的 CSS 框架
- css-loaders
- Sausage - 跟蹤滾動(dòng)條并記錄當(dāng)前閱讀所處節(jié)點(diǎn)
13.8 菜單(Menu)
- SuperFish - 基于jQuery的級(jí)聯(lián)下拉菜單
- Responsive Nav - 響應(yīng)式導(dǎo)航
- metisMenu - A jQuery menu plugin
13.10 滾動(dòng)加載更多/下拉刷新(Pull to Refresh)
- jScroll
- web-pull-to-refresh
- pulltorefresh
- RubberBand.js - add pull-to-refresh functionality to any page.
13.11 平滑滾動(dòng)插件(Smooth Scroll)
- jquery-smooth-scroll
- jquery.scrollTo - 平滑滾動(dòng)到頁(yè)面指定位置
- smooth-scroll
- scrollUp
- elevator.js - 一個(gè)模擬電梯運(yùn)行“返回頂部”的 JS 插件
13.14 轉(zhuǎn)場(chǎng)效果
13.19 滾動(dòng)條(Scrollbar)
13.21 縮放 (Zooming)
- zoom.js - 一款效果很獨(dú)特的頁(yè)面內(nèi)容縮放插件
- zoom.js - 一個(gè) jQuery 圖片放大插件
- jQuery Zoom - mouseover時(shí)圖片縮放效果
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實(shí)現(xiàn)的響應(yīng)式Icon
- Simple Icons
16. 動(dòng)畫(huà)(Animate)
- animate.css - A cross-browser library of CSS animations.
- Transit - CSS transitions and transformations for jQuery
- anime.js - Javascript 動(dòng)畫(huà)引擎
- WOW - 在滾動(dòng)過(guò)程中展示CSS動(dòng)畫(huà)效果(默認(rèn)觸發(fā)animate.css動(dòng)畫(huà))
- AniJS - A Library to Raise your Web Design without Coding
- Move.js - 簡(jiǎn)化CSS3動(dòng)畫(huà)的JS庫(kù)
- ScrollMe – 在網(wǎng)頁(yè)中加入各種滾動(dòng)動(dòng)畫(huà)效果
- Effeckt.css - A Performant Transitions and Animations Library
- NEC動(dòng)畫(huà)庫(kù)
- csshake - CSS classes to move your DOM
- magic - CSS3 Animations with special effects
- SpinKit
- Velocity.js - 加速JavaScript動(dòng)畫(huà)
- lenticular.js - 響應(yīng)傾斜或鼠標(biāo)事件創(chuàng)建圖片動(dòng)畫(huà)
- jQuery Interactive 3D - Create a 3D interactive object using images
- AnimateScroll - A Simple jQuery Plugin for Animating Scroll
- Blast.js - 把動(dòng)畫(huà)和樣式注入到文本中
- Bounce.js - 一個(gè)用于制作漂亮 CSS3 關(guān)鍵幀動(dòng)畫(huà)的 JS 庫(kù)
- Sticker.js - create a Sticker Effect
- scrollReveal.js - 元素進(jìn)入可視區(qū)域自動(dòng)觸發(fā)設(shè)置好的動(dòng)畫(huà)
- stroll.js - CSS3 list scroll effects
- jQuery Easing - 動(dòng)畫(huà)效果擴(kuò)展
- animations - CSS3 ANIMATION CHEAT SHEET
- iconate.js：將 icons 增加動(dòng)畫(huà)效果的 JS 庫(kù)
- Odometer - 數(shù)字之間的垂直切換
- Hover - 懸停效果
- Multi-touch gestures library - Web手勢(shì)庫(kù)
19. 通知組件/彈框組件/模態(tài)窗口
- Notify.js(Web Notifications API)
- alertify.js
- AlertifyJS
- SweetAlert
- Messenger - 非扯ㄉぃ酷的彈框組件
- PNotify
- Notify.js - A simple, versatile notification library
- Remodal - 模態(tài)窗口插件
- action.js - 極簡(jiǎn)的tip和Modal彈窗效果
- Modaal - 一個(gè)創(chuàng)建彈出窗口的jQuery插件
- Vex - 可以實(shí)現(xiàn)3D動(dòng)效的彈出對(duì)話(huà)框堆疊效果
20. 提示控件(Tooltips)
- hint.css - 一款非常小巧的提示框效果
- qTip2 - Pretty powerful tooltips
- tooltip - CSS Tooltips
- tooltipster - A jQuery tooltip plugin
- grumble.js - 氣泡形狀的提示（Tooltip）控件
- Ouibounce - 離站提示控件
- intro.js - 一個(gè)創(chuàng)建引導(dǎo)式網(wǎng)站介紹功能的 JS 庫(kù)
- data-tip.css - 純 CSS 實(shí)現(xiàn)的工具提示
21. 對(duì)話(huà)框/遮罩層/彈出層(lightbox)
- fancyBox - Fancy jQuery lightbox
- jquery-lightbox - The popular lightbox script, ported to jQuery
- Colorbox - a jQuery lightbox
- artDialog - 經(jīng)典的網(wǎng)頁(yè)對(duì)話(huà)框組件
- DialogEffects
- jQuery blockUI - Page or element overlay
- layer - web彈出窗/層
22. 文檔/表格/PDF
- Backgrid.js - 強(qiáng)大的表格組件
- handsontable - 在線(xiàn)可編輯excel表格
- jQuery Bootgrid - 用于ajax生成動(dòng)態(tài)表格
- DataTables - Table plug-in for jQuery
- PDF.js - 一個(gè) JavaScript 編寫(xiě)的 PDF 閱讀器
- jsPDF - Generate PDF files in JavaScript
- Recline.js - 靈活操作和展示數(shù)據(jù)
- Dynatable - 交互式表格插件
- fattable - 創(chuàng)建無(wú)限滾動(dòng)無(wú)限行列數(shù)的表格
- Clusterize.js - 一個(gè)輕松顯示大數(shù)據(jù)集的 JS 插件
- Uniform -表單美化插件
- tableExport - 導(dǎo)出HTML Table為 Excel埃难、PDF 等
23. 目錄樹(shù)插件
24. 前后端交互
24.1 Ajax模塊
- fetch - A window.fetch JavaScript polyfill
- reqwest - browser asynchronous http requests
- ajax - Standalone AJAX library
- then-request
- browser-request
- superagent
- minAjax.js
- qwest - 第三方的Ajax庫(kù)
- axios - Promise based HTTP client for the browser and node.js
- whatwg-fetch
- jsonp - A simple JSONP implementation
- isomorphic-fetch - Isomorphic WHATWG Fetch API, for Node & Browserify
25. 音頻/視頻
- jPlayer - HTML5 Audio & Video for jQuery
- video.js - HTML5 & Flash video player
- Accessible HTML5 Video Player - PayPal 開(kāi)源的 HTML5 視頻播放器
- Clappr - 開(kāi)源的Web視頻播放器
- Plyr - A simple HTML5 media player
- FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- BigVideo.js - The jQuery Plugin for Big Background Video
- BigScreen - A simple library for using the JavaScript Full Screen API
- Vide - 視頻背景
- winamp2-js
- Buzz - A Javascript HTML5 Audio library
- MediaElement.js
27. 富文本編輯器/Markdown編輯器/Markdown解析器
- Simditor - 簡(jiǎn)單快速的富文本編輯器
- BachEditor - 一個(gè)有情懷的編輯器
- TinyMCE
- bootstrap-markdown
- marked - markdown解析器
- Markdown Plus
- Editor.md - 開(kāi)源在線(xiàn)Markdown編輯器
- stackedit
- Redactor Text Editor
- micromarkdown.js - 輕量級(jí)的md解析器
- wangEditor - 支持移動(dòng)端的輕量級(jí)web富文本框
- CKEditor - 可視化 HTML 編輯器
- Quill - 富文本編輯器
30. 選項(xiàng)卡(Tabs)
- Easy Responsive Tabs to Accordion
- Responsive-Tabs
- ion.tabs - jQuery tabs plugin
- jQuery-EasyTabs
- tabulous.js
31. 文本處理
- ZeroClipboard - 文本復(fù)制插件
- clipboard.js
- Bigfoot - 點(diǎn)擊文章中的腳注彈窗顯示
- Annotator - 文本注解插件银还，可以包括注釋努隙、標(biāo)簽、用戶(hù)等
- Succinct - 用作截?cái)喽嘈形谋?后面添加省略號(hào)
- Flowtype.js - 自動(dòng)調(diào)整字體大小和行號(hào)
- flat-shadow
- FitText - A jQuery plugin for inflating web type
- shine.js - 實(shí)現(xiàn)漂亮陰影
- Type Rendering Mix - 文本渲染引擎
- jquery-expander - 閱讀更多
- Typed.js - 輸入模擬插件
- jQuery.dotdotdot - 多行文本溢出顯示省略號(hào)
- baffle.js - 文本互動(dòng)效果
33. 演示/幻燈片
- reveal.js - The HTML Presentation Framework
- bespoke.js - DIY Presentation Micro-Framework
- impress.js
- shower
- deck.js
34. 國(guó)際化(i18n)
35. 郵件模板(Email Templates)
37. HTTP請(qǐng)求相關(guān)
38. 下載組件
39. 加密/轉(zhuǎn)碼
- crypto-js - JavaScript library of crypto standards.
- ulid - 生成UUID類(lèi)庫(kù)
- RSA in JavaScript - 用RSA加密實(shí)現(xiàn)Web數(shù)據(jù)加密傳輸
41. 實(shí)用工具/其他插件
- jquery-cookie
- JavaScript Cookie
- InstantClick - 預(yù)加載用戶(hù)可能會(huì)點(diǎn)擊的一些鏈接
- Async.js - 異步操作
- html2canvas - 實(shí)現(xiàn)純JS網(wǎng)頁(yè)截圖
- jquery.qrcode.js - 生成二維碼的 jQuery 插件
- qrcodejs - JS生成QRCode的庫(kù)
- nakedpassword - 用脫衣女幫助檢測(cè)密碼強(qiáng)度
- KityMinder - 腦圖編輯工具
- MixitUp - 動(dòng)畫(huà)過(guò)濾和排序
- JQuery Tip Cards - 創(chuàng)建卡片交互的cards布局
- Fallback.js - JavaScript library for dynamically loading CSS and JS files.
- swfobject
- prettyprint.js - An in-browser JavaScript variable dumper
- Shepherd - 為應(yīng)用創(chuàng)建用戶(hù)指南
- RulersGuide.js - 類(lèi)似PhotoShop標(biāo)尺的js庫(kù)
- Gremlins.js - Monkey 測(cè)試庫(kù)
- RoughDraft.js - 簡(jiǎn)單快速的創(chuàng)建交互式的 HTML 模型的原型工具
- favico.js - 動(dòng)態(tài)改變?yōu)g覽器標(biāo)簽欄中的網(wǎng)站圖標(biāo)
- pageguide - 網(wǎng)頁(yè)向?qū)?/a>
- jsdiff - js diff 算法
在線(xiàn)工具( Online Tools )
- jsbin - Collaborative JavaScript Debugging App
- jsfiddle
- jsbeautifier - Online JavaScript beautifier
- resume.github.com
前端開(kāi)發(fā)工具
1. 開(kāi)發(fā)工具
2. 調(diào)試工具
- Fiddler
- Weinre
- Rythem
- csscss - 用于檢查css代碼冗余
- FECS - 基于 Node.js 的前端代碼檢查工具
- JSON Server - 模擬 API
- swagger-ui - 基于REST的API測(cè)試/文檔
3. 模擬數(shù)據(jù)( Fake )
- JSONPlaceholder
- json-server - Get a full fake REST API
- lowdb - A small local JSON database powered by lodash
- Mock.js - 一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨(dú)立于后端進(jìn)行開(kāi)發(fā)蛆封，幫助編寫(xiě)單元測(cè)試
4. 接口管理
- RAP - Web接口管理工具唇礁，開(kāi)源免費(fèi)，接口自動(dòng)化惨篱，MOCK數(shù)據(jù)自動(dòng)生成盏筐，自動(dòng)化測(cè)試，企業(yè)級(jí)管理
5. 瀏覽器擴(kuò)展(Chrome Extensions)
- Postman - REST Client
- Fiddler - Fiddler for Chrome Extension
- WEB前端助手(FeHelper)
- Web Developer
- Wappalyzer - 分析網(wǎng)站應(yīng)用的技術(shù)棧
- HTTP Status
- Chrome Logger
- ColorZilla
- ColorPick Eyedropper
- Code Cola
- 1px
- AlloyDesigner - 前端重構(gòu)開(kāi)發(fā)輔助工具
- Fontface Ninja
- PageSpeed Insights (by Google)
- Redirect Path
- Responsive Web Design Tester
- Window Resizer
- CSSViewer
- IE Tab
- Clear Cache
- JSONView
- Image Downloader
- Pretty Beautiful Javascript - 可以自動(dòng)格式化混淆的js文件
- JavaScript Errors Notifier
- CSS Diff - 在線(xiàn)比對(duì)頁(yè)面上兩個(gè)元素的CSS樣式差異
- WhatFont- 識(shí)別網(wǎng)頁(yè)所使用的字體
前端參考集
- frontend-guidelines - Some HTML, CSS and JS best practices.
- frontend-dev-bookmarks
- Codrops - Useful resources
- Front-end Code Standards & Best Practices
- awesome-javascript
- Front-end-tutorial - 前端涉及的所有知識(shí)體系
- awesome-vue
- 前端編碼規(guī)范( Standard Style )
- clean-code-javascript - javascript 編碼風(fēng)格指南
- <head> cheatsheet - <head> 標(biāo)簽的內(nèi)容清單
- Front-End-Checklist - The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
書(shū)籍( Frontend-related Books )
- Front-End Developer Handbook 2016
- Front-End Developer Handbook 2017
- 前端工程師手冊(cè)
- 前端工程師手冊(cè) - 包括前端開(kāi)發(fā)實(shí)踐砸讳、學(xué)習(xí)前端開(kāi)發(fā)琢融、前端開(kāi)發(fā)工具
