前端框架和库汇总

港控/mmm° 2022-05-26 00:49 253阅读 0赞

总是对前端的框架和库傻傻分不清，今天又研究了一番，看到一个图：  
　　![这里写图片描述][70]  
　　我的理解就是框架包含了各种类，然后我的代码可以调用类，框架调用我的代码。类库更底端，它把算法写好，我需要实现一个功能，不需要再去实现算法，只需要调用这个方法，而这个功能是很单一的。框架一般是一个流程，框架里流程已经写好，我只需要调用它提供的接口，传入参数就可以实现这个方法，它是一个骨架，也就是它的功能并不单一。  
　　嗯……其实写了上面这段话后，我发现理解依旧混乱。如果我用人体骨架来比喻框架，而腿骨、头骨这些比喻类库，不知道合不合适？

# 一、UI框架 #

## 1 [jQuery UI][] ##

这是jquery的UI框架，目前我只用过它的ctrl和shift的多选，以及移动图片交换图片顺序等。

## 2 [H-UI][] ##

#### 2.1 功能 ####

重定义浏览器默认样式、响应式栅格系统、响应式隐藏显示  
　　排版、代码显示、表格、表单、按钮、图片、图标、动画  
　　按钮组、导航&翻页、下拉菜单、幻灯片、选项卡、便签与标号、警告、进度条、对话框 弹出层、客服、返回顶部、分享、面板、案例、滚动、搜索、广告、标签、折叠、遮罩条、评论列表、页脚、星星评价、tooltip效果、popover效果、  
　　404页面

#### 2.4 扩展　　 ####

表单：城市三级联动、机票城市选择、微博剩余字数统计输入、仿新浪微博@功能  
　　焦点图：flash焦点图  
　　图片效果：360音乐盒光盘旋转效果、灯泡开关灯效果、仿惊动图片视差效果、新浪旅游图片放大效果、CSS3动画集  
　　进度条：多彩进度条

#### 2.3 第三方插件 ####

jQuery库（v1.9.1）、阿里图标字体库（H-ui定制）、幻灯片组件、表单验证插件、日期插件、表格插件、进度条插件、layer弹出层插件、laypage 翻页插件、html5插件，让低版本IE支持html5元素、解决IE6png透明、Flash插件、检查flash插件、让IE兼容media

## 3 [Web Uploader][] ##

文件上传

## 4 [Layer-Layui][] ##

web弹出层  
　　使用了jQuery库。

## 5 [EasyUI][] ##

英文版为[EasyUI-helps you build your web pages easily][]  
　　使用了jQuery库。

#### 5.1 功能 ####

Menu 菜单、Menubutton 菜单按钮、Splitbutton 分割按钮、Layout 布局、Accordion 折叠面板、Panel 面板、Tabs 标签页/选项卡、Progressbar 进度条、Tooltip 提示框、Searchbox 搜索框、Resizable 可调整尺寸、Pagination 分页、Droppable 可放置、Easyloader 加载器、Draggable 可拖动、Tree 树、Propertygrid 属性网格、Datagrid 数据网格、Messager 消息框、Dialog 对话框、Numberbox 数字框、Datebox 日期框、Datetimebox 日期时间框、Calendar 日历、Spinner 微调器、Numberspinner 数值微调器、Timespinner 时间微调器、Slider 滑块、Window 窗口、Combogrid 组合网格、Combo 组合、Combobox 组合框、Combotree 组合树、Form 表单、Validatebox 验证框、Treegrid 树形网格、Parser 解析器、Linkbutton 链接按钮

#### 5.2 扩展 ####

Portal（制作图表、列表、球形图等）、Portal（制作图表、列表、球形图等）、可编辑的数据网格（Editable DataGrid）、可编辑的树（Editable Tree）、数据网格行过滤（DataGrid Filter Row）、数据网格行拖放（Drag and Drop Rows in DataGrid）、树形网格行拖放（Drag and Drop Rows in TreeGrid）、主题（Themes）、DWR 加载器（DWR Loader）、RTL 支持（RTL support）、Ribbon

## 6 [Layui][] ##

#### 6.1 功能 ####

开发工具：调试预览  
　　布局：栅格、后台布局  
　　基本元素：按钮、表单、导航/面包屑、选项卡、进度条、面板、徽章、时间线、静态表格、动画、辅助元素  
　　组件示例：弹出层、日期与时间选择、即时通讯、数据表格、分页、文件上传、轮播、模板引擎、流加载、工具集、代码修饰器

