logo标签列表

backbone.js的目的是什么？

javascriptjquerybackbone.js
454

我从http://documentcloud.github.com/backbone网站试图理解backbone.js的实用性，但仍然无法弄清楚很多东西。

有人能否通过解释backbone.js如何工作以及如何在编写更好的JavaScript方面有所帮助来帮助我？

36
这是一个MVC框架，它鼓励你将数据抽象成模型，将DOM操作抽象成视图，并使用事件来将两者绑定在一起。 - Raynos
“视图”在MVC的上下文中如何处理事件？这是backbonejs.org在其介绍中所声称的。 - user656925
3
值得学习。一开始我很难入手，但是克服了学习曲线中的几个难点之后，发现其实并不太难。建议从“酒窖演示”开始。 - kmitchel46725
2
在Backbone的上下文中，视图有点像控制器。它监听DOM事件并将其适当地传递给模型。它还监听您的模型和集合的更改，并相应地重新绘制DOM。Backbone是一个MV模式，但C是隐含的。如果Backbone是Rails，那么模板将是视图，而视图将是控制器。 - superluminary
我以为这是一个 MVVM 框架，因为它实际上并没有提供控制器。 - SoluableNonagon
还有一个后续问题，Backbone框架怎么了？为什么不再流行了？毫无疑问，它比Angular更容易上手。 - slevin
15个回答
395

Backbone.js是一种超级轻量级框架，可让您以MVC（Model，View，Controller）方式构建JavaScript代码结构，其中...

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

View是该模型的HTML表示形式（视图随着模型的更改而更改等）

还有一个可选的Controller，在这种情况下，它允许您通过hashbang URL保存JavaScript应用程序的状态，例如：http://twitter.com/#search?q=backbone.js

我发现Backbone的一些优点：

  • 没有JavaScript混乱：代码经过组织并分解为语义上有意义的.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/

另外还有一个很棒的Collection类，它可以让你处理多个模型，并模拟嵌套模型，但我不想在一开始就让你感到困惑。

1
另一个有用的教程：http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/ - Jeffrey Nicholson Carré
18
这个答案是错误的。 Backbone 不是一个 MVC 框架，而是一个 MV* 框架。了解主要组件非常重要。它没有控制器。祝你好运。 - user3293653
3
重申一下，Backbone库本身没有控制器，尽管Jeremy Ashkenas曾表示View对象在某种程度上取代了它们，因为它们是JavaScript对象，拥有模型并将数据来回传递到前端。当然，你完全可以实现一个控制器、服务或者甚至是ViewModel，因为这只是JavaScript语言。 - superluminary
3
JAMMIT是什么？ - user1717828
1
回复：“jQuery.data(bla, bla): 无需在DOM中存储数据”如果我没记错，jQuery会将其存储在内存中。也就是说，它不会将data-属性设置回DOM元素。（因此，如果您的HTML在页面加载时具有data-属性，并且它们发生了更改，则DOM和内存表示将不同步 - 但您应该使用内存数据进行操作） - JoeBrockhaus
250
如果你要在浏览器中构建复杂的用户界面，那么你可能最终会发现自己发明了像Backbone.js和Sammy.js这样的框架中的大部分组件。因此问题是，在浏览器中构建的内容是否足够复杂，以至于值得使用它（这样你就不会自己发明同样的东西）。
如果你计划构建的是UI经常更改显示方式但不会去服务器获取整个新页面的内容，那么你可能需要像Backbone.js或Sammy.js这样的东西。其中一个典型的例子是Google的Gmail。如果你曾经使用过它，你会注意到它在你第一次登录时下载了一个大块的HTML、CSS和JavaScript，然后在此之后所有的事情都发生在后台。它可以在阅读邮件、处理收件箱、搜索等操作之间移动，并再次返回，而无需请求渲染一个全新的页面。
这种类型的应用程序正是这些框架擅长使其开发变得更容易的地方。如果没有它们，你要么最终将聚合一组不同的库来获得功能的部分（例如，使用jQuery BBQ进行历史管理、使用Events.js进行事件等），要么你将最终自行构建所有内容，并且还必须自行维护和测试所有内容。与之相比，像Backbone.js这样的框架在Github上有数千人关注它，有数百个人会在其上工作，以及已经在Stack Overflow上提出并回答了数百个问题。
但如果你计划构建的内容不够复杂，无法承受与框架相关的学习曲线，那么所有这些都没有任何重要性。如果你仍然正在构建PHP、Java或其他网站，其中后端服务器仍然负责按照用户请求构建Web页面，而JavaScript/jQuery仅是该过程的附带品，那么你将不需要或者还没有准备好使用Backbone.js。
21
感谢你将这与Gmail进行比较。这让我很容易就能明白，对于我正在开发的网站，我不需要进一步研究这个问题了。 - Eric Hu
15
如果你的项目足够大，最终你会发现自己需要编写类似于backbone.js的东西。这是格林斯潘第10条规则。 - Matthew Lock
如果你仅把PHP或类似的语言作为Web服务端点，那你只使用了传统请求/响应式Web开发框架的80或90％。因此，在这种应用程序和更传统的Web应用程序之间构建时存在很大差异。 - John Munsch
2
谢谢John的回答，非常启发人。 - sushil bharwani
2
Gmail的参考资料真正开拓了我的视野。谢谢！ - T.Kaukoranta
非常感谢，我认为在大多数情况下，人们需要的只是像PHP/Rails这样的普通开发方式！粗略地应用Backbone只会让事情变得更加困难和复杂。 - 尤川豪
97

