backbone.js的目的是什么?

时间:2011-03-24 11:26:57

标签: javascript jquery backbone.js

我试图从其网站http://documentcloud.github.com/backbone了解backbone.js的效用,但我仍然想不出多少。

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

15 个答案:

答案 0 :(得分:384)

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

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

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

和可选的控制器,在这种情况下,您可以通过hashbang网址保存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/

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

答案 1 :(得分:248)

如果您要在浏览器中构建复杂的用户界面,那么您可能会发现自己最终发明了构成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。

答案 2 :(得分:93)

Backbone是......

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

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

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

Backbone用于......

...向JavaScript添加结构。

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

  1. 我将在哪里存储数据?
  2. 我将把我的功能放在哪里?
  3. 我如何将我的功能连接在一起,以便以明智的方式调用它们而不转向意大利面?
  4. 如何让不同开发人员维护此代码?
  5. Backbone试图通过以下方式回答这些问题:

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

    我们称之为MV *模式。模型,视图和可选附件。

    骨干很轻

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

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

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

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

    模型

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

    数据属性如下所示:

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

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

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

    浏览

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

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

    每个视图都绑定到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。您可以在大约一天内完成课程。

答案 3 :(得分:32)

这是一个有趣的演讲:

An intro to Backbone.js

提示(来自幻灯片):

  • 浏览器中的Rails? 即可。
  • JavaScript的MVC框架?的八九不离十即可。
  • 一个大肥州机器?的 <!/ LI>

答案 4 :(得分:14)

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

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

答案 5 :(得分:14)

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

答案 6 :(得分:11)

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

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

答案 7 :(得分:11)

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

答案 8 :(得分:4)

答案 9 :(得分:3)

backbone.js是Model-View-Controller (MVC) with JavaScript 但是Extjs比java脚本的MVC模式骨干更好

通过骨干,您可以自由地做任何您想要的事情。而不是尝试分叉api和自定义我将使用Backbonejs,因为它的简单性和易于实现。同样很难说你需要的是一个库是另一个组件

答案 10 :(得分:3)

Backbone由Jeremy Ashkenas创建,他也写过CoffeeScript。作为一个JavaScript密集型应用程序,我们现在所知的Backbone负责将应用程序构建为一个连贯的代码库。 Underscore.js,骨干网唯一的依赖项,也是DocumentCloud应用程序的一部分。

Backbone可帮助开发人员在其客户端Web应用程序中管理数据模型,其中包含与传统服务器端应用程序逻辑相同的规则结构。 / p>

使用Backbone.js的其他好处

  1. 请参阅Backbone作为库,而不是框架
  2. Javascript现在以结构化的方式组织起来,(MVVM)模型
  3. 大型用户社区

答案 11 :(得分:2)

它还使用KVO的控制器和视图添加路由。您将能够使用它开发“AJAXy”应用程序。

将其视为轻量级Sproutcore或Cappuccino框架。

答案 12 :(得分:1)

客户端是MVC设计模式,请相信我。它将为您节省大量代码,更不用说更清晰,更清晰的代码,更易于维护的代码。 起初可能有点棘手,但相信我,它是一个很棒的图书馆。

答案 13 :(得分:0)

已经有很多好的答案。 Backbone js有助于保持代码的有序性。更改模型/集合会处理视图呈现自动化,从而减少大量的开发开销。

即使它为开发提供了最大的灵活性,开发人员也应该小心破坏模型并正确删除视图。否则应用程序中可能存在内存泄漏。

答案 14 :(得分:-3)

一个涉及许多用户与许多AJAX请求交互的Web应用程序,需要不时更改,并且实时运行(如Facebook或StackOverflow)应该使用一个MVC框架,如Backbone.js 。这是构建优秀代码的最佳方式。

如果应用程序虽然很小,那么Backbone.js就太过分了,特别是对于初次使用的用户而言。

Backbone为您提供客户端MVC,以及此隐含的所有优势。