前端常用框架总结

目隐中人
491 阅读3分钟

本文已参与[新人创作礼]活动，一起开启掘金创作之路。

Bootstrap（前端UI框架）

  • 是一个响应式的、移动设备优先的、不固定的网格系统

  • 一个为移动设备而开发的CSS框架，由规范的CSS和JS插件构成，能够实现响应式布局

  • bootstrap不适合做固定宽高的网页--固定宽高与bootstrap响应式布局的理念冲突

适用场景：移动端开发适用

Ant Design(前端UI框架)

  • 分别基于react、vue、angular框架，各自开发了一套 Ant Design 的UI框架
  • Ant Design 提供了一套非常完整的 组件化设计规范 与 组件化编码规范，大幅提高了部分产品的设计研发效率及质量
  • 框架提供的 api 十分详尽，上手和使用相对简单

使用场景：基于react、vue、angular的开发都能运用

Element UI （前端UI框架）

  • 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  • 手机端对应的框架是Mint UI
  • 常用业务组件全面，功能丰富，有英文文档，生态齐全，支持 SSR

适用场景：基于Vue的开发适用

UI框架总结：

  • UI框架节省了开发时间以及成本，不同的框架拥有不同的特点，可以根据实际开发情况按需使用。
  • UI框架使得开发人员关注点能更好的专注于业务逻辑以及交互效果

JQuery

  • 一个JavaScript的函数库
  • 是一个封装过的，使用更轻量级的JavaScript库
  • 是当今最流行的JS框架
  • 简化了Ajax请求
  • 兼容性大多数浏览器，减少了开发成本。例如：E 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome
  • 拥有与CSS语法相似的选择器，操作DOM方便

适用场景：浏览器兼容性要求高、DOM操作复杂的项目

ECharts

  • 是一个使用 JavaScript 实现的开源可视化库
  • 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备

使用场景：需要数据统计以及图表服务的项目

Vue

  • 是一套用于构建用户界面的渐进式框架
  • 运行性能强大，组件的依赖是在渲染过程中自动追踪的
  • 国人开发，学习成本低，易理解。
  • 运用了数据驱动以及组件化思想
  • 运用了MVVM框架，实现了View与model的分离，使得开发人员分工明确
  • 运用虚拟DOM，优化diff算法，最大限度地减少了DOM操作

使用场景：

  1. 采用数据驱动的场景，不以DOM操作为主的场景
  2. 适合 webapp，适合做用户交互多、各种动态效果变化丰富的应用。特别是PC、手机的网页版 商城等页面
  3. 希望搭建快速的应用。Vue中是双向数据绑定的，无需手动改值
  4. 希望用模板搭建应用。因为Vue.js 使用了基于 HTML 的模板语法
  5. 希望应用运行速度快或是尽快能的小。渲染速度高于React,大小小于React

React

  • 用于构建用户界面的JavaScript框架
  • 运用函数式编程声明组件
  • 运用虚拟DOM，优化diff算法，最大限度地减少了DOM操作
  • 组件化细致，可根据功能划分组件，也可以将UI抽离出来
  • 在国际上使用广泛
  • 具有类似技术的React Native方便进行移动端

使用场景：

  1. 构建大型项目时。因为React有更强的测试性，以及可维护性
  2. 同时构建Web端和App时。因为React Native与React.js大体相同。
  3. 创建一个更受欢迎的项目。React较于Vue在国际上使用更广泛。
  4. 适合 oa系统，适合 大批量的数据展示、适合做大型应用。特别适合公司的后台操作系统
avatar
文章
阅读
粉丝