Backbone & AngularJS

对于JS，相信很多的强语言开发人员都深恶痛绝，没有类型定义，没有官方正统的继承方式，没有强大的类库，容易出错…要细数JS的缺点，任何一个开发人员都可以滔滔不绝讲上几个小时。但不可否认的是，JS拥有其他语言所不及的灵活性，并且JS已经成为最流行的开发语言之一，github排名也保持在第一位。

为了适应快速发展的JS，技术实现上出现了三种分支。

1. 包装式技术。例如GWT，JSF，利用其他技术生成对应的JS代码，这种方式结局已经很明了，GWT已经关闭，而JSF最新的2.2标准是二年前发布的，还仅仅是标准！

2. 基于JS，实现传统view端的再次分离。例如Backbone，AngularJS，Ember等，这种方式目前是主流，并且有成熟的解决方案。

3. 第三种是使用JS的超集，例如typescript，atscript来实现模块，类以及类依赖。这是JS的大势所趋，ES5以及ES6的标准也都注重于这些,AngularJS2.0就是使用ATScript进行开发，但是目前还未成熟。

今天，我们就来比较一下第二种方案中提到的两个框架：Backbone 和 AngularJS。对于Backbone以及AngularJS，我在实际的项目中使用过，希望通过我对这两个框架的见解，让更多的人在选择前端框架时，有更好的依据。

1. Backbone

首先来说说Backbone的缺点。

1) Backbone严格来说是MVR框架，M代表Model，V代表View，R代表Route。读者也许看出来了，并没有Controller，因为Backbone中使用View来代替Controller的处理，也就必然导致View中大量的DOM操作，烦不胜烦，也会导致JS代码量的飙升。

2) Backbone只是提供了一个轻量级的框架原型，一般性的操作例如模板的渲染，Model的填充以及收集，RestfulAPI等操作都是需要开发人员手动去做的;

3) Backbone没有组件的概念，导致很多类似的模板存在多个版本的情况，并不能实现复用。所以在使用Backbone的项目中，JS模板都是抄来抄去！

很多读者在看完如上Backbone的缺点后，对Backbone大失所望，决定放弃Backbone？ 那你就错了。存在即合理。Backbone也有很多自己的优点！

1) 正是由于Backbone的轻量化，可以使得项目的框架更具灵活性。可实现高度的封装，也可随意的进行自定义并重写。

2) 很容易和其他的类库进行结合。RequireJS,Alertify,bootbox,bootstrap,jquery....等等。

3) 学习曲线很平滑！看得懂JS就可以使用Backbone。

4) 社区很活跃，现在很多不错的基于Backbone的Plugin。例如marionette。

5) 很多知名的项目都选择使用Backbone，例如OpenERP，eteams。推荐想学Backbone的同学可以去看这两个项目的前台源码，OpenERP使用了后端组件来弥补Backbone没有组件的缺陷，是非常值得借鉴的。

2. AngularJS

这个就是大名鼎鼎的Google收购并支持的框架。请千万别迷信Google，选择的时候要慎重！！！因为GWT也是Google支持的，最后的结局，你懂得。一开始我是没有选择AngularJS的，因为AngularJS的自定义指令，让我想起了当年开发JSF的痛苦，所以没有深入了解就直接抛弃了。休假期间，无聊看了几本AngularJS的书，让我对它充满了好奇，并且得以在项目中使用。首先呢，也讲下我认为的AngularJS的不足之处（防止被喷）

1) AngularJS虽然遵循AMD，但并没有提供Lazy Load的实现，也很难结合使用RequireJS模块加载器，很多读者可能会说，使用Grunt来合并并压缩模板以及JS文件，我曾经尝试过，但最后放弃了。第一由于我的开发是基于SOA思想的，合并文件明显违反SOA的架构，打包安装时也不好处理。第二，我忍受不了用户不使用也要下载的机制。当然，读者可以去Google搜索RequireJS+AngularJS的完美结合方案，国外有大牛还是实现的了（百度你绝对搜不到），如果有读者感兴趣，请私信我要解决方案。

2) 难于学习。Module，Controller，Service，Filter，Directive，DI...... 一大顿的新名词扑面而来，吓退了很多的开发人员。并且AngularJS的开发思想完全有别于传统的JQuery开发，已经视JQuery是“银弹”的同学，绝对会颠覆你的“程序员观”！

3) 双向数据绑定，导致难于Debug。很多时候，你都不知道一个指令到底是在那个Controller中。

4) 不够灵活。在很多的大型项目中，各种复杂的特殊需求烦不胜烦，它们往往会颠覆原有的框架，如果设计不够灵活，往往会让你使用各种Hack，最后导致你的项目成为“意大利面式”的设计。AngularJS的Controller并没有提供继承重写的概念，对于这些需求，AngularJS有些吃力。我目前也在研究这个Case的解决方案。

5) 很难与其他的JS类库相结合。JQuery发展这么多年，市场上到处是JQuery式的组件，都很难封装为AngularJS的组件。

6)  Google并没有使用AngularJS，我一直也没找到大型并且成功的AngularJS的项目。

相比于这些缺点，AngularJS的优点绝对会让很多程序员心动！！

1) Model自动绑定，不用开发人员手动填充以及收集数据；

2) 指令自动绑定Controller，不用手动绑定事件，大大节省代码量！！有多大大？？请自己去百度搜索Backbone和AngularJS的对比；

3) 自定义组件。这个！！这个简直是“银弹”！！可以完全抛弃JSP Tag，FreeMarker Macro，JSF Component这些蛋疼的服务器组件技术，实现前端的组件重用，而不用频繁的和服务器进行交互；

4) 依赖注入（DI）！！！！！这个NB绝逼不亚于自定义组件的好处！什么？你不懂依赖注入的好处........ 赫赫有名的Spring框架的两大基础就是依赖注入和AOP！

5) Filter简洁方便的实现前段的数据格式化，而不用开发者到处格式化数据；

当然，AngularJS不仅仅这些优点，不过相信这些足够让读者在选择前台框架时做出最适合自己的选择。

Backbone的灵活性，可以给设计足够多的空间，但是很多功能需要开发者自己去实现。而AngularJS的大而全，却也限制设计的灵活性。

我目前正在使用AngularJS，如上我讲到的AngularJS的缺点，如果读者有可行的解决方案，欢迎指教！