# 二、库 #

## 1、[jQuery库][jQuery] ##

## 2、[Highcharts 库][Highcharts] ##

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。  
　　Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。  
　　Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，另外两个分别是：  
　　Highstock ：是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。  
　　Highmaps 是一款基于 HTML5 的优秀地图组件。Highmaps 继承了 Highcharts 简单易用的特性，利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。Highmaps 可以单独使用，也可以作为 Highcharts 的一个组件来使用。

## 3、[chart.js 库][chart.js] ##

也是一个图表库。

## 4、[echarts 库][echarts] ##

百度的图表库。

# 三、CSS #

## 1 [nec][] ##

#### 1.1 框架 ####

css reset：重置样式，清除浏览器默认样式，并配置适合设计的基础样式  
　　css function：功能样式，从常用样式方法中抽离，按需使用  
　　css media：媒体查询，为不同的设备和大小配置不同的样式  
　　css animation：常见动画效果的集合，主要用于效果演示和参考，基于css3  
　　html template：包含完整头部信息和主体结构的HTML模板  
　　html email：用于制作邮件内容的HTML模板

#### 1.2 代码库 ####

布局：两列右侧自适应布局、两列左侧自适应布局、两列定宽布局、三列中间自适应布局、三列左侧自适应布局、三列右侧自适应布局  
　　模块：文本型圆角背景导航、多行式面包屑导航、简易文字链接列表、水平文字链接列表、带点文字链接列表、左图右文图文列表、上图下文图文列表、含标题和Tab的模块头部、简易表单、简易数据表格、简易翻页器、单片式幻灯、操作型弹出浮层  
　　元件：通用自定义按钮、通用自定义按钮组合、标题文本、简易单行文本输入框、下拉式菜单、水平进度条、无边图片容器、有边图片容器、多点式幻灯指示器  
　　BUG：IE6定位位置错误、IE67定位元素溢出不动、IE6绝对定位1像素偏差、IE6定位元素消失、IE6中浮动双边距、IE6中浮动3像素空隙、IE67中表单元素偏离、IE67中图片链接无效  
　　技巧：两栏三栏自适应布局、全屏自适应布局、底部自适应文档和窗口、图片居中溢出隐藏、底部对齐列表、前自适应后跟随、四周不留白列表、选框与文本对齐、定制文件上传按钮、表头固定内容滚动的表格、纯CSS3幻灯手风琴效果hover切换、纯CSS3点控式幻灯hover切换  
　　动画：淡入效果、从下淡入效果、从上淡入效果、从左淡入效果、从右淡入效果、淡出效果、向下淡出效果、向上淡出效果、向左淡出效果、向右淡出效果、弹入效果、从下弹入效果、从上弹入效果、从左弹入效果、从右弹入效果、弹出效果、向下弹出效果、向上弹出效果、向左弹出效果、向右弹出效果、转入效果、从左下方转入效果、从左上方转入效果、从右下方转入效果、从右上方转入效果、转出效果、从左下方转出效果、从左上方转出效果、从右下方转出效果、从右上方转出效果、翻转效果、沿横轴翻入效果、沿横轴翻出效果、沿纵轴翻入效果、沿纵轴翻出效果、闪烁效果、弹跳效果、震颤效果、摇摆效果、摇晃效果、震铃效果

## 2 [Hover Effect Ideas][] ##

鼠标放到图片上后出现文字、动画效果等。

[70]: /images/20220526/e0e1884bc69b4f04bcd8e930eea09521.png
[jQuery UI]: http://api.jqueryui.com/
[H-UI]: http://www.h-ui.net/
[Web Uploader]: http://fex.baidu.com/webuploader/
[Layer-Layui]: http://layer.layui.com/
[EasyUI]: http://www.jeasyui.net/
[EasyUI-helps you build your web pages easily]: http://www.jeasyui.com/index.php
[Layui]: http://www.layui.com/
[jQuery]: https://jquery.com/
[Highcharts]: https://www.hcharts.cn/
[chart.js]: http://www.chartjs.org/
[echarts]: http://echarts.baidu.com/index.html
[nec]: http://nec.netease.com/
[Hover Effect Ideas]: https://tympanus.net/Development/HoverEffectIdeas/