0. 前端自動(dòng)化(Workflow)

?

• 前端構(gòu)建工具
• • Webpack - module bundler
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
    • use-gulp
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解決方案
  • Web Starter Kit - 一個(gè)Google 提供的幫助開(kāi)發(fā)者快速設(shè)置項(xiàng)目的工具集
• 前端模塊管理器
• • Bower - A package manager for the web
• • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • LABjs - 文件加載器
  • css-modulesify - CSS模塊加載器
• css預(yù)處理器
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS
• 前端性能分析工具
  • analyze-css - CSS 選擇器的復(fù)雜度和性能分析器

  ?

1. 前端框架(Frameworks)

• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Materialize - 一個(gè)基于 Material Design 的 CSS 框架
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• App.js
• Office UI Fabric - 微軟 Office 前端團(tuán)隊(duì)的框架

?

2. JavaScript 框架匯總

• JavaScript 框架
  • react
  • Angular
  • jQuery
  • Backbone.js
  • ember.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • Vanilla JS
  • Vue.js - 數(shù)據(jù)驅(qū)動(dòng)的組件化MVVM庫(kù)(用于創(chuàng)建web交互界面和數(shù)據(jù)雙向綁定)
    • Vuex - 一個(gè)專門(mén)為 Vue.js 應(yīng)用設(shè)計(jì)的狀態(tài)管理架構(gòu)
    • Mint UI：基于 Vue.js 的移動(dòng)端組件庫(kù)
    • Vux - 基于 Vue 和 WeUI 的 UI 組件庫(kù)
  • Can.js
  • Avalon
  • T3 JavaScript Framework - 一個(gè)用于搭建大型Web應(yīng)用的客戶端JS框架
  • jsblocks - Better MV-ish Framework 從簡(jiǎn)單 UI 到復(fù)雜單頁(yè)應(yīng)用都適用
• 輕量級(jí)JavaScript框架
  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • Sprint.js - 一個(gè)高性能、小體積的 DOM 操作庫(kù)
  • knockout
  • PhantomJS - 一個(gè)基于 WebKit 的服務(wù)器端 JavaScript API
• 函數(shù)式反應(yīng)型編程框架 FRP (Functional Reactive Programming) library
  • Bacon.js - A small functional reactive programming lib for JavaScript.
  • Flapjax - 一個(gè)支持FRP的JavaScript框架
• JavaScript 工具庫(kù)
  • underscore.js
  • Underscore.string.js字符串操作庫(kù)
  • functional.js
  • Lo-Dash - A JavaScript utility library
  • Lazy.js - a functional utility library for JavaScript
  • Fn.js
  • Way.js - 雙向數(shù)據(jù)綁定庫(kù)
  • boiler - a utility library that makes tasks in JavaScript easier
  • 快捷鍵操作
    • Keys.js - 應(yīng)用快捷鍵
    • simple-hotkeys
    • jquery.hotkeys
    • Mousetrap - 鍵盤(pán)快捷鍵操作
  • vConsole - 一個(gè)針對(duì)手機(jī)網(wǎng)頁(yè)的前端 console 調(diào)試面板
  • AlloyLever - 移動(dòng)web開(kāi)發(fā)者工具面板

  ?

3. 前端游戲框架

• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• Stage.js
• phaser - 一個(gè)快速、免費(fèi)、開(kāi)源的 HTML5 游戲框架

?

4. ui組件庫(kù)(CSS Framework)

• WeUI - 微信官方UI庫(kù)
  • jQuery WeUI - WeUI的jQuery版本
• GMU - 基于zepto的ui組件庫(kù)，適用于移動(dòng)端
• FrozenUI - 騰訊移動(dòng)端組件庫(kù)
• NEC - 更好的CSS方案
• NEJ - 更好的JS解決方案
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• light7 - A Light and easy to use UI Lib
• Spectre.css - 輕量、響應(yīng)式的現(xiàn)代 CSS 框架

?

5. 基礎(chǔ)模版

• 瀏覽器統(tǒng)一(Cross Browser)
  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • HTML5 Shiv - 讓ie瀏覽器成為支持html5的瀏覽器的解決方法
  • cssFx - 為CSS3自動(dòng)生成瀏覽器前綴
  • -prefix-free - Break free from CSS prefix hell
  • ieBetter.js - make ie browser like a morden browser main for ie6~ie8
  • es6-promise - Promise 對(duì)象的兼容
• 響應(yīng)式
  • Responsive - 響應(yīng)式布局
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 創(chuàng)建桌面，移動(dòng)和平板的動(dòng)態(tài)網(wǎng)格布局
• 適配方案
  • MetaHandler.js：移動(dòng)端適配各種屏幕無(wú)痛工具腳本
  • lib-flexible: 移動(dòng)端自適應(yīng)方案
    • 參考: 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配
    • flexible demo 1
    • flexible demo 2
  • pageResponse
  • responsive-page

  ?

6. 排版

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

?

7. 網(wǎng)格系統(tǒng)

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

?

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ù)

?

9. UA 識(shí)別

• detector

?

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)

• cleave.js - 格式化你的輸入內(nèi)容

