随着前端的发展,越来越多的前端框架和工具涌现,然而开发人员对前端框架的疑问也越来越多,例如“bootstrap跟angularJS哪个好?”、“JQueryUI跟semantic-UI哪个好”…其实上面这些框架都不是同一类型,很难做比较。诸如此类的,针对这一系列问题,下面我会对前端框架做详细讲解和比较。(欢迎吐槽指导)


目前前端框架大致可以分为三类:

1、样式框架

例如有twitter-bootstrap、foundation、semantic-UI等框架,提供一套样式的解决方案(也会提供少量的基础功能组件,如tab、tooltips等),能够便捷的去构建各类web应用。由于CSS的特性,使用此类框架对应用样式的可控性依旧可以保持。

2、MV* 框架

例如有emberJS、angularJS等框架,此类框架一般是为了克服HTML在构建应用的不足而设计的。核心实现有模块绑定、自动化双向绑定、语义化标签、依赖注入等。声明式的代码,DOM操作和应用逻辑解耦,代码的可调用性。非常好的是将开发和测试同等看待,一般测试的难度很大程度取决于代码的结构。

3、组件框架(UI框架)

例如有extJS、JQuery.easyUI、JQwidgets等框架,此类框架一般基于类库(如JQuery)或者原生javascript包装成UI组件,类似于一个UI组件的集合。使用这类插件能够减少工作量和学习成本,也意味着存在局限性,并且此类框架会主导应用的开发。为了区分样式框架,我暂时将此类框架命名为组件框架。

构建应用可以通过样式框架和MV\ 框架结合使用,也可以单独使用组件框架。前者对构建应用存在最大的可控性,可以保证应用和代码的结构清晰,从维护或者扩展的角度去看都可以让应用呈良性发展。后者对构建应用上提供极大的便捷,减少工作量和学习成本,但会促使应用存在局限性,然而可控性则取决于框架的发展。*


样式框架

目前比较火热的样式框架有三个:
1.Twitter bootstrap (http://getbootstrap.com/)
2.Foundation (http://foundation.zurb.com/)
3.Semantic UI (http://semantic-ui.com/)

对比:
20150318165528.png

Twitter bootstrap
1.历史悠久
2.社区最火热
3.使用SASS
4.迎合所有的技能水平
5.使用jquery
6.有中文文档
7.使用模板时,网站结构臃肿
8.覆盖样式时,代码冗余

Foundation
1.历史悠久
2.对IE支持较好
3.对移动开发支持度更好
4.使用SASS
5.社区支持度薄弱
6.使用Zepto
7.没有中文文档

Semantic UI
1.更好的UI Components实现
2.更好的流畅度
3.更好的动画实现
4.语义清晰,正如他的名字
5.有官方中文文档
6.使用jquery
7.使用LESS
8.较为新(目前版本为1.11.4)
9.没有使用SASS


MV* 框架

作为Google官方推出的框架以及社区热度和强大的支持,大量辅助工具的涌现来支持angularJS的开发,在中文文档资料方面也非常丰富, 无需置疑的主流框架就是angularJS,目前稳定版本1.3,而且angularJS团队已经在准备angularJS 2。
AngularJS (https://angularjs.org/) 特点:
1.MVVM模式
2.模块化
3.自动化双向数据绑定
4.语义化标签
5.依赖注入
6.能与其他类库、插件良好的结合
7.学习曲线略微陡峭
8.从命令式的习惯到声明式


组件框架

1.extJS (http://www.sencha.com/products/extjs/)
2.JQwidgets (http://www.jqwidgets.com/)
3.JQuery.easyUI (http://www.jeasyui.com/)

对比:
20150318165600.png

20150318170228.png

extJS
1.一个非常健壮的框架
2.历史悠久,有丰厚的经验和支持
3.几乎涵盖了所有的组件,无所不能
4.extJS5的版本促进了开发能保持良好的代码结构
5.样式优美
6.中文文档资料丰富
7.技术先进
8.框架臃肿
9.学习曲线陡峭

JQwidgets
1.一个雄心勃勃的框架(better web, less time)
2.组件丰富,共有48个
3.便于与其他框架集成,如angular、bootstrap
4.支持AMD规范(requireJS)
5.样式优美
6.更有作为angular UI的框架ngwidgets推出
7.可按需加载
8.技术较先进
9.学习曲线平滑
10.使用JQuery
11.中文资料较少

JQuery.easyUI
1.共有36个组件
2.技术落后,无法适应当前前端发展的需求
3.样式简陋
4.实际开发中存在很多局限
5.中文资料较少
6.更新缓慢
7.技术响应慢

在三类组件框架中,使用JQwidgets最为合适:可与其他先进技术集成,按需使用其中的组件进而封装成模块。而对于extJS需要应用全面依赖,完全主导应用的开发;JQuery.easyUI则过于老旧,技术落后,需要花很多功夫做改造工作。