前端架构知识体系

0. 前端自动化(Workflow)

前端构建工具 Yeoman – a set of tools for automating development workflowgulp – The streaming build systemgrunt – the JavaScript Task RunnerF.I.S – 前端集成解决方案webpackNPM前端模块管理器 Bower – A package manager for the webBrowserifyComponentDuoRequireJSSea.jscss预处理器 Less – Less is More , Than CSSSass – Syntactically Awesome Style SheetsStylus – Expressive, dynamic, robust CSS

1. 前端框架(Frameworks)

BootstrapFoundationAmaze UISemantic UIFlat UIPure CSStopcoatUIkitMaterial UIFramework7muiionic frameworkFriesjQuery MobileONIUIBulma.io

2. JavaScript 框架汇总

JavaScript 框架 reactAngularjQueryBackbone.jsBackbone.jsRactive.jsKISSYZepto.jsVanilla JSAvalon代码库Avalon官网LigerUIMithril轻量级JavaScript框架 Min.js – Super minimal selector and event libraryskel.js – A lightweight responsive frameworkVuejsJavaScript 工具库 underscore.jsWay.js – 双向数据绑定库Keys.js – 应用快捷键

3. 前端游戏框架

cocos2d-html5Egret EngineLimeJSEaselJSthree.jsAlloyStickThe-Best-JS-Game-FrameworkCanvasEngineQuintus

4. ui组件库

GMUNECNEJPure CSS Componentsmagic-of-css

5. 基础模版

HTML5 BOILERPLATEModernizrNormalize.cssResponsive – 响应式布局

6. 排版

yue.csstypo.csschinese-copywriting-guidelines – 中文文案排版指南

7. 网格系统

gridFlexbox Grid

8. HTML5 API 应用

History.js – gracefully supports the HTML5 History/State APIsjquery-pjax – pushState+ajaxjquery-address – Deep LinkingNotify.js(Web Notifications API)

9. UA 识别

detector

10. 表单处理

10.1 表单验证(Form Validator)

ValidatorParsleyjquery.form.js – jQuery Form PluginValidformvalidator.jsformvalidator.jsFort.js – 表单填写进度提示

10.2 < select > 相关

ChosenSelect2bootstrap-selectjquery.multi-select

10.3 单选框/复选框相关

iCheck – 增强复选框和单选按钮

10.4 上传组件

jQuery File Upload Plugin百度 Web UploaderUploadifyPluploadarale-upload – 轻量级 iframe and html5 file uploaderDropzone.js – drag’n’drop library拖拽上传flow.js

10.5 日期选择

Both Date and Time picker widget based on twitter bootstrapGMU 日历组件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. 图表绘制

HighchartsChart.js – Simple HTML5 Charts using Canvas百度 EChartsChartist.jsD3.js – A JavaScript visualization library for HTML and SVG. intro-to-d3 – a D3.js tutorial

12. 日期格式化

Moment.jsSmart Time Ago – 显示相对时间

13. 页面交互

13.1 Slider

slick – the last carousel you’ll ever needSwipe – the most accurate touch sliderSwiper – Most modern mobile touch slideriscroll – Smooth scrolling for the webOwlCarousel – create beautiful responsive carousel sliderjquery-mousewheel – jQuery鼠标滚轮滚动侦测插件

13.2 瀑布流

MasonryIsotope – Filter & sort magical layouts

13.3 图片懒加载/加载监听

imagesLoadedEcho.jslazySizesjquery_lazyloadlazyload.jswaitForImages – 图片加载监听库

13.4 图片轮播/展示

FlexSliderunslider – 小而美的轮播库prettyPhoto

13.5 图片剪裁/处理

croppic – an image cropping jquery pluginjQuery.eraser – 图像擦除插件

13.6 进度条

NProgress.jsprogress.jsPace – Automatic page load progress barjquery-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-scrolljquery.scrollTo – 平滑滚动到页面指定位置

13.12 全屏滚动

pagePiling.js – 全屏滚动效果

13.13 分屏滚动

multiscroll.js – 分屏滚动效果

13.14 转场效果

Animsition – 页面切换时的过渡效果

13.15 固定元素(Sticky)

sticky – jQuery Plugin for Sticky Objectsjquery.pin – 固定页面元素