10.3 < select > 相關(guān)

• Chosen
• Select2
• bootstrap-select

10.4 單選框/復(fù)選框相關(guān)

• iCheck - 增強(qiáng)復(fù)選框和單選按鈕
• Switchery - iOS 7 style switches for your checkboxes

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 - 前端本地客戶端壓縮圖片，兼容IOS，Android，PC
• simple-uploader

10.6 日期選擇

• Both Date and Time picker widget based on twitter bootstrap
• GMU 日歷組件
• Mobiscroll
• Pikaday - 日期選擇器
• PriceCalendar - 酒店價(jià)格日歷
  • API文檔
  • DEMO

10.7 取色

• Colorpicker plugin for Twitter Bootstrap

10.8 標(biāo)簽插件(Tag)

• TaggingJS – 可以靈活定制的 jQuery 標(biāo)簽系統(tǒng)插件
• selectize.js
• Bootstrap Tags Input
• jQuery-Tags-Input

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 樣式修正

• autosize - 使文本框自動(dòng)適應(yīng)所輸入的內(nèi)容

?

11. 圖表繪制/圖形庫(kù)(Graphics)

• Highcharts
• Chart.js - Simple HTML5 Charts using Canvas
• 百度 ECharts
• Chartist.js
• D3.js - A JavaScript visualization library for HTML and SVG.
  • intro-to-d3 - a D3.js tutorial
• Bonsai - 一個(gè)功能強(qiáng)大的JavaScript圖形庫(kù)
• epoch - 數(shù)據(jù)圖表可視化
• Vis.js
• Coutour.js
• zrender - 一個(gè)輕量級(jí)的Canvas類庫(kù)，MVC封裝，數(shù)據(jù)驅(qū)動(dòng)，提供類Dom事件模型，讓canvas繪圖大不同！

?

12. 日期格式化 & 時(shí)間軸

• Moment.js - 日期處理
• Smart Time Ago - 顯示相對(duì)時(shí)間
• timeline.js

?

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 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts
• Bricklayer

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)?/li>
• 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ì)犧牲圖像的主要部分

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ù)
• 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.7 側(cè)滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一個(gè)用于移動(dòng) Web 應(yīng)用的觸摸滑出式導(dǎo)航菜單

13.8 菜單(Menu)

• SuperFish - 基于jQuery的級(jí)聯(lián)下拉菜單
• Responsive Nav - 響應(yīng)式導(dǎo)航

13.9 滾動(dòng)偵測(cè)(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像進(jìn)度條一樣使用滾動(dòng)條

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.12 全屏滾動(dòng)/全屏切換

• pagePiling.js - 全屏滾動(dòng)效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 專注于移動(dòng)端的fullPage.js
• screenfull.js - 切換全屏模式

13.13 分屏滾動(dòng)

• multiscroll.js - 分屏滾動(dòng)效果

13.14 轉(zhuǎn)場(chǎng)效果

• Animsition - 頁(yè)面切換時(shí)的過(guò)渡效果

13.15 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定頁(yè)面元素
• stickUp
• Slinky.js - 堆疊頭部創(chuàng)建滑動(dòng)導(dǎo)航列表

13.16 觸控事件

• Hammer.js
• jquery.event.move.js

13.17 拖拽組件

• Draggabilly - 專注于拖拽功能的 JS 庫(kù)
• dragula - 一個(gè)讓拖放操作變簡(jiǎn)單的 JS 庫(kù)
• GridList - 可拖拉的響應(yīng)式列表庫(kù)

13.18 隱藏或展示頁(yè)面元素

• Headroom.js - 在不需要頁(yè)頭時(shí)將其隱藏
• Readmore.js - 內(nèi)容顯示與隱藏插件
• oriDomi - 像指一樣折疊Dom元素

13.19 滾動(dòng)條(Scrollbar)

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

13.20 視差滾動(dòng)(Parallax Scrolling)

• parallax.js
• jparallax
• skrollr

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 - 懸停效果
  • Hover.css - 很多鼠標(biāo)Hover態(tài)的效果
  • imagehover.css - 為圖片添加懸停效果
  • iHover - 圖片懸停效果
  • ImageCaptionHoverAnimation
  • Bootstrap Hover Image Gallery
• Multi-touch gestures library - Web手勢(shì)庫(kù)
  • AlloyFinger - 騰訊 AlloyTeam 出品的超級(jí)小的 Web 手勢(shì)庫(kù)

  ?

17. 本地存儲(chǔ)

• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js
• Neurosync - JavaScript 本地離線 ORM 庫(kù)
• LokiJS - 性能優(yōu)先的 JavaScript 內(nèi)存數(shù)據(jù)庫(kù)

?

18. 模板引擎

• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• Hogan.js - JavaScript templating from Twitter.
• Dust.js - Linkedin維護(hù)的項(xiàng)目

?

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ì)話框堆疊效果

?

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ì)話框/遮罩層/彈出層(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ì)話框組件
• DialogEffects
• jQuery blockUI - Page or element overlay
• layer - web彈出窗/層

?

22. 文檔/表格/PDF

• Backgrid.js - 強(qiáng)大的表格組件
• handsontable - 在線可編輯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 -表單美化插件