Backbone是什么？

Backbone是一个非常小的组件库，可以帮助你组织代码。它被打包成一个JavaScript文件。除去注释，它不到1000行实际的JavaScript代码。它的代码编写得很合理，你可以在几个小时内阅读整个库。

它是一个前端库，你可以使用script标签将其包含在网页中。它只影响浏览器，并且对于服务器没有太多要求，除了最好暴露出一个restful API。

如果你有一个API，Backbone有一些有用的功能，可以帮助你与之通信，但你也可以使用Backbone为任何静态HTML页面添加交互性。

Backbone适用于哪些场景？

...给JavaScript添加结构。

因为JavaScript不强制执行任何特定的模式，JavaScript应用程序很快就会变得非常混乱。任何在JavaScript中构建超出平凡的东西的人都可能遇到这样的问题：

  1. 我的数据将存储在哪里？
  2. 我的函数将放在哪里？
  3. 如何将我的函数连接在一起，以便它们被合理地调用并且不会变成混乱的代码？
  4. 如何使这段代码易于不同开发人员维护？

Backbone试图通过提供以下内容来回答这些问题：

  • 模型和集合，帮助您表示数据和数据集。
  • 视图，帮助您在数据更改时更新DOM。
  • 事件系统，使组件可以相互监听。这使得组件解耦并防止混乱的代码。
  • 最少量的明智约定，使开发人员可以在同一代码库上共同工作。

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

Backbone是轻量级的

尽管初始外观可能不是那么轻巧，但Backbone非常轻量级，它几乎什么都不做。它所做的事情非常有帮助。

它给你一组小对象，你可以创建并使其发出事件并相互监听。例如，您可以创建一个代表评论的小对象，然后再创建一个commentView小对象来表示在浏览器中特定位置显示评论。您可以告诉commentView监听评论，并在评论更改时重新绘制自己。即使在页面上多个位置显示同一评论，所有这些视图都可以同时监听相同的评论模型并保持同步。
通过这种组合代码的方式，即使代码库变得非常大且交互很多，也有助于避免缠结。

模型

当开始编程时，通常将数据存储在全局变量或DOM中的数据属性中。这两者都存在问题。全局变量可能会相互冲突，而且通常是不好的形式。存储在DOM中的数据属性只能是字符串，您需要解析它们并再次解析出来。难以存储诸如数组、日期或对象之类的东西，并以结构化形式解析数据。 数据属性看起来像这样：
<p data-username="derek" data-age="42"></p>

