Backbone.js应用程序开发

978-7-115-35664-2
作者: 【美】Addy Osmani
译者: 徐涛
编辑: 陈冀康

图书目录:

详情

本书介绍如何使用流行的Backbone.js来架构JavaScript应用程序。本书介绍了模型-视图-控制器(MVC)理论,介绍如何构建Backbone模型、视图和控制器等,以及使用Backbone.js和RequireJS进行模块式开发的高级知识。

图书摘要

版权信息

书名:Backbone.js应用程序开发

ISBN:978-7-115-35664-2

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。

• 著    [美] Addy Osmani

  译    徐 涛

  责任编辑 陈冀康

• 人民邮电出版社出版发行  北京市丰台区成寿寺路11号

  邮编 100164  电子邮件 315@ptpress.com.cn

  网址 http://www.ptpress.com.cn

• 读者服务热线:(010)81055410

  反盗版热线:(010)81055315

Copyright© 2013 by O’Reilly Media, Inc.

Simplified Chinese Edition, jointly published by O’Reilly Media, Inc. and Posts & Telecom Press, 2014. Authorized translation of the English edition, 2013 O’Reilly Media, Inc., the owner of all rights to publish and sell the same.

All rights reserved including the rights of reproduction in whole or in part in any form.

本书中文简体版由O’Reilly Media, Inc.授权人民邮电出版社出版。未经出版者书面许可,对本书的任何部分不得以任何方式复制或抄袭。

版权所有,侵权必究。


Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。

本书详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识开始,然后着手构建3个示例应用程序。本书还介绍了Backbone和Grunt-BBB、jQuery Mobile等开发工具的配合使用,以及Jasmine、QUnit和SinonJS等测试解决方案。

本书的作者是知名的JavaScript专家、谷歌Chrome团队的工程师Addy Osmani。本书适合于JavaScript程序员、Web开发人员,尤其是想要学习和使用Backbone.js的读者阅读参考。


Addy Osmani 是谷歌Chrome团队的开发工程师,对JavaScript应用程序架构有着强烈的爱好。

