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

　　摘要：框架是一套完整的解决方案，是一个项目的骨架，使用框架可以提高项目开发效率，其中最鲜明的特点是写得少，做得多。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框架

　　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年发布的一款用于构建用户界面的渐进式Java Script框架，主要关注视图层，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简单，更受开发者的青睐，现在使用更为广泛。

　　参考文献

　　[1]谢郁编。CCS高效开发实战：CSS3、LESS、SASS、Bootstrap、Foundation[M].北京：电子工业出版社，2014:9.

　　[2]赵丙秀，张松慧。Bootstrap基础教程[M].北京：人民邮电出版社，2018:2.

　　[3]HTML5混合APP开发，黑马程序员编著[M].北京：清华大学出版社，2018:6.