前端架構知識體系

0. 前端自動化(Workflow)

• 前端構建工具
  • Yeoman – a set of tools for automating development workflow
  • gulp – The streaming build system
  • grunt – the JavaScript Task Runner
  • F.I.S – 前端集成解決方案
  • webpack
  • NPM
• 前端模塊管理器
  • Bower – A package manager for the web
  • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
• 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
• Flat UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• ONIUI
• Bulma.io

2. JavaScript 框架匯總

• JavaScript 框架
  • react
  • Angular
  • jQuery
  • Backbone.js
  • Backbone.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • Vanilla JS
  • Avalon代碼庫
  • Avalon官網
  • LigerUI
  • Mithril
• 輕量級JavaScript框架
  • Min.js – Super minimal selector and event library
  • skel.js – A lightweight responsive framework
  • Vuejs
• JavaScript 工具庫
  • underscore.js
  • Way.js – 雙向數據綁定庫
  • Keys.js – 應用快捷鍵

3. 前端游戲框架

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

4. ui組件庫

• GMU
• NEC
• NEJ
• Pure CSS Components
• magic-of-css

5. 基礎模版

• HTML5 BOILERPLATE
• Modernizr
• Normalize.css
• Responsive – 響應式布局

6. 排版

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

7. 網格系統

• grid
• Flexbox 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
• formvalidator.js
• Fort.js – 表單填寫進度提示

10.2 < select > 相關

• Chosen
• Select2
• bootstrap-select
• jquery.multi-select

10.3 單選框/復選框相關

• iCheck – 增強復選框和單選按鈕

10.4 上傳組件

• jQuery File Upload Plugin
• 百度 Web Uploader
• Uploadify
• Plupload
• arale-upload – 輕量級 iframe and html5 file uploader
• Dropzone.js – drag’n’drop library拖拽上傳
• flow.js

10.5 日期選擇

• Both Date and Time picker widget based on twitter bootstrap
• GMU 日歷組件
• Mobiscroll

10.6 取色

• Colorpicker plugin for Twitter Bootstrap

10.7 標簽插件(Tag)

• TaggingJS – 可以靈活定制的 jQuery 標簽系統插件

10.8 自動完成插件

• At.js – 一個Twitter/微博樣式的@自動完成插件
• jquery-textcomplete – 智能搜索提示框/自動補全

10.9 樣式修正

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

10.10

• jQueryForm

11. 圖表繪制

• 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

12. 日期格式化

• Moment.js
• Smart Time Ago – 顯示相對時間

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
• OwlCarousel – create beautiful responsive carousel slider
• jquery-mousewheel – jQuery鼠標滾輪滾動偵測插件

13.2 瀑布流

• Masonry
• Isotope – Filter & sort magical layouts

13.3 圖片懶加載/加載監聽

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• lazyload.js
• waitForImages – 圖片加載監聽庫

13.4 圖片輪播/展示

• FlexSlider
• unslider – 小而美的輪播庫
• prettyPhoto

13.5 圖片剪裁/處理

• croppic – an image cropping jquery plugin
• jQuery.eraser – 圖像擦除插件

13.6 進度條

• NProgress.js
• progress.js
• Pace – Automatic page load progress bar
• jquery-ajax-progress

13.7 側滑插件(offcancas)

• pushy – a responsive off-canvas navigation menu

13.8 菜單(Menu)

• SuperFish – 基于jQuery的級聯下拉菜單
• Responsive Nav – 響應式導航

13.9 滾動偵測(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints

13.10 滾動加載更多

• jScroll

13.11 平滑滾動插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo – 平滑滾動到頁面指定位置

13.12 全屏滾動

• pagePiling.js – 全屏滾動效果

13.13 分屏滾動

• multiscroll.js – 分屏滾動效果

13.14 轉場效果

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

13.15 固定元素(Sticky)

• sticky – jQuery Plugin for Sticky Objects
• jquery.pin – 固定頁面元素

13.16 觸控事件

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

13.17 拖拽組件

• Draggabilly – 專注于拖拽功能的 JS 庫

13.18 隱藏或展示頁面元素

• Headroom.js – 在不需要頁頭時將其隱藏
• Readmore.js – 內容顯示與隱藏插件

13.19 滾動條

• jScrollPane

13.20 視差滾動(Parallax Scrolling)

• parallax.js
• jparallax

13.21 分頁

• jQuery Pagination plugin

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

16. 動畫

• animate.css – A cross-browser library of CSS animations.
• Transit – CSS transitions and transformations for jQuery
• 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
• Hover.css
• css-loaders
• SpinKit

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
• JavaScript Templates

19. 通知組件/彈框組件

• alertify.js
• AlertifyJS
• SweetAlert
• Messenger – 非常酷的彈框組件
• PNotify
• Notify.js – A simple, versatile notification library

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

22. 文檔/表格

• handsontable – 在線可編輯excel表格
• jQuery Bootgrid – 用于ajax生成動態表格
• DataTables – Table plug-in for jQuery

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. 音頻/視頻

• 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

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 – 一個有情懷的編輯器
• bootstrap-markdown
• marked – markdown解析器
• CKEditer
• tinyMCE

28. 內容提取(Readability)

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

29. 顏色(CSS Colors)/SVG

• CSS Colours
• SVGeneration

30. 實用工具/其他插件

• jquery-cookie
• FastClick – 處理移動端 click 事件 300 毫秒延遲
• screenfull.js – 全屏切換
• Async.js – 異步操作
• html2canvas – 實現純JS網頁截圖
• jquery.qrcode.js – 生成二維碼的 jQuery 插件
• FocusPoint.js 實現圖片的響應式裁剪
• DD_belatedPNG.js – 讓IE6支持透明PNG圖片
• nakedpassword – 用脫衣女幫助檢測密碼強度

?

31. 實用工具/其他插件

• Git

?

30. 思維導圖

• XMind

?

?