Javaweb重要知识点总结（六）常见的前端框架

1. EasyUI

2. MiniUI

3. jQueryUI

4. Vue.js

5. AngularJS

6. AngularJS

1. EasyUI

EasyUI 是一种基于 jQuery 的用户界面插件集合。easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。优势：开源免费，页面也还说的过去。

2. MiniUI

基于 jquery 的框架，开发的界面功能都很丰富。jQuery MiniUI - 快速开发 WebUI。它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。使用 MiniUI，开发者可以快速创建 Ajax 无刷新、 B/S 快速录入数据、 CRUD、 Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型 WEB 应用系统界面。缺点：收费，没有源码，基于这个开发如果想对功能做扩展就需要找他们的团队进行升级！

提供以下几大类控件：

表格控件树形控件

布局控件：标题面板、弹出面板、折叠分割器、布局器、表单布局器等导航控件：分页导航器、导航菜单、选项卡、菜单、工具栏等。

表单控件：多选输入框、弹出选择框、文本输入框、数字输入框、日期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、文件上传控件、多选框、列表框、多选框组、单选框组、按钮等

富文本编辑器

图表控件：柱状图、饼图、线形图、双轴图等。

技术亮点：

快速开发：使用 Html 配置界面，减少 80%界面代码量。易学易用：简单的 API 设计，可以独立、组合使用控件。

性能优化：内置数据懒加载、低内存开销、快速界面布局等机制。丰富控件：包含表格、树、数据验证、布局导航等超过 50 个控件。

超强表格：提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel 导出等功能。

第三方兼容：与 ExtJS、jQuery、YUI、Dojo 等任意第三方控件无缝集成。浏览器兼容：支持 IE6+、FireFox、Chrome 等。

跨平台支持：支持 Java、.NET、PHP 等。

3. jQueryUI

jQuery UI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs（如本站首页右上角部分）、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

技术亮点：

简单易用：继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。

开源免费：采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求。

广泛兼容：兼容各主流桌面浏览器。包括 IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。轻便快捷：组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。

标准先进：支持 WAI-ARIA，通过标准 XHTML 代码提供渐进增强，保证低端环境可访问性。

美观多变：提供近 20 种预设主题，并可自定义多达 60 项可配置样式规则，提供 24 种背景纹理选择。度娘上搜 jQueryUI 的 api，其用法与 easyUI、MiniUI 都大同小异，此处将不再举例。

4. Vue.js

参考原文：介绍 — Vue.js

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

5. AngularJS

参考原文：AngularJS中文手册

AngularJS 是 google 开发者设计的一个前端开发框架，它是由是由 JavaScript 编写的一个 JS 框架。通常它是用来在静态网页构建动态应用不足而设计的。

AngularJS

特点如下：

1、数据绑定： AngularJS 是数据双向绑定。

2、 MVVM（Model-View-ViewModel）模式： Model 简单数据对象，View 视图（如 HTML,JSP 等）， ViewModel 是用来提供数据和方法，和 View 进行交互。这种设计模式使得代码解耦合。

3、依赖注入：AngularJS 支持注入方式把需要的对象，方法等注入到指定的对象中。

4、指令： AngularJS 内部自带各种常用指令，同时也支持开发者自定义指令。

5、HTML 模板和扩展 HTML： AngularJS 可以定义与 HTML 兼容的自定义模板。AngularJS 的 Api：

AngularJS 提供了很多功能丰富的组件，处理核心的 ng 组件外，还扩展了很多常用的功能组件，如ngRoute(路由)，ngAnimate(动画)，ngTouch(移动端操作)等，只需要引入相应的头文件，并依赖注入你的工作模块，则可使用。

ng (core module)：AngularJS 的默认模块，包含 AngularJS 的所有核心组件。

6. AngularJS

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件

2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。