13.16 触控事件

Hammer.jsjquery.event.move.js

13.17 拖拽组件

Draggabilly – 专注于拖拽功能的 JS 库

13.18 隐藏或展示页面元素

Headroom.js – 在不需要页头时将其隐藏Readmore.js – 内容显示与隐藏插件

13.19 滚动条

jScrollPane

13.20 视差滚动(Parallax Scrolling)

parallax.jsjparallax

13.21 分页

jQuery Pagination plugin

14. 代码高亮插件/代码编辑器

google-code-prettifyhighlight.jsRainbowACECodeMirrorCrayon Syntax Highlighterprism – Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件

Font AwesomeGlyphter: The SVG Font MachinePerfect IconsiconizrCikonss – 纯CSS实现的响应式IconSimple Iconsiconfont

16. 动画

animate.css – A cross-browser library of CSS animations.Transit – CSS transitions and transformations for jQueryMove.js – 简化CSS3动画的JS库ScrollMe – 在网页中加入各种滚动动画效果Effeckt.css – A Performant Transitions and Animations LibraryNEC动画库csshake – CSS classes to move your DOMmagic – CSS3 Animations with special effectsHover.csscss-loadersSpinKit

17. 本地存储

cross-storage – Cross domain local storagelocalForagepouchdbbasil.js

18. 模板引擎

mustache.jsHandlebars.jsartTemplatebaiduTemplateJSRenderEJS – JavaScript TemplatesJuicer – A Light Javascript Templete Engine.Tempojson2htmlJavaScript Templates

19. 通知组件/弹框组件

alertify.jsAlertifyJSSweetAlertMessenger – 非常酷的弹框组件PNotifyNotify.js – A simple, versatile notification library

20. 提示控件(Tooltips)

qTip2 – Pretty powerful tooltipstooltip – CSS Tooltipstooltipster – A jQuery tooltip plugingrumble.js – 气泡形状的提示（Tooltip）控件Ouibounce – 离站提示控件

21. 对话框/弹出层(lightbox)

fancyBox – Fancy jQuery lightboxjquery-lightbox – The popular lightbox script, ported to jQueryColorbox – a jQuery lightboxartDialog – 经典的网页对话框组件DialogEffects

22. 文档/表格

handsontable – 在线可编辑excel表格jQuery Bootgrid – 用于ajax生成动态表格DataTables – Table plug-in for jQuery

23. 目录树插件

zTree_v3 – jQuery Tree Pluginjstree – jQuery Tree Pluginfancytree – Tree plugin for jQuery

24. Ajax模块

fetch – A window.fetch JavaScript polyfillreqwest – browser asynchronous http requestsminAjax.js

25. 音频/视频

jPlayer – HTML5 Audio & Video for jQueryvideo.js – HTML5 & Flash video playerAccessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器Clappr – 开源的Web视频播放器Plyr – A simple HTML5 media playerFitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.BigVideo.js – The jQuery Plugin for Big Background VideoBigScreen – A simple library for using the JavaScript Full Screen APIVide – 视频背景winamp2-js

26. 按钮

Buttons – A CSS button libraryButtonComponentMorphProgressButtonStylesCreativeButtonsCSS3 buttonsjquery.onoff – Interactive, accessible toggle switches for the web.

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

Simditor – 简单快速的富文本编辑器BachEditor – 一个有情怀的编辑器bootstrap-markdownmarked – markdown解析器CKEditertinyMCE

28. 内容提取(Readability)

Readabilityjson.human.js – Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG

CSS ColoursSVGeneration

30. 实用工具/其他插件

jquery-cookieFastClick – 处理移动端 click 事件 300 毫秒延迟screenfull.js – 全屏切换Async.js – 异步操作html2canvas – 实现纯JS网页截图jquery.qrcode.js – 生成二维码的 jQuery 插件FocusPoint.js 实现图片的响应式裁剪DD_belatedPNG.js – 让IE6支持透明PNG图片nakedpassword – 用脱衣女帮助检测密码强度

 

31. 实用工具/其他插件

Git

 

30. 思维导图

XMind

转载于:https://www.cnblogs.com/wangxiaoduan/p/6760690.html

相关资源：Web前端知识框架思维导图（系统学习你需要用到它，少走弯路）