作为Yeoman团队中的一员,他创建了像TodoMVC这样流行的项目,并对Modernizr和jQuery等其他开放源代码项目也做出很大贡献。作为一位高产的博主(http://addyosmani.com/blog),Addy的文章经常出现在《JavaScript Weekly》、《Smashing Magazine》及很多其他出版物上。


徐涛(网名:汤姆大叔;微博:@TomXuTao),微软最有价值专家(MVP)、项目经理、软件架构师,擅长大型互联网产品的架构与设计,崇尚敏捷开发模式,熟悉设计模式、前端技术、以及各种开源产品,曾获MCP、MCSE、MCDBA、MCTS、MCITP、MCPD、PMP认证。《JavaScript编程精解》、《JavaScript启示录》译者,博客地址:Http://www.cnblogs.com/TomXu


不久以前,富数据的Web应用程序(data-rich web application)还是一个矛盾。如今,这些应用程序无处不在,因此我们需要知道如何构建它们。

通常,Web应用程序将大量数据操作工作留给服务器,服务器以完整页面加载的方式将HTML推入到浏览器中。客户端JavaScript的使用仅限于改善用户体验。现在,这种关系已经被反转过来了——客户端应用程序从服务器获取原始数据,并可以随时随地根据需要在浏览器中进行渲染。

思考一下Ajax购物车,当添加一个商品到购物车时,不需要刷新页面。最初,jQuery是这种范式的首选库。它的特性是让Ajax发出请求,然后更新页面上的文本等。然而,使用jQuery的这种模式透露出我们在客户端有隐式模型数据。

与服务器对话的客户端代码的兴起(却是很适合的)意味着客户端复杂性的增加。在客户端构建优良架构不再被置后考虑,而是变得非常必要——我们不能只编写一些jQuery代码,并期望它的规模能够随着应用程序的增长而扩大。我们很可能最终获得很多与业务逻辑纠缠在一起的杂乱的UI回调,并注定要被继承我们代码的可怜人所丢弃。

值得庆幸的是,现在有越来越多有助于改善代码结构和可维护性的JavaScript库,使我们能够更方便、轻松地构建功能强大的界面。Backbone.js已经迅速成为最受欢迎的、用于解决这些问题的开源解决方案。在本书中,我将带领大家深入地了解它的用法。

我们将从基本概念开始,然后进行练习,并学习如何构建组织清晰且易维护的应用程序。如果你是一位希望编写更容易阅读、有组织性和可扩展性的代码的开发人员,本书可以帮你做到。

提高开发者的教育水准对我来说很重要,这也是这本书采用知识共享署名-非商业性使用-相同方式共享3.0 Unported许可协议出版的原因。这意味着大家可以购买或免费获得本书,也可以帮助进一步改进它。随时欢迎大家修正现有的材料,我希望我们能够共同为社区提供有用的最新资源。

我衷心感谢Jeremy Ashkenas和DocumentCloud创建了Backbone.js,以及社区里的一些成员帮助我让这个项目更加完美。

译者注:

Jeremy Ashkenas:https://github.com/jashkenas

DocumentCloud:https://www.documentcloud.org/

社区贡献者:https://github.com/addyosmani/backbone-fundamentals/graphs/contributors

本书面向初学者以及希望学习如何更好地组织客户端代码的中级开发人员。读者需要理解JavaScript基本原理才能好好利用它;但我只在必要时对这些概念进行基本的描述。

没有社区其他开发人员和其他写作者为本书投入的时间和精力,就不可能有本作品的问世。我要衷心感谢:

Marc Friedman  https://github.com/dcmaf

Derick Bailey    https://github.com/derickbailey

Ryan Eastridge  https://github.com/eastridge

Jack Franklin   https://github.com/jackfranklin

David Amend   https://github.com/raDiesle

Mike Ball     https://github.com/mdb

Uģis Ozols     https://github.com/ugisozols

Bjorn Ekengren  https://github.com/Ekengren

也要感谢其他优秀的贡献者,是他们让这个项目变成可能。

我假定你在JavaScript方面的水平已经超越初级水平了,因此,我跳过了某些主题,比如对象字面量。如果想要深入了解该语言,我很乐意向你推荐以下书目:

《JavaScript编程精解》

《JavaScript权威指南》,作者:David Flanagan (O’Reilly)

《Effective JavaScript》,作者:David Herman (Pearson)

《JavaScript语言精粹》,作者:Douglas Crockford (O’Reilly)

《JavaScript面向对象编程指南》,作者:Stoyan Stefanov (Packt Publishing)

本书使用下列排版约定:

斜体(Italic

表示专业词汇、链接(URL)、文件名和文件扩展名。

等宽字体(Constant width)

表示广义上的计算机编码,它们包括变量或函数名、数据库、数据类型、环境变量、语句和关键字。

等宽粗体(Constant width bold)

表示应该由用户按照字面引入的命令或其他文本。

等宽斜体(Constant width italic)

表示应该由用户替换或取决于上下文的值。

这个图标表示提示、建议或一般说明。


这个图标表示警告或提醒。

这本书是为了帮助你顺利完成工作而写的。你可以在程序和文档中使用本书的代码。只要不是大规模复制本书中的代码,就不需要联系我们获取许可。例如,使用本书中的几段代码写一个程序不需要许可。出售和分发O’Reilly书中用例的光盘(CD-ROM)是需要许可的。通过引用本书用例和代码来回答问题不需要许可,把本书中大量的用例代码并入到你的产品文档中则需要许可。

我们希望但不强求注明信息来源。一条信息来源通常包括标题、作者、出版者和国际标准书号(ISBN)。例如:“Developing Backbone.js Applications byAdnan Osmani (O’Reilly). Copyright 2013 Addy Osmani, 978-1-449-32825-2.”。

如果你感到对示例代码的使用超出了正当引用或这里给出的许可范围,请随时通过permissions@oreilly.com联系我们。

Safari在线图书(Safari Books Online)是一家按需服务的数字图书馆,提供来自领先出版商的技术类和商业类专业参考书目和视频。

专业技术人员、软件开发人员、Web设计师、商业和创意专家将Safari在线图书作为他们研究、解决问题、学习和认证培训的主要资源。

Safari在线图书为组织、政府机构和个人提供了一系列的产品组合和定价计划。用户可以在一个来自各个出版社的完全可搜索的数据库中访问成千上万的书籍、培训视频和正式出版前的手稿,这些出版社包括:O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology等。欲获得有关Safari在线图书的更多信息,请在线访问我们。

如果你对本书有意见和问题,请联系出版社:

美国:

O’Reilly Media,Inc.

1005 Gravenstein Highway North

Sebastopol,CA 95472

中国:

北京市西城区西直门南大街2号成铭大厦C座807室(100035)

奥莱利技术咨询(北京)有限公司

我们已将本书做成一个网页,我们在那里列出了勘误表、示例和额外信息。你可以打开http://oreil.ly/dev_backbone_js_apps访问这个页面。

如需对本书发表评论或提出技术问题,请发送电子邮件至:bookquestions@ oreilly.com。

欲获得有关本书、课程、会议及新闻的更多信息,请访问我们的网站:http://www.oreilly.com

你还可以:

在Facebook上找到我们:http://facebook.com/oreilly

在Twitter上追踪我们:http://twitter.com/oreillymedia

在YouTube上关注我们:http://www.youtube.com/oreillymedia

我要感谢技术校对人员,他们的出色工作帮助我改进了这本书。他们的知识、精力和热情让本书成为一个更好的学习资源,他们会继续成为我创作的灵感源泉。感谢:

Derick和Marc     再次感谢

Jeremy Ashkenas    https://github.com/jashkenas

Samuel Clay      https://github.com/samuelclay

Mat Scales       http://github.com/wibblymat

Alex Graul       https://github.com/alexgraul

Dusan Gledovic    https://github.com/g6scheme

Sindre Sorhus     https://github.com/sindresorhus

我还要感谢我亲爱的家人在我写这本书的时候所表现出的耐心和支持,以及本书的优秀编辑Mary Treseler。


建筑大师Frank Lloyd Wright曾经说过:“你虽然当不成建筑师,但你仍然可以随心所欲地打开门窗,让阳光照进来。”在这本书中,我将在如何改进Web应用程序的结构方面给出一些启示,以便大家将来能够编写出更易维护、可读的应用程序。

所有架构的目的都是建立一个完美框架——对我们来说,是编写经久不衰的代码,让我们以及在我们之后维护代码的开发人员感到满意。我们都希望架构简单而美观。

现代JavaScript框架和库可以把结构性和组织性融入到项目中,从一开始就建立起一个易维护的基础模式。开发人员历尽艰辛、反复试验,解决我们现在或将来可能会遇到的回调混乱难题,才成功创建了这些框架和库。

仅使用jQuery来开发应用程序时,缺少的是构造和组织代码的方式。创建结束jQuery选择器和回调函数混乱状态的JavaScript应用程序很容易,只需努力保持UI的HTML、JavaScript中的逻辑和对API的数据调用之间的数据同步即可。

如果没有清理混乱的方法,很可能要把一组独立的插件和库串起来,以弥补功能缺失,或者重新开始构建,而且必须自己进行维护。Backbone可以解决这个问题,它提供了一种整洁地组织代码的方式,并把任务分离成可识别、且易于维护的片段。

在本书中,我和其他几位经验丰富的作者将向大家展示如何使用流行的JavaScript库的Backbone.js 1.0版本,来改进Web应用程序的结构。

很多现代JavaScript框架为开发人员提供使用MVC(Model-View-Controller,模型-视图-控制器)模式的变体来轻松组织代码的方法。MVC将应用程序中的关注点分为以下3个部分。

因此,在MVC应用程序中,用户的输入受控制器的支配,而控制器更新模型。视图观察模型,并在模型发生更改时更新用户界面。

然而,JavaScript MVC框架并不总是严格遵循这种模式。一些解决方案(包括Backbone.js)将控制器的任务合并到了视图,而其他的方法也混入到额外的组件中。

为此,我们称这种框架遵循了MV*模式,也就是说,我们可能会有模型和视图,但唯独控制器可能不存在,其他组件可能会发挥控制器的作用。

Backbone.js(见图1-1)是一种轻量级的JavaScript库,用于将结构添加到客户端代码。它可以让应用程序的关注点管理和解耦工作变得很容易。从长远来看,它可以使代码更易于维护。

图1-1 Backbone.js主页

开发人员通常使用像Backbone.js这样的库来创建单页面应用程序(SPA)。SPA是一种将页面加载到浏览器,然后不需要从服务器刷新整个页面,就可以在客户端完成数据交互的Web应用程序。

Backbone非常成熟和流行,活跃的开发者社区和基于它的大量可用插件和扩展都离不开它。它已经被Disqus、沃尔玛、SoundCloud和LinkedIn等公司用于开发重要的应用程序。

Backbone关注于向用户提供查询和操作数据的有用方法,而不是重建JavaScript对象模型。它是一个库,而不是框架,从嵌入式小部件到大规模应用,它都具有很好的可伸缩性和兼容性。

由于Backbone很小,还有一些用户将它下载到手机中使用,或者用于改善很慢的链接速度。Backbone的所有源码可以在短短几小时内就阅读并理解完。

使用JavaScript构建一个单页面应用程序时,不管它是否包括一个复杂的用户界面,还是只是试图减少新视图所需的HTTP请求数量,我们可能会发现自己其实已经创建了MV*框架中的许多部分。

刚开始时,编写能够提供一些特殊方法来避免“意大利面条”式代码的应用程序框架非常困难。但是,如果说编写一个与Backbone一样强大的代码也同样繁琐,那就会是一个非常错误的观念。

MV*框架在构建应用程序方面还有更深入的内容,而不只是捆绑DOM操作库、模板和路由。成熟的MV*框架通常不仅包括我们找到的自己编写的部分,还包括之后所找到的某些问题的解决方案。这是一个节省时间的事物,我们不应低估它的价值。

所以,你可能会在哪里需要MV*框架,在哪里不需要?

如果我们正在编写一个应用程序,其中在浏览器中会有许多的视图渲染和数据操作工作,那么这时我们可能会发现JavaScript MV*框架很有用处。这类应用程序包括Gmail、NewsBlur和LinkedIn移动应用程序等。

这些类型的应用程序通常下载一个完整的加载,其中包含所有的脚本和样式表,以及用户需要处理常见事情并在幕后执行大量附加行为的HTML标记。例如,无需向服务器发送一个新的页面请求,就能轻松将阅读E-mail文档切换到编写E-mail文档。

然而,如果你正在构建的应用程序仍然依赖于服务器完成大部分的页面/视图渲染工作,而且你仅仅使用一些JavaScript或jQuery来让一切更具有互动性,那么MV*框架可能就大材小用了。当然,也有一些复杂的Web应用程序,其视图的分部渲染可以与单页面应用程序进行有效的结合,但在其他方面,我们最好坚持使用简单的设置。

软件(框架)开发的成熟并不取决于一个框架已经存在了多久;而取决于这个框架有多坚固,更重要的是,它是否能够很好地发挥它的作用。在解决常见问题方面,它是否变得更有效呢?在开发人员构建更大、更复杂的应用程序时,它是否在继续改进呢?

Backbone提供了一组数据结构(模型、集合)和用户界面(视图、URL),当使用JavaScript构建动态应用程序时,它们非常有用。这不是固执己见,它意味着我们可以根据需要自由、灵活地构建Web应用程序的最佳体验。可以使用它提供的开箱即用的特定架构或者对它进行扩展,以满足需求。

该库并不关注小部件或替换我们构建对象的方式,它只提供用于操作和查询应用程序数据的工具。它也没有指定特定的模板引擎;我们可以自由使用Underscore.js(它的依赖项之一)提供的微模板,视图可以绑定到所选择的模板解决方案构建的HTML上。

当我们看到大量使用Backbone构建的应用程序后,可以知道它具有良好的可扩展性,这点很明显。Backbone也能够很好地与其他库兼容,这意味着可以在使用AngularJS编写的应用程序中嵌入Backbone小部件,可以将它和TypeScript一起使用,或仅使用单个类(如模型)作为简单应用程序的数据支持者。

使用Backbone构建应用程序没有性能上的缺点。它避免了运行循环、双向绑定以及持续查询数据结构时进行更新,它让事情尽可能的简单化。即便如此,你希望背道而驰吗?当然,你可以在它上面执行这样的操作。Backbone是不会阻止你的。

在一个有众多插件和扩展作者加入的充满活力的社区里,如果想获得一些Backbone缺乏的功能,可能会在里面找到与之相关的互补项目。此外,Backbone提供了源代码的读写文档,任何人都有机会轻松了解其幕后的工作。

经过两年半的不断改进,Backbone库变得成熟起来,它将继续为构建更好的Web应用程序提供一种极简主义的解决方案。我经常使用它,希望大家像我一样,把它当作自己的另外一个工具。

本书的目的是创建一个权威和集中式信息存储库,来帮助那些使用Backbone开发现实世界应用程序的开发人员。如果你在本书中发现你认为可以改进或扩展的部分或主题,请在本书的GitHub网站上提交问题(或者Pull Request更好)。它不会花费你很长时间,而且这样做会帮助其他开发人员避免遇到这类问题。

译者注:

GitHub网站:https://github.com/addyosmani/backbone-fundamentals

本书的主题包括MVC理论,以及如何使用Backbone的模型、视图、集合和路由来构建应用程序。我还将带领大家了解一些高级主题,如使用Backbone.js和AMD(通过RequireJS)进行模块化开发,嵌套视图等常见问题的解决方案,以及如何使用Backbone和jQuery Mobile解决路由问题等。

下面是每章要学习的内容。

第2章 基本概念

追溯MVC设计模式的历史,并介绍Backbone.js和其他JavaScript框架是如何使用实现它的。

第3章 Backbone基础

涵盖了Backbone.js的主要功能,以及大家需要知道的技术和技巧,以便能够有效地使用它。

第4章 练习1:Todos——第一个Backbone.js应用程序

带你一步步了解简单客户端Todo列表应用程序的开发。

第5章 练习2:Book Library——第一个RESTful风格的Backbone.js应用程序

了解图书馆应用程序的开发,该程序使用REST API将其模型持久化到服务器上。

第6章 Backbone扩展

描述了两个扩展框架Backbone.Marionette和Thorax,并向Backbone.js添加了用于开发大型应用程序的特性。

第7章 常见问题和解决方案

回顾使用Backbone.js时可能遇到的常见问题,以及解决这些问题的方法。

第8章 模块化开发

了解如何使用AMD模块和RequireJS进行模块化开发。

第9章 练习3:第一个模块化的Backbone/RequireJS应用程序

了解在RequireJS的帮助下,重写在练习1中创建的应用程序,使其更加模块化。

第10章 对Backbone.js请求和集合进行分页

了解如何使用Backbone.Paginator插件对集合进行数据分页。

第11章 Backbone Boilerplate和Grunt-BBB

介绍强大的工具,通过使用样板代码来开始一个新Backbone.js应用程序。

第12章 Backbone和jQuery Mobile

解决Backbone和jQuery Mobile一起使用时出现的问题。

第13章 Jasmine

介绍如何利用Jasmine测试框架对Backbone代码进行单元测试。

第14章 QUnit

讨论如何使用QUnit进行单元测试。

第15章 SinonJS

讨论如何使用SinonJS对Backbone应用程序进行单元测试。

第16章 结论

结束Backbone.js开发旅程。

附录A 延伸学习

重新回到设计模式的讨论,对比MVC模式与MVP(模式-视图-表示器)模式,并了解Backbone.js如何与两者相关,还包括了解如何从零开始编写像Backbone这样的库,以及其他一些主题。

附录B 资源

提供Backbone相关的额外资源引用。


相关图书

Yii框架深度剖析
Yii框架深度剖析
精通XPages:XPages应用开发和XSP语言权威指南
精通XPages:XPages应用开发和XSP语言权威指南

相关文章

相关课程