我试图从其网站http://documentcloud.github.com/backbone上了解backbone.js的实用功能,但我仍然搞不懂太多。
谁能帮我解释一下它是如何工作的,以及它如何有助于编写更好的JavaScript?
我试图从其网站http://documentcloud.github.com/backbone上了解backbone.js的实用功能,但我仍然搞不懂太多。
谁能帮我解释一下它是如何工作的,以及它如何有助于编写更好的JavaScript?
当前回答
是一个MVC设计模式在客户端,相信我。这将为你节省大量的代码,更不用说更干净清晰的代码,更容易维护的代码。 一开始可能有点棘手,但相信我,这是一个很棒的图书馆。
其他回答
js是一个帮助你组织代码的JavaScript框架。它实际上是构建应用程序的基础。它不提供小部件(如jQuery UI或Dojo)。
它为您提供了一组很酷的基类,您可以扩展这些基类来创建与服务器上RESTful端点接口的干净JavaScript代码。
它还添加了使用KVO控制器和视图的路由。您将能够使用它开发“AJAXy”应用程序。
可以把它看作是一个轻量级的Sproutcore或Cappuccino框架。
js基本上是一个超轻的框架,它允许你以MVC(模型,视图,控制器)的方式构建你的Javascript代码。
模型是检索和填充数据的代码的一部分,
视图是这个模型的HTML表示(视图随着模型的改变而改变,等等)。
和可选的控制器,在这种情况下,它允许您通过hashbang URL保存Javascript应用程序的状态,例如:http://twitter.com/#search?q=backbone.js
我发现了Backbone的一些优点:
不再有Javascript面条:代码被组织并分解成语义上有意义的.js文件,然后使用JAMMIT进行组合 不再使用jQuery。data(bla, bla):不需要在DOM中存储数据,而是将数据存储在模型中 事件绑定可以正常工作 非常有用的下划线实用程序库 js的代码有很好的文档,值得一读。让我看到了很多JS代码技术。
缺点:
我花了一段时间来思考如何将它应用到我的代码中,但我是一个Javascript新手。
下面是一组关于使用Backbone和Rails作为后端的很棒的教程:
CloudEdit:一个Backbone.js教程与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/
附注:还有一个很棒的Collection类,它可以让您处理模型的集合并模拟嵌套模型,但我不想从一开始就把您弄糊涂。
骨干是……
...一个非常小的组件库,你可以用来帮助组织你的代码。它被打包成一个JavaScript文件。除去注释,它的实际JavaScript代码不到1000行。它写得很合理,你可以在几个小时内读完整本书。
它是一个前端库,你用一个脚本标签把它包含在你的网页中。它只影响浏览器,很少涉及服务器,除了理想情况下它应该公开一个restful API。
如果您有一个API, Backbone有一些有用的特性可以帮助您与它对话,但是您可以使用Backbone向任何静态HTML页面添加交互性。
骨干是用来…
...为JavaScript添加结构。
因为JavaScript不强制执行任何特定的模式,所以JavaScript应用程序很快就会变得非常混乱。任何用JavaScript构建过一些非常简单的东西的人都可能会遇到这样的问题:
我将在哪里存储数据? 我要把函数放在哪里? 我将如何将我的函数连接在一起,以合理的方式调用它们,而不是变成意大利面条? 如何让不同的开发人员可以维护这些代码?
Backbone试图回答这些问题,为您提供:
模型和集合帮助您表示数据和数据的集合。 视图,以帮助您在数据更改时更新DOM。 事件系统,以便组件可以相互侦听。这样可以使组件解耦合并防止面条化。 合理约定的最小集合,因此开发人员可以在相同的代码库上一起工作。
我们称之为MV*模式。模型,视图和可选的额外功能。
骨气轻
尽管最初的样子,Backbone非常轻,但它几乎什么都不做。它所做的是非常有用的。
它提供给你一组你可以创建的小对象,它们可以发出事件并相互监听。例如,您可以创建一个小对象来表示注释,然后创建一个小commentView对象来表示注释在浏览器中特定位置的显示。
您可以告诉commentView监听注释并在注释更改时重新绘制自己。即使您在页面的多个位置显示了相同的注释,所有这些视图也可以侦听相同的注释模型并保持同步。
这种编写代码的方式可以帮助您避免陷入混乱,即使您的代码库因许多交互而变得非常大。
模型
开始时,通常将数据存储在全局变量中,或作为数据属性存储在DOM中。这两种方法都有问题。全局变量之间可能会发生冲突,并且通常形式不好。存储在DOM中的数据属性只能是字符串,您将不得不再次解析它们。存储数组、日期或对象之类的东西,以及以结构化形式解析数据是很困难的。
数据属性是这样的:
<p data-username="derek" data-age="42"></p>
Backbone通过提供一个Model对象来表示数据和相关方法来解决这个问题。假设你有一个待办事项列表,你将有一个模型来表示列表上的每一项。
当您的模型更新时,它会触发一个事件。你可能有一个绑定到特定对象的视图。视图监听模型更改事件并重新呈现自身。
的观点
Backbone为您提供了与DOM对话的View对象。所有操作DOM或监听DOM事件的函数都在这里。
视图通常实现一个渲染函数,该函数可以重绘整个视图,或者可能是视图的一部分。没有义务实现一个呈现函数,但这是一个常见的约定。
每个视图都绑定到DOM的特定部分,因此您可能有一个searchFormView,它只侦听搜索表单,还有一个shoppingCartView,它只显示购物车。
视图通常也绑定到特定的模型或集合。当Model更新时,它会触发视图侦听的事件。视图可能会调用渲染来重绘自己。
同样,当您在表单中输入时,视图可以更新模型对象。所有其他视图都会监听这个模型,然后调用它自己的渲染函数。
这给了我们一个清晰的关注点分离,使我们的代码保持整洁。
渲染函数
你可以用任何你认为合适的方式来实现你的渲染函数。您可以在这里放入一些jQuery来手动更新DOM。
您还可以编译一个模板并使用它。模板只是一个带有插入点的字符串。您将它与JSON对象一起传递给编译函数,并获得一个编译后的字符串,可以将其插入到DOM中。
集合
您还可以访问存储模型列表的集合,因此todoCollection将是todo模型的列表。当集合获得或丢失模型、更改其顺序或更新集合中的模型时,整个集合将触发一个事件。
视图可以侦听集合并在集合更新时更新自身。
例如,您可以向集合添加排序和筛选方法,并使其自动排序。
以及将其联系在一起的事件
应用程序组件尽可能地相互解耦。它们使用事件进行通信,因此shoppingCartView可能监听shoppingCart集合,并在购物车被添加到其中时重绘自身。
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
当然,其他对象也可能侦听shoppingCart,并可能执行其他操作,如更新总数,或将状态保存在本地存储中。
视图监听模型,并在模型发生变化时进行渲染。 视图侦听集合并在集合中的项发生变化时呈现列表(或网格或地图等)。 模型侦听视图,以便它们可以更改状态,也许是在编辑表单时。
像这样解耦对象并使用事件进行通信意味着您永远不会陷入困境,并且添加新组件和行为也很容易。您的新组件只需要侦听系统中已经存在的其他对象。
约定
为Backbone编写的代码遵循一组松散的约定。DOM代码属于视图。集合代码属于集合。业务逻辑放在模型中。另一个开发人员继承了您的代码库,将能够开始运行。
总结一下
Backbone是一个轻量级库,可以为代码提供结构。组件是分离的,并通过事件进行通信,因此您不会陷入混乱。您可以轻松地扩展代码库,只需创建一个新对象并让它适当地侦听现有对象即可。您的代码将更干净、更好、更可维护。
我的小书
我非常喜欢骨气,还专门写了一本介绍骨气的书。你可以在线阅读:http://nicholasjohnson.com/backbone-book/
我还把这些材料分解成一个简短的在线课程,你可以在这里找到(存档)。你可以在一天内完成课程。
已经有这么多好答案了。Backbone js有助于保持代码的组织性。更改模型/集合可以自动处理视图渲染,从而减少了大量的开发开销。
尽管它为开发提供了最大的灵活性,但开发人员应该小心地销毁模型并正确地删除视图。否则,应用程序中可能会出现内存泄漏。