?

23. 目錄樹(shù)插件

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

?

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ù)

24.2 SSE (Server-Sent Events)

SSE API用于創(chuàng)建到服務(wù)器的單向連接，服務(wù)器通過(guò)這個(gè)連接可以發(fā)送任意數(shù)量的數(shù)據(jù).

• EventSource

24.3 Web Sockets

?

?

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

?

26. 按鈕

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.
• Flipside - 一個(gè)能過(guò)渡到對(duì)話框的按鈕

?

27. 富文本編輯器/Markdown編輯器/Markdown解析器

• Simditor - 簡(jiǎn)單快速的富文本編輯器
• BachEditor - 一個(gè)有情懷的編輯器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 開(kāi)源在線Markdown編輯器
• stackedit
• Redactor Text Editor
• micromarkdown.js - 輕量級(jí)的md解析器
• wangEditor - 支持移動(dòng)端的輕量級(jí)web富文本框
• CKEditor - 可視化 HTML 編輯器

?

28. 內(nèi)容提取(Readability)

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

?

29. 顏色(CSS Colors)/SVG/Canvas

• CSS Colours
• SVGeneration
• SVGMagic - 自動(dòng)的創(chuàng)建PNG來(lái)兼容不支持SVG的瀏覽器
• Adaptive Backgrounds - 從圖片抽取主要顏色和應(yīng)用到父元素
• Seen.js - 渲染3D場(chǎng)景為SVG或者HTML Canvas

?

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)簽、用戶等
• 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)

?

32. 布局(Layout)

• 分隔面板(Split Panel)
  • split-pane
  • jQuery UI Layout

  ?

33. 演示/幻燈片

• reveal.js - The HTML Presentation Framework
• bespoke.js - DIY Presentation Micro-Framework
• impress.js
• shower
• deck.js

?

34. 國(guó)際化(i18n)

• jquery-i18n
• i18next.js
• jsperanto.js
• jed.js
• messageformat.js
• Polyglot.js

?

35. 郵件模板(Email Templates)

• responsive-html-email-template

?

36. 移動(dòng)端優(yōu)化(Optimizing Mobile Performance)

• FastClick - 處理移動(dòng)端 click 事件 300 毫秒延遲
• tappy
• jquery-fast-click

?

37. HTTP請(qǐng)求相關(guān)

• pako - HTTP 請(qǐng)求正文壓縮
  • 參考閱讀: 如何壓縮 HTTP 請(qǐng)求正文
  • HTTP 請(qǐng)求正文壓縮 DEMO
• RSA in JavaScript - 用RSA加密實(shí)現(xiàn)Web數(shù)據(jù)加密傳輸

?

38. 實(shí)用工具/其他插件

• jquery-cookie
• InstantClick - 預(yù)加載用戶可能會(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)建用戶指南
• RulersGuide.js - 類似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)

?

ES6( ECMAScript 2015 )

ES6轉(zhuǎn)碼器(ES6 to ES5)

• Babel?- 一個(gè)廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行
• babelify?- 將babel引入到Gulp, Grunt, npm run等構(gòu)建過(guò)程
• traceur-compiler?- Traceur is a JavaScript.next-to-JavaScript-of-today compiler

?

ES6入門(mén)

• ECMAScript 6入門(mén)?- 阮一峰老師的開(kāi)源的JavaScript語(yǔ)言教程
• Learn ES2015
• ES6 - New features Overview & Comparison
• ES6 Overview in 350 Bullet Points

?

設(shè)計(jì)模式( JavaScript Patterns )

• javascript-patterns
• jquery-patterns - A variety of jQuery plugin patterns
• Learning JavaScript Design Patterns

?

在線工具( Online Tools )

• jsbin - Collaborative JavaScript Debugging App
  • jsbin@Github
• jsfiddle
• jsbeautifier - Online JavaScript beautifier
• resume.github.com

?

前端開(kāi)發(fā)工具

1. 開(kāi)發(fā)工具

• Sublime Text

?

2. 調(diào)試工具

• Fiddler
• Weinre
• Rythem
• csscss - 用于檢查css代碼冗余
• FECS - 基于 Node.js 的前端代碼檢查工具
• JSON Server - 模擬 API

?

3. 瀏覽器擴(kuò)展(Chrome Extensions)

• Postman - REST Client
• Fiddler - Fiddler for Chrome Extension
• WEB前端助手(FeHelper)
• Web Developer
• Chrome Logger
• ColorZilla
• ColorPick Eyedropper
• Code Cola
• 1px
• AlloyDesigner - 前端重構(gòu)開(kāi)發(fā)輔助工具
• Fontface Ninja
• PageSpeed Insights (by Google)
• HTTP Status
• 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 - 在線比對(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
• frontend-dev-bookmarks
• Airbnb 的 JavaScript 編碼規(guī)范
• awesome-javascript
• Front-end-tutorial - 前端涉及的所有知識(shí)體系

轉(zhuǎn)載于:https://www.cnblogs.com/Im-Victor/p/9237254.html

總結(jié)

以上是生活随笔為你收集整理的前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。