web 前端主流框架分析与对比

廖家莉 曹 俊

（四川托普信息技术职业学院，四川 成都 611743）

【关键字】前端；框架；Bo o ts tra p；A n g u l a r；V u e

0 引言

项目开发一般会使用到框架， 框架可以重复使用，运行速度快，提高项目开发效率，减少不必要的DOM 操作，兼容性问题好，还可以花更多时间关注业务逻辑以前一般使用MVC 模式开发项目， 数据模型不变，视图包含业务逻辑，业务逻辑无法重用，控制器的压力特别大。 现在前端的框架大多都是MVVM 模式，可以大大减轻控制器的压力，还真正地实现了页面与数据逻辑分离，业务逻辑可重复使用。 前端框架不仅有CSS 框架还有JS 框架， 下面将简单分析对比Bootstrap、Foundation、Angular.js、Vue.js 这四个框架。

1 前端C S S 框架

1.1 Bootstrap 框架

Bootstrap 框架是 2011 年发布的一款基于HTML、CSS、JavaScript 开发的开源前端 CSS 框架，支持组件与组件定制， 可以用于快速构建响应式布局、移动设备优先的web 项目。现在很多公司开发项目都会用到Bootstrap 框架，Bootstrap 框架支持响应式栅格系统、全局CSS 样式、CSS 组件和JavaScript 插件等功能。 其中，栅格系统是将屏幕分成12 份，可以按份数自由组合，再结合媒体查询实现不同屏幕下显示不同效果，特别适合现在手机电脑普及的时代，用户可以在不同终端看到同一项目的不同的布局效果，用户体验非常好。 Bootstrap 框架的全局CSS 样式包括标题、段落、列表、表格、按钮、图片、辅助类等样式，使用非常方便简单， 只需要设置类名就可以使用其样式。Bootstrap 对表单、表单元素、表单验证也设置有样式，表单验证不仅有颜色验证、文字验证，还有图表验证。Bootstrap 还提供了大量CSS 组件，包括导航、下拉菜单、输入框组、按钮组、列表组、字体图标、巨幕、分页、缩略图、进度条、媒体对象、面板等。 其中导航有非常多样式，如选项卡导航、胶囊式导航、两端对齐导航、路径导航、反色导航、响应式导航等。这些CSS 组件可以重复使用非常方便。Bootstrap 不仅有大量的CSS 组件，还提供了12 个JavaScript 插件，包括轮播图、模态框、折叠、选项卡、下拉菜单、滚动监听、弹出框、警告框、工具提示、按钮等。 其中，轮播图和模态框用得非常多，触发简单，自己写的代码少。这就是框架的优点不仅可以非常快速地搭建自己的网站， 写的少做得多， 能完成项目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 框架

2.1 Angular.js

Angular.js 框架是2009 年发布的一款功能比较完整MVVM 模式的框架，包含的内容丰富，很多公司开发项目都会选择Angular.js 框架。 其核心特征是模型视图、数据双向绑定、模块、指令、依赖注入、服务、路由等，可以用于创建高效、复杂、精致的单页面应用。 其中， 数据的双向绑定通过脏检查机制实现，$apply 实时更新数据，$watch 监听数据的变化， 模型和视图之间的数据可以自动同步，Angular.js 还可以通过$http 服务获取服务器端的数据。 Angular.js 框架也可以通过模块依赖实现数据共享。 Angular.js 框架提供了大量的内置指令，如：程序控制类指令、数据绑定类指令、事件绑定类指令、状态设置类指令、流程控制类、 加载处理类指令等， 其中ng-model、ng-repeat用得非常多，ng-repeat 可以遍历数组和对象，购物车、商品列表、成绩表等都可以通过ng-repeat 实现，可以少写很多代码，非常方便简单。 Angular.js 还有自定义指令和服务，都可以提高代码的复用性。其中，服务可以注入到不同控制器中重复使用，value（）和constant（） 创建的服务可以使多个组件同时使用一个变量或常量，provider（）是唯一可以配置信息的服务组件，在编译时调用；factory（）是使用其返回的对象作为服务对象；service（）是将构造函数作为服务对象。 $window和$location 是用得比较的多两种内置服务，$location主要用于获取、 监听、 改变URL。 路由则可以同过URL 的改变实现视图之间的切换，从而实现复杂的单页面应用开发。

2.2 Vue.js 与 Angular.js 对比

Vue.js 框架是2014 年发布的一款用于构建用户界面的渐进式JavaScript 框架， 主要关注视图层，API简单，容易上手，便于与第三方库或既有项目整合，主要用于开发复杂的单页面应用程序和现在比较火的小程序。 Vue.js 框架与Angular.js 框架有很多相似之处，都能实现数据的双向绑定，都有指令、过滤器、路由，都可以用于开发单页面应用，甚至在环境配置时步骤都非常相似。 不过两者的内置指令前缀不同，Angular.js 的前缀是“ng-”，而 Vue.js 的前缀是“v-”；两者实现数据双向绑定的方式不同，Angular.js 通过脏检查机制实现数据双向绑定， 监听的越多实现越慢，而Vue.js 通过数据劫持，只要数据发生变化就通知订阅者更新视图，速度相对要快一点，特别是在数据多的时候，Vue.js 框架的优势更加明显， 所以开发项目会倾向于Vue.js 框架。 虽然Angular.js 框架更成熟，功能更完整，但是Angular.js 框架的学习路线更陡峭，不能从1.0 版本升级到2.0 版本，而Vue.js 框架更简单灵活、更快速、依赖性小，性能好，第三方UI 库很多可以节省很多开发时间，大大加快了访问速度和提升用户体验，开发者更容易接受。时间就是金钱，公司开发项目非常看中效率，Vue.js 框架简单，效率高，完成的满意度也高，是项目开发的不二之选。

3 小结

框架的选择非常重要， 框架是一个项目的骨架，一旦选好进行项目开发后，都不会随意更换，所以做项目前一定要选好框架。 框架对项目的入侵性非常大，如果需要更换，可能整个项目都需要重新构建。现在不同功能的前端框架数不胜数，比如动画效果有专门的框架、 游戏开发也有相关的框架、App 开发的框架更多，web App 和混合App 的开发成本低、 维护更新简单、跨平台性好，只是用户体验没有原生App 的好，但原生App 的开发成本高，维护更新复杂。 混合App 的成本低， 用户体验比原生的只差那么一点，如果性能要求不是特别高，一般都会选择混合App 技术来 开 发 。 混 合 App 的 相 关 技 术 有 ionic、uni-app、flutter、week 等， 其中，ionic 是基于 Angular.js 框架基础之上的， 只是ionic 的环境配置比较复杂，uni-app则可以基于vue.js 开发小程序。 前端框架不仅可以用于开发复杂的单页面应用、App、小程序，前端框架也能完成很多后台的功能了， 比如Angular.js 框架可以获取服务器端数据，并对数据进行操作。 2018 年，前端 TOP 100 中 Bootstrap 框架排第一，2020 年 Vue 框架排第一，Bootstrap 框架排第三。 Vue.js 框架和Bootstrap 框架在Github 的下载量也都名列前茅。Bootstrap 框架已深入人心，很多公司开发项目都会选择 Bootstrap 框架。Angular.js、React.js、Vue.js 被称为前端三大主流框架， 这三款框架都比较成熟，Angular.js功能多， 是比较完整的框架，Vue.js 框架结合了Angular.js 和 React.js 框架的优点，API 简单， 更受开发者的青睐，现在使用更为广泛。