AngularJS, Ember.js, Backbone 这类新框架与 jQuery 的重要区别在哪里？

Question

如题，看到很多Web APP都使用这些框架，与jQuery混合使用的并不多，不知道他们的区别在哪里？

Answer 1

其实我也没用过，不过也算现在的一个趋势吧，跟jQuery不是一个时代的产物。

jQuery主要是用来操作DOM的，如果单单说jQuery的话就是这样一个功能，它的插件也比较多，大家也都各自专注一个功能，可以说jQuery体系是跟着前端页面从静态到动态崛起的一个产物，他的作用就是消除各浏览器的差异，简化和丰富DOM的API，简单易用。

而AngularJS, Ember.js, Backbone则是比较新的产物，他们的产生不是为了再页面上实现各种特效，而是为了构建更重量级的webapp，这种app通常只有一个页面，通常拥有丰富的数据和交互，业务逻辑耦合深，跟传统的web页面还是有比较大的差异的。他们通常把数据和逻辑还有展现之类的东西做了分离，可以更方便做出复杂的单页面应用。
有个神奇的repo，是用来演示各种mvc框架的，可以参考下，里面列举的很全。https://github.com/addyosmani/todomvc

所以说二者的差别还是很明显的。jQuery现在的趋势是越来越专注和简单，很多MVC框架其实都依赖于jQuery，用来进行DOM操作，这就是它做的事情，而MVC框架则更注重于模式，专注点不同。

Answer 2

除了Ember, 做过小程序, 其他都做过完整的功能项目.
1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web就是 MVR. (Model, View, Router路由). 对于初学者有一个良好的代码结构,而不是一上来就用jQuery频繁操作DOM,导致代码很难维护.

backbone功能仅限于此. backbone 提供了Model层处理前端数据模型, Router提供了前端页面路由(目前大多数都是后端提供页面路由,所以可以不用). View提供了页面视图的模块化和作用域.(完美解决了jQuery一个页面多次出现同一个组件通过id或class操作dom而导致无法分别哪个组件问题). View也自带自己的模板引擎.

backbone没有提供任何额外的功能. 例如操作dom还是用jQuery, 数据传输也是基于jQuery的ajax通过Model封装了rest.

backbone还依赖一个非常好用的库 underscore.js 这个库封装了大部分js对象,数组操作, 例如循环,遍历,map, filter对象某个属性, 删除某个属性等等. 很方便

所以backbone其实也是一个库,而不是框架

2 Angular, 目前在项目中完整大规模使用. Angular官方定位 HTML enhanced for web apps(增强目前web app) 和 AngularJS — Superheroic JavaScript MVW Framework (英雄般的MV 无论什么结构层次都支持的框架)

angular 目前的发展节奏就是 大而全, 就是你有我有全都有. 使用angular后,你不需要任何依赖其他库. angular都会有,现在没有以后也会加入.

angular 功能包括
2.1 数据绑定 就是MVVM 结构, 目的就是让开发者完全忘记操作DOM, 只需要操作数据,html页面就会自动更新
例如 var shownumber = 1, 那么你把shownumber = 2 时, 界面就自动更新了, 完全不需要用jQuery用.html()或.text()更新数据. 就这个绑定功能,目前大部分网站的js代码都能删掉 三分之二.

2.2 模块系统, angular 有自己的模块系统, 不需要在用require js 或其他模块系统. 目前第三方模块已经很多 http://ngmodules.org/

2.3 数据传输 内置$http,取代了jQuery的$.ajax 而且内置promise,非常好用. 同时有官方做的$resource 模块 支持restful 接口

2.4 操作Dom 内置了一个简化版本的类似jQuery的angular.element, 完全可以不用$ jQuery. 同时提供大量内置的ng- 开头的指令系统通过在html模板中 声明式绑定 解决操作DOM问题. (声明式指令简直就是对不懂js的前端开发的福音,再也不用js的.show(),.hide()了, 直接写到html标签上)

2.5 页面路由系统

2.6 内置一套非常好用结合html5的表单验证系统

2.7 内置ng-指令开头的事件系统 例如ng-click等

2.8 内置非常贴心的过滤器系统, 例如你先把时间写成2012.01.01 只要用 data | xxxx-xx-xx ,或 货币符号把人民币改成美元 {{amount | currency:"USD$"}} ,真贴心.

2.9 集成数组对象操作方法, 看来underscore.js也不需要了. angular.xxx 开头的方法一大堆. (目前我还是用underscore)

2.10 动画效果, angular1.2版本后分为独立的模块 ng-animate 非常方法,只要在html写上样式名字动画自动就出来了,完全不用操心js代码

2.11 操作cookie的模板

2.12 移动端事件模块

2.13 html 标签过滤器, 防止非法字符什么的.

还有很多, angular定位就是大而全. 其实也能感觉到"框架" 与 "库" 的区别

3 Ember 定位是框架, 原来是苹果公司的内部项目.
ember提供了MVC结构 和 backbone 非常像.
但ember的view集成了数据绑定功能. 使用handlebar 作为模板引擎, (angular模板是DOM模板 和 backbone,ember都不一样)
Ember 还集成路由, 各种贴心易用的属性操作方法, restful ajax.
但Ember 对比angular 还是没有那么多功能.

Answer 3

用过backbone 和 angular，实际上这些库或者框架重点并不是类似 jQuery 专注于DOM操作的Lib一样。如 @代码诗人芋头 所说， backbone/angular/ember/knockout .... 这些框架或者类库更加注重于复杂的webapp构建，特别是各种单页应用。

在 angularjs 中，其实内部实现了一个 jqLite，为了实现一些 jQuery 的简单的 DOM 操作。当你在页面中引入了 jQuery，那么 angularjs 的 bindjQuery 方法会把它原本的 jqLite 替换成 jQuery。所以说，jQuery 在 DOM 操作上有它的优势，而这些类库则是让人们可以以更好的方式来组织自己的 webapp。这两者是互补而不是互斥的 ^ ^

Answer 4

jQuery 是类库，它解决的是特定功能实现，以及跨浏览器解决方案这样的问题；

Ember/Angular/Backbone...是框架，它们解决的是代码组织结构以及（模块/功能）相互之间的调用和依赖的问题；

简单地说，框架帮助你解决“代码如何组织”的问题，类库帮助你解决“如何把代码写得更少/巧/强壮”的问题；它们解决的是不同层面的问题。

对于小型应用来说，因为业务逻辑简单，代码总量不会太大，组织不会是太大得问题，所以用类库就够了；而面对中/大型项目，特别是需要多人共同参与的项目，选择一个合适的框架有助于写出规范的，易于理解的，易于回复的，低耦合的……等等的代码，在此基础上再使用各种类库来增加具体代码的健壮性与功能性则更好。

Answer 5

jQuery是类库, Angular等是框架,不同层次的东西.