首页 > 代码库 > 前端常用框架知识点收集

前端常用框架知识点收集

前端组件库

搭建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

前端常用框架知识点收集