Angular 和 Backbone的对比

Backbone与Angular的比较

作者Victor Savkin，译者邵思华发布于 2014年1月17日|注意:GTLC全球技术领导力峰会，500+CTO技聚重新定义技术领导力！将不同的思想和工具进行对比，是一种更好地理解它们的方式。在本文中，我首先将列举在创建web应用程序时需要重复进行的各项任务，随后为你展现Backbone和Angular将如何帮助你完成这些工作。

我们所尝试解决的问题

作为web开发者来说，我们的大部分工作都可以归结于以下的某个类别中：

• 实现业务逻辑
• 构建DOM
• 实现视图逻辑（声明式与命令式）
• 在模型与视图间进行同步
• 管理复杂的UI交互操作
• 管理状态和路由（routing）
• 创建与连接组件

如你所料，大多数客户端框架都以某种方式帮助你完成这些工作。

Backbone

首先让我们看看Backbone为解决这些问题提供了哪些功能：

业务逻辑	Backbone模型（Model） 和 集合（Collection）
构建DOM	Handlebars
声明式视图逻辑	Backbone视图（View）
命令式视图逻辑	Backbone视图
视图与模型同步	StickIt
管理UI交互	JS对象 或 Marionette Controllers
管理状态与路由	Backbone.Router
创建与连接组件	手工实现

以下图片以更直观的方式表现了这些功能：

我所指的Backbone……

将最原始的Backbone与Angular直接进行对比有些不太公平，因此在本文中所指的Backbone实际上是Backbone + Marionette + 插件的这套组合。

业务逻辑

Backbone应用程序中的很大一部分业务逻辑由模型（model）和集合（collection）负责实现，这些对象往往对应着服务端后台的资源，它们将包含视图显示所必须的内容。

由于使用者必须扩展Backbone.Model和Backbone.Collection对象，因此造成了许多额外的复杂性。

首先，Backbone使用POJO（简单JavaScript对象）和Backbone model对象两种方式表现领域对象。在显示模板（template）、或是与服务端交互时需要使用POJO，而在需要使用可观察（observable）属性时（例如需要建立数据绑定的时候），则需要使用Backbone模型。

其次，Backbone推荐你使用不可变对象。由于Backbone不支持对函数进行观察，因此每次有某个属性发生改变时，与之相对应的推断（computed）属性必须被重置。这就为你的应用增加了许多额外的复杂性，也使得最终产生的代码难以理解和测试。除此之外，所有的依赖项必须以（"change:sourceProperty,this.recalculateComputedProperty）的形式显式地进行指定。

构建DOM

Backbone使用模板引擎构建DOM。虽然从理论上说，你可以选择你所中意的引擎，但基本上在大型应用程序中都会在Mustache和Handlebars这两者之间进行选择。Backbone中的模板定义通常不包含逻辑，并且多数是基于字符串的，不过这两点也并非必需。

视图逻辑

将视图逻辑划分为命令式与声明式逻辑是一种由来已久的方式（可以追溯到原始的MVC模式）。事件处理配置和数据绑定属于声明式，而事件处理本身则是属于命令式。不过Backbone并没有为这两者划分出一条清晰的界限，它们都由Backbone.View对象处理。

在模型与视图间进行同步

由于Backbone在本质上追求最简化，因此它本身并没有为数据绑定提供支持。这一点对于小型项目来说或许不是一个问题，毕竟你可以选择让视图负责对模型和DOM进行同步。但当应用程序的功能开始不断增加时，这种方式就很容易渐渐失控。

好在如今已经有各种各样的插件（例如Backbone.Sticklt）能够帮助Backbone解决这一问题了，因此你可以不用再理会琐碎的模型-视图同步操作，而是专注于复杂的交互工作。这些插件中的大多数都可以使用简单的JavaScript进行配置，因此使用者可以在它的基础之上创建一个抽象层，以满足你应用程序的需求。

在Backbone中使用数据绑定的一个缺点就是它们依赖于可观察属性，而另一方面，模板引擎又是使用POJO实现的。由于同时存在着两种与DOM交互的方式，经常会造成代码的重复。

管理复杂的UI交互操作

所有的UI交互操作都可以划分为简单交互操作（使用观察者同步（Observer Synchronization）方式进行管理）和复杂交互操作（必须使用流同步（Flow Synchronization）方式）两种类别。

如前文所述，简单交互操作是通过使用数据绑定和事件处理函数的Backbone.View进行处理的。由于Backbone本身没有硬性规定处理复杂UI交互的解决方案，你可以随意选择最适合你的应用的方式。有些人选择使用Backbone.View作为解决方案，但我建议你不要这么做，因为这种方式会造成Backbone.View的职责过多。我会倾向于使用主动控制显示（Supervising Presenter）模式管理复杂的交互操作。

管理状态和路由

Backbone包含了一个非常简单的路由器的实现，但它并不支持管理视图和应用状态的功能，必须要手动实现这些功能。因此在实际应用中经常会选择使用其它类库（例如router.js），而不是它自带的路由器。

创建与连接组件

