如何选择（区分）前端框架

该文章距离发布日期已经过了 3089 天 ，请注意信息甄别。

随着前端的发展，越来越多的前端框架和工具涌现，然而开发人员对前端框架的疑问也越来越多，例如“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/)

对比：

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/)

对比：

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 则过于老旧，技术落后，需要花很多功夫做改造工作。