首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Backbone.js和jQuery

Backbone.js和jQuery
EN

Stack Overflow用户
提问于 2012-03-15 15:07:48
回答 4查看 49.2K关注 0票数 81

据说Backbone处理所有更高级别的抽象,而jQuery或类似的库处理DOM、规范化事件等。

有没有人可以用一些简单的实际例子来帮助我理解这句话。

与Backbone、Knockout一样,MVC框架的一个重要特性是保持模型(数据)和视图的同步。但这似乎是在页面级别特定的,而不是跨整个应用程序。那么我们可以跨多个页面同步模型/数据和视图吗..(某种全局)

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-03-15 23:54:16

Backbone / Knockout通常用于单页应用程序。因此,虽然jQuery是一个工具箱,可以用于任何网页,但Backbone是为特定类型的应用程序而设计的,它可以帮助您组织代码。至少在我的经验中,构建单页面应用程序的最大挑战之一是保持代码的整洁和模块化,而backbone在这方面帮助很大。

一个典型的骨干app的特点是:

  • 本质上是静态的html页面,不需要在服务器上生成任何东西
  • 服务器充当一个json REST api,它为应用程序提供内容
  • 显示数据的dom元素是用javascript在主干视图中创建的,使用jQuery和各种模板库来与服务器交互以及在应用程序的不同部分之间通过主干模型

来完成。

关于你关于在多个页面上保持数据同步的问题,我的直觉回答是,你不需要多个页面:用户可能会察觉到页面正在变化,由于pushState的功能,url栏中的地址也会发生变化,但从技术上讲,整个应用程序都是一个页面。

这种方法的最大优点是流畅的用户体验(不需要重新加载页面),良好的缓存支持,因为除了json数据之外的所有内容都是静态内容,对于移动目标来说,可以将web应用程序转换为带有phoneGap的移动应用程序(因为除了json之外的所有内容都是静态的)。

票数 54
EN

Stack Overflow用户

发布于 2012-03-16 09:30:03

您的开场白实际上很好地说明了Backbone.js和jQuery之间的区别,所以让我们稍微解开一下。

首先,这两个库根本不是竞争对手--它们是互补的。

作为一个例子,下面是我将使用jQuery做的一些事情:

slideshows

  • Form动画控件增强功能,如基于类名

  • number "spinner"
  • Toggling
    • 元素可见性

以及我可能在Backbone.js中做的一些事情:

  • 创建相册,用户单击缩略图可以查看照片的放大版本,以及一些数据,如使用的相机、位置和摄影师的姓名
  • 构建主/详细类型的页面,该页面显示数据网格,并允许用户单击单个元素并在表单中更新它们。

jQuery在微观层面上表现出色--选择页面元素,消除浏览器处理事件方式的差异。

Backbone.js更具大局观。它可以帮助您管理数据和应用程序逻辑。在上面的相册示例中,Backbone提供了几个有用的结构:您应该有一些东西来包含与照片相关的所有数据(一个模型),一个相册中所有照片的列表(一个集合),以及在某个地方放置确定当用户单击缩略图时发生的事情的逻辑(视图)。这些是主干控制或应用程序中的主要部分。

不过,Backbone.js受益于jQuery或类似的东西,可以帮助将应用程序的数据和逻辑的结果呈现到DOM中。例如,通常使用jQuery来选择页面上的元素,该元素将用作主干应用程序的容器。使用jQuery的$(function () {});来启动主干控件也是很常见的。您可能还会用jQuery显示表单域验证错误消息。

您当然可以在jQuery中构建大型、复杂的用户界面。我在工作中维护的应用程序中有一些。但是它们很难使用,因为jQuery不是用来为应用程序提供结构的。特别是,jQuery的API基于选择项组,然后传递操作这些项的回调函数,不是在大型、复杂的控件或应用程序中使用的好模式。你最终得到了很多嵌套的函数,很难看到到底是怎么回事。

我目前正在用Backbone.js重新编写其中一个控件。作为最后一个例子,这里快速总结一下当我在两个不同的库中处理相同的控件时,我的思维过程有何不同。

在jQuery中,我担心:

  • 我是否使用了正确的选择器来获取所需的li元素组?
  • 当此Ajax调用完成时,我是否需要重新填充值列表?
  • 如何将这些数组值放回页面上的input元素中?

在Backbone中,我更专注于:

  • 在我的模型项上验证这组属性的正确逻辑是什么?
  • 当用户单击添加按钮时,我应该立即向集合中添加一个新项,还是应该等到他们填写完所有数据并且它是“有效”的?
  • 当我的集合中的项在删除之前或之后的项被删除时,它应该如何响应?

jQuery处理细节,而Backbone则更高级。

最后,请注意,在讨论Backbone.js示例时,我一直在使用“控制”和“应用程序”这两个词。并不是说Backbone.js只适用于单页面应用程序。尽管如此,Backbone.js确实很适合构建复杂的应用程序,这些应用程序可以操作数据并处理大量逻辑。对于小规模的UI元素使用它将是愚蠢的--它强加的额外结构是不需要的。

Backbone更新:在多个页面的问题上,是的,Backbone确实为持久化数据提供了强大的机制。每个模型都有一个save方法,该方法将执行AJAX调用以将更改存储在服务器上。因此,只要你保存你的数据,你就可以拥有一个多页面的应用程序。这是一个非常灵活的模型,这也是我们最终可能在工作中使用Backbone的原因。虽然我很想构建一个单页面的应用程序,但我们在现有的多页面应用程序上已经工作了10年。我们希望在Backbone中重建一些更密集的UI组件,然后在用户移动到不同的页面之前将更改同步到服务器。

票数 128
EN

Stack Overflow用户

发布于 2012-03-16 12:22:56

我从来没有听说过有人跨多个页面使用backbone.js。它几乎总是某种单页面的应用程序。

单个页面可能有许多不同的模型、视图和状态,并可能导致一个功能强大的应用程序。

如果你已经有了java中的服务器端模板/视图渲染,那么backbone.js不适合你。为了最大限度地利用backbone.js,您必须在前端javascript中移动或复制其中的一些代码。

如果你不想做一个单页面的应用程序(这仅仅意味着一个没有页面刷新或更改的应用程序,但是url仍然可以改变,在用户看来可能是多个页面),那么你可以把你所有的MVC都放在服务器上,而不需要主干。

编辑:

backbone所做的是将一些通常在服务器上处理的MVC内容移动到客户端。对于许多人来说,这意味着忘记服务器,只将你的应用程序编写为单页面的javascript应用程序。服务器变成了JSON/REST数据源。如果您还没有准备好这样做,那么backbone.js就没有那么有用了。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9715295

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档