backbone.js 的目的是什么？
我试图从其网站http://documentcloud.github.com/backbone，但我仍然无法弄清楚。
谁能帮我解释一下它是如何工作的以及它如何有助于编写更好的 JavaScript？
I tried to understand the utility of backbone.js from its site http://documentcloud.github.com/backbone, but I still couldn't figure out much.
Can anybody help me by explaining how it works and how could it be helpful in writing better JavaScript?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（15）
相信我，它是客户端的 MVC 设计模式。它会为您节省大量代码，更不用说更干净清晰的代码，更易于维护的代码。
一开始可能有点棘手，但相信我，这是一个很棒的图书馆。
Is an MVC design pattern on the client side, believe me.. It's gonna save you tons of code, not to mention a more clean and clear code, a more easy to maintain code.
Could be a little tricky at first, but believe me it's a great library.
已经有很多好的答案了。 Backbone js 有助于保持代码井井有条。更改模型/集合可以自动处理视图渲染，从而减少大量开发开销。
尽管它为开发提供了最大的灵活性，但开发人员应该小心地破坏模型并正确删除视图。否则应用程序可能会出现内存泄漏。
So many good answers already. Backbone js helps to keep the code organised. Changing the model/collection takes care of the view rendering automaticallty which reduces lot of development overhead.
Even though it provides maximum flexibility for development, developers should be careful to destroy the models and remove the views properly. Otherwise there may be memory leak in the application.
涉及大量用户与许多 AJAX 请求交互、需要不时更改且实时运行的 Web 应用程序（例如 Facebook 或 StackOverflow）应该使用 MVC 框架，例如 Backbone.js。这是构建良好代码的最佳方式。
如果应用程序很小，那么 Backbone.js 就太过分了，尤其是对于初次使用的用户。
Backbone 为您提供客户端 MVC 以及由此带来的所有优势。
A web application involving lot of user interaction with many AJAX requests, which needs to be changed from time to time, and which runs in real time (such as Facebook or StackOverflow) ought to use an MVC framework such as Backbone.js. It's the best way to build good code.
If the application is only small though, then Backbone.js is overkill, especially for first time users.
Backbone gives you client side MVC, and all the advantages implied by this.
Backbone.js 基本上是一个超轻型框架，允许您以 MVC（模型、视图、控制器）方式构建 Javascript 代码，其中...
模型是其中的一部分在检索和填充数据的代码中，
View 是该模型的 HTML 表示形式（视图随着模型更改等而更改），
以及在本例中允许使用的可选 Controller您可以通过 hashbang URL 保存 Javascript 应用程序的状态，例如： http://twitter .com/#search?q=backbone.js
我发现 Backbone 的一些优点：
不再有 Javascript Spaghetti：代码被组织并分解为语义上有意义的 .js 文件，然后使用 JAMMIT 组合这些文件< /p>
不再有
jQuery.data(bla, bla)：无需将数据存储在 DOM 中，将数据存储在模型中事件绑定正常工作
非常有用的Underscore 实用程序库
backbone.js 代码有详细记录，值得一读。让我看到了许多 JS 代码技术。
缺点：
这里有一组关于使用 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还有这个精彩的合集 允许您处理模型集合和模仿嵌套模型的类，但我不想从一开始就让您感到困惑。
Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in an MVC (Model, View, Controller) fashion where...
Model is part of your code that retrieves and populates the data,
View is the HTML representation of this model (views change as models change, etc.)
and optional Controller that in this case allows you to save the state of your Javascript application via a hashbang URL, for example: http://twitter.com/#search?q=backbone.js
Some pros that I discovered with Backbone:
No more Javascript Spaghetti: code is organized and broken down into semantically meaningful .js files which are later combined using JAMMIT
No more
jQuery.data(bla, bla): no need to store data in DOM, store data in models insteadevent binding just works
extremely useful Underscore utility library
backbone.js code is well documented and a great read. Opened my eyes to a number of JS code techniques.
Cons:
Here is a set of great tutorials on using Backbone with Rails as the back-end:
CloudEdit: A Backbone.js Tutorial with Rails:
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. There is also this wonderful Collection class that lets you deal with collections of models and mimic nested models, but I don't want to confuse you from the start.
如果您要在浏览器中构建复杂的用户界面，那么您可能会发现自己最终发明了构成 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。
If you're going to build complex user interfaces in the browser then you will probably find yourself eventually inventing most of the pieces that make up frameworks like Backbone.js and Sammy.js. So the question is, are you building something complicated enough in the browser to merit using it (so you don't end up inventing the same thing yourself).
If what you plan to build is something where the UI regularly changes how it displays but does not go to the server to get entire new pages then you probably need something like Backbone.js or Sammy.js. The cardinal example of something like that is Google's GMail. If you've ever used it you'll notice that it downloads one big chunk of HTML, CSS, and JavaScript when you first log in and then after that everything happens in the background. It can move between reading an email and processing the inbox and searching and back through all of them again without ever asking for a whole new page to be rendered.
It's that kind of app that these frameworks excel at making easier to develop. Without them you'll either end up glomming together a diverse set of individual libraries to get parts of the functionality (for example, jQuery BBQ for history management, Events.js for events, etc.) or you'll end up building everything yourself and having to maintain and test everything yourself as well. Contrast that with something like Backbone.js that has thousands of people watching it on Github, hundreds of forks where people may be working on it, and hundreds of questions already asked and answered here on Stack Overflow.
But none of it is of any importance if what you plan to build is not complicated enough to be worth the learning curve associated with a framework. If you're still building PHP, Java, or something else sites where the back end server is still doing all the heavy lifting of building the web pages upon request by the user and JavaScript/jQuery is just icing upon that process, you aren't going to need or are not yet ready for Backbone.js.
Backbone 是...
...一个非常小的组件库，您可以使用它来帮助组织您的代码。它打包为单个 JavaScript 文件。除去注释，它的实际 JavaScript 代码不到 1000 行。它写得很明智，你可以在几个小时内读完整本书。
它是一个前端库，您可以使用脚本标签将其包含在网页中。它只影响浏览器，对你的服务器几乎没有影响，只是它应该理想地公开一个restful API。
如果您有 API，Backbone 有一些有用的功能可以帮助您与其交互，但您可以使用 Backbone 向任何静态 HTML 页面添加交互性。
Backbone 用于...
...向 JavaScript 添加结构。
由于 JavaScript 不强制执行任何特定模式，因此 JavaScript 应用程序很快就会变得非常混乱。任何用 JavaScript 构建过一些不重要的东西的人都可能会遇到这样的问题：
Backbone 试图通过为您提供以下内容来回答这些问题：
我们称之为 MV* 模式。模型、视图和可选附件。
Backbone 很轻
尽管最初出现，Backbone 却非常轻，它几乎什么也不做。它所做的事情非常有帮助。
它为您提供了一组可以创建的小对象，它们可以发出事件并相互监听。例如，您可以创建一个小对象来表示评论，然后创建一个小 commentView 对象来表示浏览器中特定位置的评论显示。
你可以告诉commentView监听评论并在评论改变时重绘自己。即使您在页面上的多个位置显示相同的评论，所有这些视图也可以听取相同的评论模型并保持同步。
即使您的代码库由于许多交互而变得非常大，这种编写代码的方式也有助于防止您陷入困境。
模型
刚开始时，通常将数据存储在全局变量中，或者以 数据属性。这两个都有问题。全局变量可能会相互冲突，并且通常是不好的形式。存储在 DOM 中的数据属性只能是字符串，你必须再次解析它们。存储数组、日期或对象等内容以及以结构化形式解析数据很困难。
数据属性如下所示：
Backbone 通过提供模型对象来表示数据和关联方法来解决此问题。假设您有一个待办事项列表，您将有一个代表该列表中每个项目的模型。
当您的模型更新时，它会触发一个事件。您可能有一个与该特定对象相关的视图。该视图侦听模型更改事件并重新呈现自身。
Views
Backbone 为您提供了与 DOM 交互的 View 对象。所有操作 DOM 或监听 DOM 事件的函数都位于此处。
视图通常实现重绘整个视图或可能部分视图的渲染函数。没有义务实现渲染函数，但这是一个常见的约定。
每个视图都绑定到 DOM 的特定部分，因此您可能有一个 searchFormView（仅侦听搜索表单）和一个 shoppingCartView（仅显示购物车）。
视图通常也绑定到特定的模型或集合。当模型更新时，它会触发视图侦听的事件。视图可能会调用 render 来重绘自身。
同样，当您在表单中键入内容时，您的视图可以更新模型对象。然后，侦听该模型的每个其他视图都将调用其自己的渲染函数。
这为我们提供了清晰的关注点分离，使我们的代码保持整洁。
渲染函数
您可以按照您认为合适的任何方式实现渲染函数。您可以在这里放置一些 jQuery 来手动更新 DOM。
您还可以编译一个模板并使用它。模板只是一个带有插入点的字符串。您将它与 JSON 对象一起传递给编译函数，并返回一个编译后的字符串，您可以将其插入到 DOM 中。
集合
您还可以访问存储模型列表的集合，因此 todoCollection 将是 todo 模型的列表。当集合获得或丢失模型、更改其顺序或集合中的模型更新时，整个集合都会触发一个事件。
视图可以监听集合并在集合更新时自行更新。
例如，您可以向集合添加排序和过滤方法，并使其自动排序。
以及将它们联系在一起的事件
应用程序组件尽可能地相互解耦。它们使用事件进行通信，因此 shoppingCartView 可能会侦听 shoppingCart 集合，并在添加购物车时重绘自身。
当然，其他对象也可能正在侦听 shoppingCart，并且可能执行其他操作，例如更新总数或将状态保存在本地存储中。
像这样解耦你的对象并使用事件进行通信意味着你永远不会陷入困境，并且添加新的组件和行为很容易。您的新组件只需监听系统中已有的其他对象即可。
约定
为 Backbone 编写的代码遵循一组松散的约定。 DOM 代码属于视图。集合代码属于集合。业务逻辑位于模型中。另一个开发人员拿起您的代码库将能够立即开始运行。
总而言之，
Backbone 是一个轻量级库，可为您的代码提供结构。组件是解耦的并通过事件进行通信，因此您不会陷入混乱。您可以轻松扩展代码库，只需创建一个新对象并让它适当地监听现有对象即可。您的代码将会更干净、更好、更易于维护。
我的小书
我非常喜欢 Backbone，所以我写了一本关于它的小介绍书。您可以在这里在线阅读：http://nicholasjohnson.com/backbone-book/
我也将材料分解为一个简短的在线课程，您可以找到该课程 此处（已存档）。您可以在大约一天内完成该课程。
Backbone is...
...a very small library of components which you can use to help organise your code. It comes packaged as a single JavaScript file. Excluding comments, it has less than 1000 lines of actual JavaScript. It's sensibly written and you can read the whole thing in a couple of hours.
It's a front-end library, you include it in your web page with a script tag. It only affects the browser, and says little about your server, except that it should ideally expose a restful API.
If you have an API, Backbone has a few helpful features that will help you talk to it, but you can use Backbone to add interactivity to any static HTML page.
Backbone is for...
...adding structure to JavaScript.
Because JavaScript doesn't enforce any particular patterns, JavaScript applications can become very messy very quickly. Anyone who has built something beyond trivial in JavaScript will have likely run up against questions such as:
Backbone seeks to answer these questions by giving you:
We call this an MV* pattern. Models, Views and optional extras.
Backbone is light
Despite initial appearances, Backbone is fantastically light, it hardly does anything at all. What it does do is very helpful.
It gives you a set of little objects which you can create, and which can emit events and listen to each other. You might create a little object to represent a comment for example, and then a little commentView object to represent the display of the comment in a particular place in the browser.
You can tell the commentView to listen to the comment and redraw itself when the comment changes. Even if you have the same comment displayed in several places on your page all these views can listen to the same comment model and stay in sync.
This way of composing code helps to keep you from getting tangled even if your codebase becomes very large with many interactions.
Models
When starting out, it's common to store your data either in a global variable, or in the DOM as data attributes. Both of these have issues. Global variables can conflict with each other, and are generally bad form. Data attributes stored in the DOM can only be strings, you will have to parse them in and out again. It's difficult to store things like arrays, dates or objects, and to parse your data in a structured form.
Data attributes look like this:
Backbone solves this by providing a Model object to represent your data and associated methods. Say you have a todo list, you would have a model representing each item on that list.
When your model is updated, it fires an event. You might have a view tied to that particular object. The view listens for model change events and re-renders itself.
Views
Backbone provides you with View objects that talk to the DOM. All functions that manipulate the DOM or listen for DOM events go here.
A View typically implements a render function which redraws the whole view, or possibly part of the view. There's no obligation to implement a render function, but it's a common convention.
Each view is bound to a particular part of the DOM, so you might have a searchFormView, that only listens to the search form, and a shoppingCartView, that only displays the shopping cart.
Views are typically also bound to specific Models or Collections. When the Model updates, it fires an event which the view listens to. The view might them call render to redraw itself.
Likewise, when you type into a form, your view can update a model object. Every other view listening to that model will then call its own render function.
This gives us a clean separation of concerns that keeps our code neat and tidy.
The render function
You can implement your render function in any way you see fit. You might just put some jQuery in here to update the DOM manually.
You might also compile a template and use that. A template is just a string with insertion points. You pass it to a compile function along with a JSON object and get back a compiled string which you can insert into your DOM.
Collections
You also have access to collections which store lists of models, so a todoCollection would be a list of todo models. When a collection gains or loses a model, changes its order, or a model in a collection updates, the whole collection fires an event.
A view can listen to a collection and update itself whenever the collection updates.
You could add sort and filter methods to your collection, and make it sort itself automatically for example.
And Events to Tie It All Together
As much as possible, application components are decoupled from each other. They communicate using events, so a shoppingCartView might listenTo a shoppingCart collection, and redraw itself when the cart is added to.
Of course, other objects might also be listening to the shoppingCart as well, and might do other things like update a total, or save the state in local storage.
Decoupling your objects like this and communicating using events means that you'll never get tangled in knots, and adding new components and behaviour is easy. Your new components just have to listen to the other objects already in the system.
Conventions
Code written for Backbone follows a loose set of conventions. DOM code belongs in a View. Collection code belongs in a Collection. Business logic goes in a model. Another developer picking up your codebase will be able to hit the ground running.
To sum up
Backbone is a lightweight library that lends structure to your code. Components are decoupled and communicate via events so you won't end up in a mess. You can extend your codebase easily, simply by creating a new object and having it listen to your existing objects appropriately. Your code will be cleaner, nicer, and more maintainable.
My little book
I liked Backbone so much that I wrote a little intro book about it. You can read it online here: http://nicholasjohnson.com/backbone-book/
I also broke the material down into a short online course, which you can find here (archived). You can complete the course in about a day.
这是一个有趣的演示：
Backbone.js 简介
提示（来自幻灯片）：
Here's an interesting presentation:
An intro to Backbone.js
Hint (from the slides):
Backbone.js 是一个 JavaScript 框架，可帮助您组织代码。它实际上是您构建应用程序的支柱。它不提供小部件（如 jQuery UI 或 Dojo）。
它为您提供了一组很酷的基类，您可以扩展它们来创建与服务器上的 RESTful 端点交互的干净的 JavaScript 代码。
Backbone.js is a JavaScript framework that helps you organize your code. It is literally a backbone upon which you build your application. It doesn't provide widgets (like jQuery UI or Dojo).
It gives you a cool set of base classes that you can extend to create clean JavaScript code that interfaces with RESTful endpoints on your server.
JQuery 和 Mootools 只是一个工具箱，其中包含您项目的许多工具。 Backbone 就像项目的架构或主干，您可以在其上使用 JQuery 或 Mootools 构建应用程序。
JQuery and Mootools are just a toolbox with lot of tools of your project. Backbone acts like an architecture or a backbone for your project on which you can build an application using JQuery or Mootools.
这是一个非常好的介绍视频：
http://vimeo.com/22685608
如果您正在寻找有关 Rails 和 Backbone 的更多信息，Thoughtbot 有这个不错的选择书（非免费）：
https://workshops.thoughtbot.com/backbone-js-on-rails
This is a pretty good introductory video:
http://vimeo.com/22685608
If you are looking for more on Rails and Backbone, Thoughtbot has this pretty good book (not free):
https://workshops.thoughtbot.com/backbone-js-on-rails
我不得不承认，MVC 的所有“优点”从未让我的工作变得更轻松、更快或更好。它只会使整个编码体验更加抽象和耗时。当试图调试别人对分离意味着什么的概念时，维护是一场噩梦。不知道你们中有多少人曾经尝试过更新使用 Cairngorm 作为 MVC 模型的 FLEX 站点，但是应该需要 30 秒才能更新的内容通常需要 2 个小时以上（搜索/跟踪/调试只是为了找到单个事件） ）。对我来说，MVC 过去是，现在仍然是一个可以填充的“优势”。
I have to admit that all the "advantages" of MVC have never made my work easier, faster, or better. It just makes the whole codeing experience more abstract and time consuming. Maintenance is a nightmare when trying to debug someone elses conception of what separation means. Don't know how many of you people have ever tried to update a FLEX site that used Cairngorm as the MVC model but what should take 30 seconds to update can often take over 2 hours (hunting/tracing/debugging just to find a single event). MVC was and still is, for me, an "advantage" that you can stuff.
这是我在 BackboneJS 上写的一篇快速入门文章。希望有帮助！
http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx
Here's a quick Get Started post I wrote on BackboneJS. Hope it helps!
http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx
Backbone 由 Jeremy Ashkenas 创建，他也是 CoffeeScript 的编写者。作为一个大量使用 JavaScript 的应用程序，我们现在所知的 Backbone 负责将应用程序构建为一个连贯的代码库。 Underscore.js 是主干网的唯一依赖项，也是 DocumentCloud 应用程序的一部分。
Backbone 帮助开发人员在其客户端 Web 应用程序中管理数据模型，其规则和结构与传统服务器端应用程序逻辑一样多。
使用 Backbone.js 的其他好处
Backbone was created by Jeremy Ashkenas who also wrote CoffeeScript. As a JavaScript-heavy application, what we now know as Backbone was responsible for structuring the application into a coherent code base. Underscore.js, backbone's only dependency, was also part of the DocumentCloud application.
Backbone helps developers manage a data model in their client-side web app with as much discipline and structure as you would get in traditional server-side application logic.
Additional benefits of using Backbone.js
backbone.js 是使用 JavaScript 的模型-视图-控制器 (MVC)
但是Extjs（已存档）比 Java 脚本的 MVC 模式主干更好
有了主干，您几乎可以自由地做任何您想做的事情。我不会尝试分叉 api 并进行自定义，而是使用 Backbonejs，因为它简单且易于实现。同样，很难说您需要两个中的一个，一个是库，另一个是组件
backbone.js is Model-View-Controller (MVC) with JavaScript
but Extjs (archived) better than backbone for MVC Pattern by java script
With backbone you got freedom to do almost anything you wish for. Rather than trying to fork through the api and customize I would use Backbonejs for it's simplicity and ease of implementation. Again it is hard to say what you require out of the two one is a library another a component
它还使用 KVO 控制器和视图添加路由。您将能够用它开发“AJAXy”应用程序。
将其视为轻量级 Sproutcore 或 Cappuccino 框架。
It also adds routing using controllers and views with KVO. You'll be able to develop "AJAXy" applications with it.
See it as a lightweight Sproutcore or Cappuccino framework.