backbone.js的目的是什么？

Question

我试图从其网站http://documentcloud.github.com/backbone了解backbone.js的实用程序,但我仍然无法理解.

任何人都可以通过解释它是如何工作来帮助我的,以及它如何有助于编写更好的JavaScript？

Answer 1

Backbone.js基本上是一个超级框架,允许您以MVC(模型,视图,控制器)方式构建您的Javascript代码,其中...

Model是检索和填充数据的代码的一部分,

View是此模型的HTML表示形式(视图随模型更改而变化等)

和可选的Controller,在这种情况下允许您通过hashbang URL保存Javascript应用程序的状态,例如:http://twitter.com/#search？ q = backbone.js

我在Backbone中发现的一些专业人士:

• 没有更多Javascript Spaghetti:代码被组织并分解为语义上有意义的.js文件,稍后使用JAMMIT进行组合

• 没有更多的jQuery.data(bla, bla):没有必要存储在模型DOM数据,存储数据,而不是

• 事件绑定才有效

• 非常有用的Underscore实用程序库

• backbone.js代码有很好的文档和很好的阅读.让我看到了许多JS代码技术.

缺点:

• 我花了一些时间来绕过它,弄清楚如何将它应用到我的代码中,但我是一个Javascript新手.

以下是一组使用Backbone和Rails作为后端的优秀教程:

CloudEdit:一个带Rails的Backbone.js教程:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps还有这个精彩的Collection类可以让你处理模型集合和模仿嵌套模型,但我不想让你从一开始就迷惑.

Answer 2

如果您要在浏览器中构建复杂的用户界面,那么您可能会发现自己最终发明了构成Backbone.js和Sammy.js等框架的大部分内容.所以问题是,你是否在浏览器中构建了足够复杂的东西以便使用它(因此你最终不会自己发明同样的东西).

如果您计划构建的内容是UI定期更改其显示方式但不会转到服务器以获取整个新页面的内容,那么您可能需要Backbone.js或Sammy.js之类的内容.像这样的基本例子是谷歌的GMail.如果您曾经使用它,您会注意到它在您首次登录时会下载一大块HTML,CSS和JavaScript,然后在后台发生所有事情.它可以在阅读电子邮件和处理收件箱之间移动,并且可以再次搜索和返回所有这些内容,而无需要求呈现整个新页面.

正是这种应用程序使这些框架更易于开发.如果没有它们,您最终会将各种各样的库集合在一起以获得部分功能(例如,jQuery BBQ用于历史管理,Events.js用于事件等)或者您最终会自己构建所有内容并且必须自己维护和测试一切.与Backbone.js相比,Github上有成千上万的人在观看它,有数百个人可能正在研究它们,还有数百个问题已在Stack Overflow上提出并回答.

但是,如果您计划构建的内容不够复杂,不值得与框架相关的学习曲线,那么这一切都不重要.如果您仍在构建PHP,Java或其他后端服务器仍然在根据用户的请求构建网页的重要工作,并且JavaScript/jQuery只是锦上添花,那么您就不会是否需要或尚未准备好Backbone.js.

Answer 3

骨干是......

...一个非常小的组件库,可用于帮助组织代码.它打包为单个JavaScript文件.不包括评论,它只有不到1000行的实际JavaScript.这是明智的写作,你可以在几个小时内阅读整个事情.

它是一个前端库,您可以将其包含在带有脚本标记的网页中.它只影响浏览器,并且对您的服务器几乎没有说明,只是理想情况下它应该公开一个安静的API.

如果你有一个API,Backbone有一些有用的功能可以帮助你与它交谈,但你可以使用Backbone为任何静态HTML页面添加交互性.

Backbone用于......

...向JavaScript添加结构.

由于JavaScript不强制执行任何特定模式,因此JavaScript应用程序可能会非常快速地变得非常混乱.任何在JavaScript中构建了一些微不足道的东西的人都可能遇到以下问题:

1. 我在哪里存储我的数据？
2. 我将把我的功能放在哪里？
3. 我如何将我的功能连接在一起,以便以合理的方式调用它们并且不转向意大利面条？
4. 如何让不同开发人员可以维护此代码？

Backbone旨在通过以下方式回答这些问题:

• 模型和集合可帮助您表示数据和数据集合.
• 视图,可帮助您在数据更改时更新DOM.
• 事件系统,以便组件可以相互监听.这可以使您的组件脱离耦合并防止spaghettification.
• 一组最小的合理约定,因此开发人员可以在同一代码库上一起工作.

我们称之为MV*模式.模型,视图和可选附加功能.

骨干很轻

尽管最初出现,但Backbone非常轻巧,几乎没有做任何事情.它的功能非常有用.

它为您提供了一组可以创建的小对象,它们可以发出事件并相互倾听.例如,您可以创建一个小对象来表示注释,然后创建一个小的commentView对象来表示浏览器中特定位置的注释的显示.

您可以告诉commentView在评论更改时收听评论并重绘自己.即使您在页面上的多个位置显示相同的评论,所有这些视图都可以收听相同的评论模型并保持同步.

