微信号:infoqchina

介绍:有内容的技术社区媒体

Backbone与Angular的比较

2014-01-20 21:44 InfoQ

本文首先将列举在创建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 +Marionette + 插件的组合。


业务逻辑

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

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


构建DOM

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


视图逻辑

将视图逻辑划分为命令式与声明式逻辑是一种由来已久的方式(可以追溯到原始的MVC模式)。不过Backbone并没有为这两者划分出一条清晰的界限,它们都由Backbone.View对象处理。


在模型与视图间进行同步

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

好在如今已经有各种各样的插件(例如Backbone.Sticklt)能够帮助Backbone解决这一问题了,因此你可以不用再理会琐碎的模型-视图同步操作,而是专注于复杂的交互工作。

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


管理复杂的UI交互操作

所有的UI交互操作都可以划分为简单交互操作(使用观察者同步(Observer Synchronization)方式进行管理)和复杂交互操作(必须使用流同步(Flow Synchronization)方式)两种类别。由于Backbone本身没有硬性规定处理复杂UI交互的解决方案。有些人选择使用Backbone.View作为解决方案,但我建议你不要这么做。我会倾向于使用主动控制显示(Supervising Presenter)模式管理复杂的交互操作。


管理状态和路由

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


创建与连接组件

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


Angular

比较一下Angular是如何解决这些问题的:

业务逻辑——JS对象

构建DOM——指令(Directive)

声明式视图逻辑——指令

命令式视图逻辑——控制器(Controller)

视图与模型同步——内置的机制

管理UI交互——控制器

管理状态与路由——AngularUIRouter

创建与连接组件——依赖注入


业务逻辑

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


模板与视图

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


构建DOM

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


视图逻辑

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


在模型与视图间进行同步

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


管理复杂的UI交互操作

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


管理状态和路由

与Backbone类似,Angular自带的路由器功能非常基础,并不适合于创建实际的应用。令人欣慰的是,AngularUIRouter项目填补了这一空白。它能够管理应用状态、视图,并且支持嵌套视图。


创建与连接组件

Angular包含了一个IoC容器,它与通常意义上的依赖注入方法非常相似,这就要求你必须编写模块化的代码。


总结

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

 

更多精彩内容,请点击阅读原文。


***********************************

本文来自InfoQ微信公众账号:infoqchina

1、回复“今日新闻”,查看今天更新的新闻;

2、回复“今日英文”,查看今天英文站的更新;

3、回复“文章 +关键词”,搜索关键词相关内容;

4、回复“QCon”,了解QCon大会相关信息;

5、回复“活动”,了解最近InfoQ组织的线下沙龙;

6、回复“架构师”,获取《架构师》下载地址;

7、回复“投稿”,了解投稿和加入编辑团队的流程。

***********************************

 
InfoQ 更多文章 Facebook如何实现PB级别数据库自动化备份 学术派Google软件工程师Matt Welsh谈移动开发趋势 Spotify为什么要使用一些“无聊”的技术? 妹纸们放假了,汉纸们做啥? 大多数重构可以避免
猜您喜欢 SDCC 2015:CSDN年度压轴技术大会 云集百位顶尖技术专家 每逢周末,你是不是都干了这件事… 想得太多,而做得太少 回合制游戏的核心乐趣是什么? 【第十四届中国互联网大会顺利闭幕】阿里聚安全被评为移动安全指定安全检测机构