在Backbone中，你可以自由选择最适合你的应用的方式创建并连接组件。这种方式的缺陷在于你必须编写大量的样板代码，而且为了保持代码的合理组织，必须始终遵循良好的代码规范。

Angular

现在让我们来比较一下，看看Angular是如何解决这些问题的。

业务逻辑	JS对象
构建DOM	指令（Directive）
声明式视图逻辑	指令
命令式视图逻辑	控制器（Controller）
视图与模型同步	内置的机制
管理UI交互	控制器
管理状态与路由	AngularUI Router
创建与连接组件	依赖注入

以下图片以更直观的方式表现了这些功能：

业务逻辑

由于Angular没有使用可观察属性，因此在实现模型时没有这方面的限制。你不需要扩展某个类、或者遵循某个接口，而是可以自由地选择你喜欢的方式（包括使用现有的Backbone模型）。在实际开发中，多数开发者选择使用简单的JavaScript对象（POJO），这种方式有以下优点：

• 所有的领域对象都不依赖于任何特定的框架，因而更容易在不同的应用中重用。
• POJO对象和与服务端交互的对象非常近似，因而简化了客户端与服务器的通信。
• POJO对象将用于视图表示，因此无需实现toJSON方法。
• 推断属性可以用函数的形式表现

模板与视图

Angular中的模板被编译之前只是一些DOM片断，而在编译过程中，Angular会将这棵DOM子树进行转换，并为其添加一些JavaScript。编译的结果会生成另一棵DOM子树，也就是视图。换句话说，视图并非由你自己所创建，而是由Angular对模板编译后所生成的。

构建DOM

Backbone将DOM的构建与视图逻辑进行了清晰地分离，前者使用模板引擎实现，而后者则使用数据绑定与命令式的DOM更新操作实现。与之相反，Angular并未将这两者进行区分，它使用相同的机制和指令（directive）构建DOM，并定义声明式的视图行为。

视图逻辑

Angular对声明式与命令式的视图逻辑进行了清晰的划分，前者由视图处理，而后者由控制器负责。

这种划分看起来似乎有些刻意，但它确实是非常重要的。

首先，这种方式清晰地指出了哪些部分需要进行单元测试。嵌入在模板中的声明式逻辑（例如ng-repeat）无需进行单元测试，反之，为控制器编写单元测试通常是个好主意。

其次，所有的依赖都是单向的，即视图依赖于控制器，因此控制器并不了解视图或DOM的任何逻辑。这种方式促进了代码重用，也简化了单元测试。与之相反，Backbone.View经常需要对DOM节点进行操作，随后使用模板引擎对页面中的很大一部分进行重新渲染。

在模型与视图间进行同步

Angular包含了原生的数据绑定功能，与大厦多数其它客户端框架所不同的是，它并不依赖于可观察属性，而是使用了脏检查（dirty checking）方式。

Angular的脏检查方式有着以下一些优点：

• 模型本身不会意识到它已经成为一个被观察的对象。
• 无需在可观察属性之间指定任何依赖。
• 函数同样表现可观察对象。

但这种方式也带来了以下一些负面影响：

• 在与第三方组件或类库集成的时候，你必须保证Angular能够响应它们对你的模型的任何改变。
• 在某些情况下会带来性能方面的影响。

管理复杂的UI交互操作

如前文所述，控制器将负责实现UI元素的命令式逻辑。除此之外，还可以将控制器实现为一种主动控制显示模式，以协调复杂的UI交互。

管理状态和路由

与Backbone类似，Angular自带的路由器功能非常基础，并不适合于创建实际的应用。令人欣慰的是，AngularUI Router项目填补了这一空白。它能够管理应用状态、视图，并且支持嵌套视图。换句话说，它能够满足你对路由器的全部功能需求。当然，和Backbone的情况一样，你并非只有这一种选择，你也可以选择其它的路由功能类库（例如router.js）。

创建与连接组件

Angular包含了一个IoC容器，它与通常意义上的依赖注入方法非常相似，这就要求你必须编写模块化的代码。这种方式能够改善代码的可重用性和可测试性，也使你免于编写大量的样板代码。它的负面影响在于一方面增加了使用的复杂度，一方面削弱了对组件创建过程的可控程度。

总结

本文简单地介绍了Backbone和Angular如何处理我们在创建web应用时所遇到的各种问题。这两个框架在某些问题的处理上使用了截然不同的方案，Backbone在显示模板、创建数据绑定和连接组件方面给使用者更多的选择。与之相反，Angular为这些问题提供了规定的方案，不过在创建模型与控制器方面的限制就比较少一些。

关于作者

Victor Savkin是一位就职于Nulogy的软件工程师。他所感兴趣的技术包括函数式编程、web平台和领域驱动设计。他拥有使用JavaScript编写大型应用程序的经验。作为一名编程语言的狂热爱好者，他投入了大量的时间学习Smalltalk、JS、Dart、Scala、Haskell、Closure和loke等语言。他的博客victorsavkin.com中有大量关于使用Ruby和JS创建大型应用程序的文章，你也可以关注他的Twitter@victorsavkin。