Backbone通过提供一个Model对象来解决这个问题，以表示您的数据和相关方法。比如说你有一个待办事项列表，你会有一个代表列表上每个项目的模型。
当您的模型更新时，它会触发一个事件。您可能会有一个与特定对象绑定的视图。该视图监听模型更改事件并重新渲染自身。
视图：Backbone为您提供了与DOM交互的View对象。所有操作DOM或监听DOM事件的函数都在此处。
视图通常实现一个render函数，它重新绘制整个视图或可能部分视图。没有义务实现渲染函数，但这是一个常见的约定。
每个视图都绑定到DOM的特定部分，因此您可能有一个searchFormView，它只监听搜索表单，以及一个shoppingCartView，它只显示购物车。
视图通常也绑定到特定的Models或Collections。当Model更新时，它会触发一个事件，视图会监听该事件。视图可能会调用render来重新绘制自己。
同样，当您输入表单时，您的视图可以更新一个模型对象。每个监听该模型的其他视图将调用其自己的渲染函数。

这使我们的代码保持整洁有序，实现了关注点的清晰分离。

渲染函数

您可以按任何您认为合适的方式实现您的渲染函数。您可能仅需在此处放置一些jQuery来手动更新DOM。

您也可以编译模板并使用它。模板只是一个带有插入点的字符串。您将其与JSON对象一起传递给编译函数，并获得编译后的字符串，然后可以将其插入到DOM中。

集合

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

视图可以侦听集合并在集合更新时更新自身。

您可以向集合添加排序和过滤方法，并使其自动进行排序。

事件将所有内容联系在一起

尽可能地，应用程序组件之间解耦。它们使用事件进行通信，因此shoppingCartView可能会监听shoppingCart集合，并在添加购物车时重新绘制自身。
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

