backbone.js的目的是什么?

我试图从它的网站http://documentcloud.github.com/backbone了解backbone.js的效用,但我仍然无法弄清楚。

任何人都可以通过解释它的工作原理来帮助我,它如何能够帮助我编写更好的JavaScript?


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

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

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

和可选控制器 ,在这种情况下,您可以通过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 with 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类可以让你处理模型集合和模仿嵌套模型,但是我不想从一开始就迷惑你。


    如果您打算在浏览器中构建复杂的用户界面,那么您最终可能会发现自己最终发明了组成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或其他网站,而后端服务器仍然按照用户的要求完成所有构建网页的繁重工作,并且JavaScript / jQuery只是为该流程锦上添花,不需要或尚未准备好Backbone.js。


    骨干...

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

    这是一个前端库,您可以使用脚本标记将其包含在您的网页中。 它只会影响浏览器,并且对你的服务器的描述很少,除非它理想地暴露一个restful API。

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

    骨干是为...

    ...将结构添加到JavaScript。

    由于JavaScript不执行任何特定模式,因此JavaScript应用程序可能会非常快速地变得非常混乱。 任何在JavaScript中构建超出琐碎内容的人都可能遇到以下问题:

  • 我将在哪里存储我的数据?
  • 我会在哪里放置我的功能?
  • 我将如何将我的功能连接在一起,以便以合理的方式调用它们,而不是转向意大利面条?
  • 我怎样才能让这个代码可以由不同的开发人员维护?
  • 骨干寻求回答这些问题给你:

  • 模型和集合来帮助您表示数据和数据集合。
  • 视图,帮助您在数据更改时更新DOM。
  • 事件系统,以便组件可以相互倾听。 这可以让您的组件解耦,并防止spaghettification。
  • 最小的一组明智约定,因此开发人员可以在相同的代码库上一起工作。
  • 我们称之为MV *模式。 模型,视图和可选附加组件。

    骨干很轻

    尽管最初出现,骨干是非常轻的,它几乎没有任何事情。 它所做的是非常有帮助的。

    它为您提供一组您可以创建的小对象,并可以发出事件并相互倾听。 例如,您可以创建一个小对象来表示注释,然后使用一个小的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。 您可以在一天内完成课程。

    链接地址: http://www.djcxy.com/p/2861.html

    上一篇: What is the purpose of backbone.js?

    下一篇: What is the purpose of Node.js module.exports and how do you use it?