0. 前端自動化(Workflow)

?

• 前端構建工具
• • 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 - 一個Google 提供的幫助開發者快速設置項目的工具集
• 前端模塊管理器
• • Bower - A package manager for the web
• • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • LABjs - 文件加載器
  • css-modulesify - CSS模塊加載器
• css預處理器
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS
• 前端性能分析工具
  • analyze-css - CSS 選擇器的復雜度和性能分析器

  ?

1. 前端框架(Frameworks)

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

?

2. JavaScript 框架匯總

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

  ?

3. 前端游戲框架

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

?

4. ui組件庫(CSS Framework)

• WeUI - 微信官方UI庫
  • jQuery WeUI - WeUI的jQuery版本
• GMU - 基于zepto的ui組件庫，適用于移動端
• FrozenUI - 騰訊移動端組件庫
• 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 - 輕量、響應式的現代 CSS 框架

?

5. 基礎模版

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

  ?

6. 排版

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

?

7. 網格系統

• 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 - 前端路由庫(通過#符號進行路徑組織,結合vue的component可進行單頁的局部模塊刷新)
• URI.js
• Roadcrew.js
• SpeakingURL
• uparams - An URL params parser
• StateMan - 一個處理深層次單頁系統的路由庫

?

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
• validator.js

10.2 < input > 相關

• cleave.js - 格式化你的輸入內容

10.3 < select > 相關

• Chosen
• Select2
• bootstrap-select

10.4 單選框/復選框相關

• iCheck - 增強復選框和單選按鈕
• Switchery - iOS 7 style switches for your checkboxes

10.5 上傳組件

• jQuery File Upload Plugin
• 百度 Web Uploader
• uploadify
• Plupload
• Fine Uploader
• arale-upload - 輕量級 iframe and html5 file uploader
• Dropzone.js - 文件上傳庫(可獲取文件mime, 文件大小等; 針對圖片可生成縮略圖,獲取圖片寬度,高度)
• flow.js
• localResizeIMG - 前端本地客戶端壓縮圖片，兼容IOS，Android，PC
• simple-uploader

10.6 日期選擇

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

10.7 取色

• Colorpicker plugin for Twitter Bootstrap

10.8 標簽插件(Tag)

• TaggingJS – 可以靈活定制的 jQuery 標簽系統插件
• selectize.js
• Bootstrap Tags Input
• jQuery-Tags-Input

10.9 自動完成插件

?

• At.js - 一個Twitter/微博樣式的@自動完成插件
• jquery-textcomplete - 智能搜索提示框/自動補全
• typeahead.js - a fast and fully-featured autocomplete library

10.10 樣式修正

• autosize - 使文本框自動適應所輸入的內容

?

11. 圖表繪制/圖形庫(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 - 一個功能強大的JavaScript圖形庫
• epoch - 數據圖表可視化
• Vis.js
• Coutour.js
• zrender - 一個輕量級的Canvas類庫，MVC封裝，數據驅動，提供類Dom事件模型，讓canvas繪圖大不同！

?

12. 日期格式化 & 時間軸

• Moment.js - 日期處理
• Smart Time Ago - 顯示相對時間
• timeline.js

?

13. 頁面交互

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 - 移動端滑動組件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠標滾輪滾動偵測插件
• Glide.js - 輕量級滑塊組件
• PhotoSwipe
• TouchSlide - 觸屏滑動特效(焦點圖,Tab切換)

13.2 瀑布流

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

13.3 懶加載/加載監聽/預加載

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• layzr.js - 一個小巧快速的圖片懶加載庫
• waitForImages - 圖片加載監聽庫
• PxLoader - JS預加載庫:實現圖片、聲音等各種文件的預加載功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止輸入時調用

13.4 圖片輪播(幻燈片)/圖片展示

• 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 - 全景視圖
• Intense Images - 全屏查看圖片
• Picturefill - 一個響應式圖片 JS 插件
• zoom.js - 一個 jQuery 圖片放大插件
• watermarkjs - 一個在瀏覽器中添加圖片水印的 JS 庫
• responsive-images.js
• Turntable.js - 輕易實現圖像的3D旋轉
• ResponsifyJS - 讓圖像完全響應式而不會犧牲圖像的主要部分

13.5 圖片剪裁/圖片處理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• smartcrop.js - 智能圖片裁剪庫
• jQuery.eraser - 圖像擦除插件
• DD_belatedPNG.js - 讓IE6支持透明PNG圖片
• FocusPoint.js 實現圖片的響應式裁剪
• imgareaselect
• CSSgram - CSS 實現的 Instagram 濾鏡庫
• antimoderate - 圖片模糊庫

13.6 進度條/加載動畫(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 - 一個為性能優化的實現加載動畫效果的 CSS 框架
• css-loaders
• Sausage - 跟蹤滾動條并記錄當前閱讀所處節點

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 - 像進度條一樣使用滾動條

13.10 滾動加載更多/下拉刷新(Pull to Refresh)

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

13.11 平滑滾動插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滾動到頁面指定位置
• smooth-scroll
• scrollUp
• elevator.js - 一個模擬電梯運行“返回頂部”的 JS 插件

13.12 全屏滾動/全屏切換

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

13.13 分屏滾動

• multiscroll.js - 分屏滾動效果

13.14 轉場效果

• Animsition - 頁面切換時的過渡效果

13.15 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定頁面元素
• stickUp
• Slinky.js - 堆疊頭部創建滑動導航列表

13.16 觸控事件

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

13.17 拖拽組件

• Draggabilly - 專注于拖拽功能的 JS 庫
• dragula - 一個讓拖放操作變簡單的 JS 庫
• GridList - 可拖拉的響應式列表庫

13.18 隱藏或展示頁面元素

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

13.19 滾動條(Scrollbar)

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

13.20 視差滾動(Parallax Scrolling)

• parallax.js
• jparallax
• skrollr

13.21 縮放 (Zooming)

• zoom.js - 一款效果很獨特的頁面內容縮放插件
• zoom.js - 一個 jQuery 圖片放大插件
• jQuery Zoom - mouseover時圖片縮放效果

?

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)

• animate.css - A cross-browser library of CSS animations.
• Transit - CSS transitions and transformations for jQuery
• anime.js - Javascript 動畫引擎
• WOW - 在滾動過程中展示CSS動畫效果(默認觸發animate.css動畫)
• AniJS - A Library to Raise your Web Design without Coding
• Move.js - 簡化CSS3動畫的JS庫
• ScrollMe – 在網頁中加入各種滾動動畫效果
• Effeckt.css - A Performant Transitions and Animations Library
• NEC動畫庫
• csshake - CSS classes to move your DOM
• magic - CSS3 Animations with special effects
• SpinKit
• Velocity.js - 加速JavaScript動畫
• lenticular.js - 響應傾斜或鼠標事件創建圖片動畫
• jQuery Interactive 3D - Create a 3D interactive object using images
• AnimateScroll - A Simple jQuery Plugin for Animating Scroll
• Blast.js - 把動畫和樣式注入到文本中
• Bounce.js - 一個用于制作漂亮 CSS3 關鍵幀動畫的 JS 庫
• Sticker.js - create a Sticker Effect
• scrollReveal.js - 元素進入可視區域自動觸發設置好的動畫
• stroll.js - CSS3 list scroll effects
• jQuery Easing - 動畫效果擴展
• animations - CSS3 ANIMATION CHEAT SHEET
• iconate.js：將 icons 增加動畫效果的 JS 庫
• Odometer - 數字之間的垂直切換
• Hover - 懸停效果
  • Hover.css - 很多鼠標Hover態的效果
  • imagehover.css - 為圖片添加懸停效果
  • iHover - 圖片懸停效果
  • ImageCaptionHoverAnimation
  • Bootstrap Hover Image Gallery
• Multi-touch gestures library - Web手勢庫
  • AlloyFinger - 騰訊 AlloyTeam 出品的超級小的 Web 手勢庫

  ?

17. 本地存儲

• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js
• Neurosync - JavaScript 本地離線 ORM 庫
• LokiJS - 性能優先的 JavaScript 內存數據庫

?

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維護的項目

?

19. 通知組件/彈框組件/模態窗口

• Notify.js(Web Notifications API)
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的彈框組件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模態窗口插件
• action.js - 極簡的tip和Modal彈窗效果
• Modaal - 一個創建彈出窗口的jQuery插件
• Vex - 可以實現3D動效的彈出對話框堆疊效果

?

20. 提示控件(Tooltips)

• hint.css - 一款非常小巧的提示框效果
• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 氣泡形狀的提示（Tooltip）控件
• Ouibounce - 離站提示控件
• intro.js - 一個創建引導式網站介紹功能的 JS 庫
• data-tip.css - 純 CSS 實現的工具提示

?

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
• layer - web彈出窗/層

?

22. 文檔/表格/PDF

• Backgrid.js - 強大的表格組件
• handsontable - 在線可編輯excel表格
• jQuery Bootgrid - 用于ajax生成動態表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一個 JavaScript 編寫的 PDF 閱讀器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 靈活操作和展示數據
• Dynatable - 交互式表格插件
• fattable - 創建無限滾動無限行列數的表格
• Clusterize.js - 一個輕松顯示大數據集的 JS 插件
• Uniform -表單美化插件

?

23. 目錄樹插件

• 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庫

24.2 SSE (Server-Sent Events)

SSE API用于創建到服務器的單向連接，服務器通過這個連接可以發送任意數量的數據.

• EventSource

24.3 Web Sockets

?

?

25. 音頻/視頻

• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 開源的 HTML5 視頻播放器
• Clappr - 開源的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 - 一個能過渡到對話框的按鈕

?

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

• Simditor - 簡單快速的富文本編輯器
• BachEditor - 一個有情懷的編輯器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 開源在線Markdown編輯器
• stackedit
• Redactor Text Editor
• micromarkdown.js - 輕量級的md解析器
• wangEditor - 支持移動端的輕量級web富文本框
• CKEditor - 可視化 HTML 編輯器

?

28. 內容提取(Readability)

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

?

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

• CSS Colours
• SVGeneration
• SVGMagic - 自動的創建PNG來兼容不支持SVG的瀏覽器
• Adaptive Backgrounds - 從圖片抽取主要顏色和應用到父元素
• Seen.js - 渲染3D場景為SVG或者HTML Canvas

?

30. 選項卡(Tabs)

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

?

31. 文本處理

• ZeroClipboard - 文本復制插件
• clipboard.js
• Bigfoot - 點擊文章中的腳注彈窗顯示
• Annotator - 文本注解插件，可以包括注釋、標簽、用戶等
• Succinct - 用作截斷多行文本,后面添加省略號
• Flowtype.js - 自動調整字體大小和行號
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• shine.js - 實現漂亮陰影
• Type Rendering Mix - 文本渲染引擎
• jquery-expander -
• Typed.js - 輸入模擬插件
• jQuery.dotdotdot - 多行文本溢出顯示省略號

?

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. 國際化(i18n)

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

?

35. 郵件模板(Email Templates)

• responsive-html-email-template

?

36. 移動端優化(Optimizing Mobile Performance)

• FastClick - 處理移動端 click 事件 300 毫秒延遲
• tappy
• jquery-fast-click

?

37. HTTP請求相關

• pako - HTTP 請求正文壓縮
  • 參考閱讀: 如何壓縮 HTTP 請求正文
  • HTTP 請求正文壓縮 DEMO
• RSA in JavaScript - 用RSA加密實現Web數據加密傳輸

?

38. 實用工具/其他插件

• jquery-cookie
• InstantClick - 預加載用戶可能會點擊的一些鏈接
• Async.js - 異步操作
• html2canvas - 實現純JS網頁截圖
• jquery.qrcode.js - 生成二維碼的 jQuery 插件
• qrcodejs - JS生成QRCode的庫
• nakedpassword - 用脫衣女幫助檢測密碼強度
• KityMinder - 腦圖編輯工具
• MixitUp - 動畫過濾和排序
• JQuery Tip Cards - 創建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject
• prettyprint.js - An in-browser JavaScript variable dumper
• Shepherd - 為應用創建用戶指南
• RulersGuide.js - 類似PhotoShop標尺的js庫
• Gremlins.js - Monkey 測試庫
• RoughDraft.js - 簡單快速的創建交互式的 HTML 模型的原型工具
• favico.js - 動態改變瀏覽器標簽欄中的網站圖標

?

ES6( ECMAScript 2015 )

ES6轉碼器(ES6 to ES5)

• Babel?- 一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行
• babelify?- 將babel引入到Gulp, Grunt, npm run等構建過程
• traceur-compiler?- Traceur is a JavaScript.next-to-JavaScript-of-today compiler

?

ES6入門

• ECMAScript 6入門?- 阮一峰老師的開源的JavaScript語言教程
• Learn ES2015
• ES6 - New features Overview & Comparison
• ES6 Overview in 350 Bullet Points

?

設計模式( 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

?

前端開發工具

1. 開發工具

• Sublime Text

?

2. 調試工具

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

?

3. 瀏覽器擴展(Chrome Extensions)

• Postman - REST Client
• Fiddler - Fiddler for Chrome Extension
• WEB前端助手(FeHelper)
• Web Developer
• Chrome Logger
• ColorZilla
• ColorPick Eyedropper
• Code Cola
• 1px
• AlloyDesigner - 前端重構開發輔助工具
• 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 - 可以自動格式化混淆的js文件
• JavaScript Errors Notifier
• CSS Diff - 在線比對頁面上兩個元素的CSS樣式差異
• WhatFont- 識別網頁所使用的字體

?

前端參考集

• 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 編碼規范
• awesome-javascript
• Front-end-tutorial - 前端涉及的所有知識體系

轉載于:https://www.cnblogs.com/Im-Victor/p/9237254.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。