当然，其他对象也可能在监听shoppingCart事件，并进行其他操作，例如更新总数或将状态保存到本地存储中。
视图监听模型的变化并在模型更改时进行渲染。
视图监听集合的变化并在集合中的项目更改时进行列表（或网格、地图等）渲染。
模型监听视图以便在表单被编辑时更改状态。
通过这种方式解耦对象并使用事件通信意味着您永远不会陷入混乱之中，并且添加新组件和行为也很容易。您的新组件只需要监听系统中已经存在的其他对象即可。
Backbone编写的代码遵循一系列松散的约定。DOM代码属于View，集合代码属于Collection，业务逻辑放在Model中。另一个开发人员接手您的代码库后可以快速上手。
总之
Backbone是一个轻量级的库，为您的代码提供结构。组件是解耦的，并通过事件进行通信，因此您不会陷入混乱。您可以通过创建一个新对象并使其适当地监听现有对象来轻松扩展您的代码库。您的代码将更加清洁、美观和易于维护。
我的小书 我非常喜欢Backbone，所以我写了一本简短的介绍书。您可以在这里在线阅读：http://nicholasjohnson.com/backbone-book/ 我还将材料分成了一个简短的在线课程，您可以在此处（存档）找到它。您可以在大约一天的时间内完成课程。
1
这是真的 - 特别是因为它是JavaScript，边界有点虚幻 - 如果你想不当地越过它们，你可以。当我第一次从更严格的语言和MV(c/*)框架中学习backbone时，这是学习示例时最大的障碍之一。 - JoeBrockhaus
3
@superluminary 真的很有帮助！ - Anto Varghese
3
这本书非常有帮助。感谢您写下它。 - mc9
1
很棒的解释，点赞！ - Kaushil Rambhia
1
这是我在这个网站看到的最好的解释。非常感谢 :) :) - Mahi
显示剩余7条评论
32

以下是一份有趣的演示文稿：

Backbone.js简介

提示（来自幻灯片）：

  • 在浏览器中使用Rails？不可以。
  • JavaScript的MVC框架？有点像。
  • 一个庞大的状态机？是的！
14

Backbone.js是一个JavaScript框架，帮助您组织代码。它实际上是您构建应用程序的骨架。它不提供小部件（如jQuery UI或Dojo）。

它为您提供一组酷炫的基础类，您可以扩展这些类来创建干净的JavaScript代码，并与服务器上的RESTful端点进行交互。

我在我的项目中大量使用jQuery、mootools和一般的JavaScript。学习backbone.js会对我有什么帮助？什么是Restful端点？如果我的问题不太清楚，请见谅。 - sushil bharwani
1
jQuery主要用于DOM操作，而Backbone则广泛用作事件驱动框架以及数据建模。 - RobertPitt
14

JQuery和Mootools只是一个工具箱，拥有很多你项目需要的工具。Backbone则像一个架构或者一个脊梁骨，你可以在上面使用JQuery或Mootools来构建应用程序。

其实很容易出现误解，认为名称只是名称，例如 'jquery' 可能意味着 'javascript query'，但本例中它确实字面含义就是“骨干” :) - msanjay
11
11

我必须承认，MVC的所有"优点"从未使我的工作更轻松、更快或更好。它只是让整个编码体验更抽象和耗费时间。当尝试调试别人对分离概念的构想时，维护是一场噩梦。不知道你们中有多少人曾经尝试过更新使用Cairngorm作为MVC模型的FLEX网站，但是本应只需30秒即可完成的更新通常需要花费超过2个小时（寻找/追踪/调试，只为找到一个单一事件）。对我来说，MVC过去和现在仍然是一个可以抛弃的"优点"。

2
说实话，任何框架结构都可能被无知的程序员或者根本不在乎的程序员所破坏和扭曲。我曾经参与过一个应该非常简单明了的CodeIgniter网站的开发工作。但是那个白痴程序员太习惯于用90年代的方式做事情，把它从一个干净的面向对象编程方法变成了一个变形的过程式编程方法。 - Patrick
9
我曾经见过有人从零开始编写网站，并且在没有使用任何框架的情况下写得非常出色。其中一次是由一个相对新手的PHP程序员完成的。他恰好拥有一个非常理性的思维方式，找到了一种相当熟练的实现方法。使用好的框架只能让你走得更远一些，而使用优秀的编程实践则可以让你进入未来数年的世界。 - Patrick
2
@user1415445：你的意思基本上是说，一个单一的类来处理数据逻辑、渲染逻辑以及呈现层小部件与数据存储/检索代码之间的通信比由单独的类/对象处理每个这些问题更容易维护。这很难相信。除非你能演示一个非平凡的应用程序，分别使用MVC和非MVC编写，证明其非MVC版本更容易维护等。 - Behrang
1
任何超越琐碎的应用程序理想情况下都需要一种模式，而MVC是处理数据呈现时的优秀模式。听起来你有过不好的经历，但这并不是模式的错。 - superluminary
文档始终是缺失的罗塞塔石头，无论使用什么样的模式和实践，因为它们随着时间的推移而改变。像 MVC 这样的模式的美妙之处在于，一旦你理解了管道，你就不必每次添加新功能或更新旧功能时都浪费时间写管道。所以，是的，直到你理解了管道，它将是徒劳的练习。确保未来未知开发人员足够理解的唯一方法是遵循足够合理的标准并且文档编写清晰详细。维护和理解某人的代码混乱是不更快或更容易的。 - JoeBrockhaus
3
Backbone是由Jeremy Ashkenas创建的，他也编写了CoffeeScript。作为一个JavaScript重度应用程序，Backbone负责将应用程序结构化为一个连贯的代码库。backbone唯一的依赖项Underscore.js也是DocumentCloud应用程序的一部分。
Backbone帮助开发人员在客户端Web应用程序中管理数据模型，具有与传统服务器端应用程序逻辑相同的严谨性和结构。
使用Backbone.js的其他优点包括：
  1. 把Backbone视为一个库而不是框架
  2. JavaScript现在以结构化方式组织，采用MVVM（Model-View-ViewModel）
  3. 庞大的用户社区
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接