前端四个框架的分析与对比

3.0 闻远设计 2023-05-21 190 4 18.55KB 3 页免费

侵权投诉

前端四个框架的分析与对比

摘要：框架是一套完整的解决方案，是一个项目的骨架，使用框架可以提高项目开发效率，其

中最鲜明的特点是写得少，做得多。web 前端和后台编程都有不少框架，如果把一个项目比作

一辆车，前端框架就是车身，完成大部分的构建；插件就是一些小配饰，完成部分功能；CSS

就是车的内饰和车的颜色，后期还可以修改；后台框架就是发动机，将所有零件连接好就可以

运行。同一个车身可以使用不同发动机，也就是同样的效果可以使用不同的技术实现；一般车

身和发动机都是不换的，也就是做项目前一定要先确定好到底用什么框架，不然更换起来特别

麻烦。目前前端主流的框架有 Bootstrap、Foundation、Angular.js、Vue.js 等，本论文将主要对

这四个框架进行简单的分析与对比。

　　关键词：前端；框架； Bootstrap; Angular; Vue;

　　 0　引言

项目开发一般会使用到框架，框架可以重复使用，运行速度快，提高项目开发效率，减少不必

要的 DOM 操作，兼容性问题好，还可以花更多时间关注业务逻辑以前一般使用 MVC 模式开

发项目，数据模型不变，视图包含业务逻辑，业务逻辑无法重用，控制器的压力特别大。现在

前端的框架大多都是 MVVM 模式，可以大大减轻控制器的压力，还真正地实现了页面与数据

逻辑分离，业务逻辑可重复使用。前端框架不仅有 CSS 框架还有 JS 框架，下面将简单分析对

比Bootstrap、Foundation、Angular.js、Vue.js 这四个框架。

　　 1　前端 C　S　S 框架

1.1 Bootstrap 框架

Bootstrap 框架是 2011 年发布的一款基于 HTML、CSS、Java Script 开发的开源前端 CSS 框架，

支持组件与组件定制，可以用于快速构建响应式布局、移动设备优先的 web 项目。现在很多公

司开发项目都会用到 Bootstrap 框架，Bootstrap 框架支持响应式栅格系统、全局 CSS 样

式、CSS 组件和 Java Script 插件等功能。其中，栅格系统是将屏幕分成 12 份，可以按份数自由

组合，再结合媒体查询实现不同屏幕下显示不同效果，特别适合现在手机电脑普及的时代，用

户可以在不同终端看到同一项目的不同的布局效果，用户体验非常好。Bootstrap 框架的全局

CSS 样式包括标题、段落、列表、表格、按钮、图片、辅助类等样式，使用非常方便简单，只

需要设置类名就可以使用其样式。Bootstrap 对表单、表单元素、表单验证也设置有样式，表单

验证不仅有颜色验证、文字验证，还有图表验证。Bootstrap 还提供了大量CSS 组件，包括导

航、下拉菜单、输入框组、按钮组、列表组、字体图标、巨幕、分页、缩略图、进度条、媒体

对象、面板等。其中导航有非常多样式，如选项卡导航、胶囊式导航、两端对齐导航、路径导

航、反色导航、响应式导航等。这些 CSS 组件可以重复使用非常方便。Bootstrap 不仅有大量的

CSS 组件，还提供了 12 个Java Script 插件，包括轮播图、模态框、折叠、选项卡、下拉菜单、

滚动监听、弹出框、警告框、工具提示、按钮等。其中，轮播图和模态框用得非常多，触发简

单，自己写的代码少。这就是框架的优点不仅可以非常快速地搭建自己的网站，写的少做得

多，能完成项目 80%左右的功能，Bootstrap 框架的风格统一漂亮，适合做一些商业项目。

1.2 Foundation 框架与 Bootstrap 框架对比

Foundation 框架也是 CSS 框架，如果懂Bootstrap 框架，就会觉得Foundation 框架非常简

单，Foundation 框架和 Bootstrap 框架有很多相似的地方，Foundation 框架也有栅格系统，基本

的段落、标题、列表、按钮、面板等样式，轮播图、模态框、导航等效果。Foundation 框架还

有侧边栏导航、响应式视频窗口、块网格等功能，特别是侧边栏导航，可以将导航展开或收

起，这一功能非常方便。虽然Foundation 框架有些功能比 Bootstrap 框架做得更好，Foundation

框架比 Bootstrap 框架还更为轻量，对移动设备优化也更好，但是Foundation 框架的兼容性没有

Bootstrap 框架的好，开发者还是会选择 Bootstrap 框架，Bootstrap 框架已经深入人心，根深蒂

固，Foundation 框架无法撼动Bootstrap 框架的地位。

　　 2　前端 J　S 框架

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

免费 4人已下载

立即下载

摘要：

前端四个框架的分析与对比摘要：框架是一套完整的解决方案，是一个项目的骨架，使用框架可以提高项目开发效率，其中最鲜明的特点是写得少，做得多。web前端和后台编程都有不少框架，如果把一个项目比作一辆车，前端框架就是车身，完成大部分的构建；插件就是一些小配饰，完成部分功能；CSS就是车的内饰和车的颜色，后期还可以修改；后台框架就是发动机，将所有零件连接好就可以运。同一个车身可以使用不同发动机，也就是同样的效果可以使用不同的技术实现；一般车身和发动机都是不换的，也就是做项目前一定要先确定好到底用什么框架，不然更换起来特别麻烦。目前前端主流的框架有Bootstrap、Foundation、Angular...

展开>> 收起<<

前端四个框架的分析与对比.docx

共3页,预览1页

还剩页未读，继续阅读

前端四个框架的分析与对比

相关推荐

开通VIP享超值会员特权

作者详情

相关内容

推荐作者

热门标签

举报选择: