首页 > 代码库 > 前端常用框架知识点收集
前端常用框架知识点收集
前端组件库
搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow)
-
前端构建工具
-
Yeoman – a set of tools for automating development workflow
-
gulp – The streaming build system
-
grunt – the JavaScript Task Runner
-
F.I.S – 前端集成解决方案
-
前端模块管理器
-
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
-
Pure CSS
-
topcoat
-
UIkit
-
Material UI
-
Framework7
-
mui
-
ionic framework
-
Fries
-
jQuery Mobile
2. JavaScript 框架汇总
-
JavaScript 框架
-
react
-
Angular
-
jQuery
-
Backbone.js
-
Ractive.js
-
KISSY
-
Zepto.js
-
Vanilla JS
-
Avalon
-
轻量级JavaScript框架
-
Min.js – Super minimal selector and event library
-
skel.js – A lightweight responsive framework
-
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
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 – 使文本框自动适应所输入的内容
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
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.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
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解析器
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 – 用脱衣女帮助检测密码强度
-
PDF.js – 一个 JavaScript 编写的 PDF 阅读器
前端参考集
-
frontend-guidelines – Some HTML, CSS and JS best practices.
-
Codrops – Useful resources
-
Front-end Code Standards & Best Practices
-
frontend-dev-bookmarks
?来源: https://www.janecc.com/he-sets-the-front-end-component-library-the-essential-collection.html
前端常用框架知识点收集