这种编写代码的方式有助于防止纠结,即使您的代码库变得非常大,有很多交互.

楷模

在开始时,通常将数据存储在全局变量中,或者作为数据属性存储在DOM中.这两个都有问题.全局变量可能相互冲突,通常是不良形式.存储在DOM中的数据属性只能是字符串,您必须再次解析它们.存储数组,日期或对象等内容并以结构化形式解析数据很困难.

数据属性如下所示:

<p data-username="derek" data-age="42"></p>

Backbone通过提供一个Model对象来表示您的数据和相关方法来解决这个问题.假设您有一个待办事项列表,您将拥有一个代表该列表上每个项目的模型.

更新模型后,它会触发事件.您可能有一个与该特定对象相关联的视图.视图侦听模型更改事件并重新呈现自身.

查看

Backbone为您提供与DOM对话的View对象.操作DOM或侦听DOM事件的所有函数都在这里.

视图通常实现渲染函数,该函数重绘整个视图,或者可能是视图的一部分.没有义务实现渲染功能,但这是一个常见的约定.

每个视图都绑定到DOM的特定部分,因此您可能拥有仅侦听搜索表单的searchFormView和仅显示购物车的shoppingCartView.

视图通常也绑定到特定的模型或集合.模型更新时,会触发视图侦听的事件.视图可能会调用渲染来重绘自身.

同样,当您键入表单时,您的视图可以更新模型对象.监听该模型的每个其他视图将调用其自己的渲染功能.

这使我们能够清晰地分离关注点,使我们的代码保持整洁.

渲染功能

您可以以任何您认为合适的方式实现渲染功能.你可以在这里放一些jQuery来手动更新DOM.

您也可以编译模板并使用它.模板只是一个带插入点的字符串.您将它与JSON对象一起传递给编译函数,然后返回一个可以插入DOM的编译字符串.

集合

您还可以访问存储模型列表的集合,因此todoCollection将是todo模型的列表.当集合获得或丢失模型,更改其顺序或集合更新中的模型时,整个集合将触发事件.

视图可以监听集合,并在集合更新时自行更新.

您可以向集合中添加排序和过滤方法,并使其自动排序,例如.

和事件将它们结合在一起

应用程序组件尽可能地彼此分离.他们使用事件进行通信,因此shoppingCartView可能会侦听shoppingCart集合,并在添加购物车时重绘自己.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

当然,其他对象也可能正在监听shoppingCart,并且可能会执行其他操作,例如更新总计或将状态保存在本地存储中.

• 视图侦听模型并在模型更改时进行渲染.
• 当集合中的项目发生更改时,视图会侦听集合并呈现列表(或网格或地图等).
• 模型可以监听视图,因此可以在编辑表单时更改状态.

像这样解耦你的对象并使用事件进行通信意味着你永远不会纠缠在一起,并且添加新的组件和行为很容易.您的新组件只需要监听系统中已有的其他对象.

约定

为Backbone编写的代码遵循一套松散的约定.DOM代码属于View.集合代码属于集合.业务逻辑进入模型.另一位开发代码库的开发人员将能够开始运行.

总结一下

Backbone是一个轻量级库,为您的代码提供结构.组件通过事件分离并进行通信,因此您不会陷入混乱.您可以轻松扩展代码库,只需创建一个新对象并让它适当地监听现有对象即可.您的代码将更清晰,更好,更易于维护.

我的小书

我非常喜欢Backbone,所以我写了一本关于它的介绍书.你可以在这里在线阅读:http://nicholasjohnson.com/backbone-book/

我还将这些材料分解为一个简短的在线课程,你可以在这里找到:http://www.forwardadvance.com/course/backbone.您可以在大约一天内完成课程.

Answer 4

这是一个有趣的演讲:

Backbone.js的介绍

提示(来自幻灯片):

• 浏览器中的Rails？不.
• JavaScript的MVC框架？Sorta.
• 一个大肥州机器？是的!

Answer 5

Backbone.js是一个JavaScript框架,可以帮助您组织代码.它实际上是构建应用程序的主干.它不提供小部件(如jQuery UI或Dojo).

它为您提供了一组很酷的基类,您可以扩展它们以创建与服务器上的RESTful端点连接的干净JavaScript代码.

Answer 6

JQuery和Mootools只是一个包含项目许多工具的工具箱.Backbone就像您的项目的架构或主干,您可以使用JQuery或Mootools构建应用程序.

Answer 7

这是一个非常好的介绍性视频:http: //vimeo.com/22685608

如果您正在寻找有关Rails和Backbone的更多信息,Thoughtbot有这本非常好的书(不是免费的):https://workshops.thoughtbot.com/backbone-js-on-rails

Answer 8

我必须承认,MVC的所有"优势"从未使我的工作变得更容易,更快或更好.它只会使整个编码体验更加抽象和耗时.当试图调试别人对分离意味着什么的概念时,维护是一场噩梦.不知道有多少人试图更新使用Cairngorm作为MVC模型的FLEX站点,但更新需要30秒才能花费2个多小时(搜索/跟踪/调试只是为了查找单个事件) ).对我来说,MVC过去和现在仍然是一个"优势".