从Backbone.js开始

   2025-07-24 admin00110

与Web开发同行不同,JavaScript从来没有真正以框架的方式提供结构。值得庆幸的是,近年来,这种情况开始发生变化。

今天,我想向您介绍Backbone.JS,这是一个可爱的小库,它使创建复杂、交互式和数据驱动的应用程序的过程变得更加容易。它提供了一种干净的方法来将数据与演示文稿分离。

Backbone.JS概述

Backbone由构建CoffeeScript的JS忍者JeremyAshkenas创建,是一个超轻量级库,可让您创建易于维护的前端。它与后端无关,并且可以与您已经使用的任何现代JavaScript库配合良好。

Backbone是一个内聚对象的集合,重量4kb以下,它为您的代码提供结构,基本上可以帮助您在浏览器中构建适当的MVC应用程序。官方网站是这样描述其目的的:

Backbone通过提供具有键值绑定和自定义事件的模型、具有丰富的可枚举函数API的集合、具有声明性事件处理的视图,为JavaScript密集型应用程序提供结构,并将其全部连接到您现有的应用程序RESTfulJSON接口。

让我们面对现实:上面的内容有点难以解析和理解。因此,让我们在Jeremy的帮助下继续解构这些行话。

键值绑定和自定义事件

当模型的内容或状态发生更改时,已订阅该模型的其他对象会收到通知,以便它们可以进行相应的处理。在这里,视图监听模型中的变化,并相应地更新自己,而不是模型必须手动处理视图。

丰富的可枚举函数API

Backbone附带了许多非常有用的函数来处理和使用您的数据。与其他实现不同,JavaScript中的数组是相当中性的,当您必须处理数据时,这确实是一个阻碍问题。

具有声明性事件处理的视图

你编写意大利面条式绑定调用的日子已经结束了。您可以通过编程方式声明哪个回调需要与特定元素关联。

RESTfulJSON接口

尽管当您想要与服务器通信时默认方法是使用标准AJAX调用,但您可以轻松地将其切换为您需要的任何内容。许多适配器如雨后春笋般涌现,涵盖了大多数最受欢迎的适配器,包括Websockets和本地存储。

将其分解为更简单的术语:

Backbone提供了一种干净的方法来将数据与演示文稿分离。处理数据的模型只关心与服务器同步,而视图的主要职责是监听订阅模型的更改并呈现HTML。

快速常见问题解答

我猜您现在可能有点困惑,所以让我们澄清一些事情:

它会取代jQuery吗?

没有。它们的范围非常互补,功能上几乎没有重叠。Backbone处理所有更高级别的抽象,而jQuery(或类似的库)则处理DOM、规范化事件等。

它们的范围和用例非常不同,因为你知道其中一个并不意味着你不应该学习另一个。作为一名JavaScript开发人员,您应该知道如何有效地使用两者。

我为什么要使用这个?

因为通常情况下,前端代码会变成一堆热气腾腾、脏兮兮的嵌套回调、DOM操作、用于演示的HTML以及其他不可言喻的行为。

Backbone提供了一种非常干净和优雅的方式来管理这种混乱。

我应该在哪里使用它?

Backbone非常适合创建前端重型、数据驱动的应用程序。想想GMail界面、新Twitter或过去几年的任何其他启示。它使创建复杂的应用程序变得更加容易。

虽然您可以将其硬塞到更主流的网页页面,但这实际上是一个专为网络应用程序量身定制的库。

它与卡布奇诺或Sproutcore类似吗?

是和否。

是的,因为与上面提到的框架一样,这主要用于为Web应用程序创建复杂的前端。

它的不同之处在于Backbone非常精简,并且没有附带其他小部件。

Backbone的重量非常轻,不到4kb。

还有一个事实是,Cappuccino强制您使用Objective-J编写代码,而Sproutcore的视图必须在JS中以编程方式声明。虽然这些方法都没有错,但使用Backbone,普通的JavaScript可以通过常用的HTML和CSS来完成工作,从而实现更温和的学习曲线。

我仍然可以在页面上使用其他库,对吧?

绝对是的。不仅是典型的DOM访问、AJAX包装类型,还有其余的模板和脚本加载类型。它的耦合非常非常松散,这意味着您可以将几乎所有工具与Backbone结合使用。

它会带来世界和平吗?

不,抱歉。但这里有一些东西可以让你振作起来。

好的,现在抛开这个问题,让我们开始吧!

了解Backbone的Backbone

Backbone中的MVC最初代表模型、视图和集合,因为框架中没有控制器。此后情况发生了变化。

Backbone的核心由四个主要类组成:

  • 型号
  • 集合
  • View
  • 控制器

由于我们时间有点紧张,所以我们今天只看一下核心课程。我们将使用一个超级简单的应用程序进行后续操作,以演示此处教授的概念,因为将所有内容都放在一篇文章中并期望读者解析所有内容会太多。

在接下来的几周内请保持警惕!

型号

模型在不同的MVC实现中可能有不同的含义。在Backbone中,模型代表一个单一实体——数据库中的记录(如果您愿意的话)。但这里没有硬性规定。来自Backbone网站:

模型是任何JavaScript应用程序的核心,包含交互式数据以及围绕它的大部分逻辑:转换、验证、计算属性和访问控制。

该模型只是为您提供了一种在数据集上读取和写入任意属性或属性的方法。考虑到这一点,下面的单行代码是完全可用的:

cript;toolbal:false;">varGame=Backbone.Model.extend({});
 
举报收藏 0打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  RSS订阅  |  京ICP备2024057451号-2