BackboneJS - 应用程序


BackboneJS 为 Web 应用程序提供了一种结构,允许分离业务逻辑和用户界面逻辑。在本章中,我们将讨论用于实现用户界面的 BackboneJS 应用程序的架构风格。下图显示了 BackboneJS 的架构 -

Backbone.js 架构

BackboneJS 的架构包含以下模块 -

  • HTTP请求
  • 路由器
  • 看法
  • 活动
  • 模型
  • 收藏
  • 数据源

现在让我们详细讨论所有模块。

HTTP请求

HTTP 客户端以请求消息的形式向服务器发送 HTTP 请求,其中 Web 浏览器、搜索引擎等的作用类似于 HTTP 客户端。用户使用HTTP请求协议请求文件、图像等文件。在上图中,您可以看到 HTTP 客户端使用路由器来发送客户端请求。

路由器

它用于路由客户端应用程序并使用 URL 将它们连接到操作和事件。它是应用程序对象的 URL 表示。该 URL 由用户手动更改。URL 由骨干网使用,以便它可以了解要发送或呈现给用户的应用程序状态。

路由器是一种可以复制 URL 来到达视图的机制。当 Web 应用程序为应用程序中的重要位置提供可链接、可添加书签和可共享的 URL 时,需要使用路由器。

在上面的架构中,路由器向View发送HTTP请求。当应用程序需要路由功能时,这是一个有用的功能。

看法

BackboneJS 视图负责如何从我们的应用程序中显示内容以及显示内容,并且它们不包含应用程序的 HTML 标记。它指定了向用户呈现模型数据背后的想法。视图用于反映“您的数据模型是什么样子”。

视图类不了解任何有关 HTML 和 CSS 的信息,并且当模型更改时每个视图都可以独立更新,而无需重新加载整个页面。它表示 DOM 中 UI 的逻辑块。

如上面的架构所示,View代表用户界面,负责显示使用Router完成的用户请求的响应。

活动

事件是任何应用程序的主要部分。它将用户的自定义事件绑定到应用程序。它们可以混合到任何对象中,并且能够绑定和触发自定义事件。您可以使用您选择的所需名称来绑定自定义事件。

通常,事件与其程序流同步处理。在上面的架构中,您可以看到当事件发生时,它通过使用视图来表示模型的数据。

模型

它是检索和填充数据的 JavaScript 应用程序的核心。模型包含应用程序的数据、数据的逻辑并表示框架中的基本数据对象。

模型表示具有一些业务逻辑和业务验证的业务实体。它们主要用于数据存储和业务逻辑。可以从数据存储中检索模型并将其保存到数据存储中。模型使用路由器从视图传递的事件中获取 HTTP 请求,并同步数据库中的数据,并将响应发送回客户端。

收藏

集合是一组模型,当模型在集合中被修改时,它会绑定事件。该集合包含可以在循环中处理的模型列表,并支持排序和过滤。创建集合时,我们可以定义该集合将具有的模型类型以及属性实例。在模型上触发的任何事件也会在模型中的集合上触发。

它还从视图获取请求,绑定事件并将数据与请求的数据同步,并将响应发送回 HTTP 客户端。

数据源

它是从服务器建立到数据库的连接,包含客户端请求的信息。BackboneJS 架构的流程可以描述为以下步骤 -

  • 用户使用路由器请求数据,路由器使用 URL 将应用程序路由到事件。

  • 视图向用户表示模型的数据。

  • 模型和集合通过绑定自定义事件从数据库检索并填充数据。

在下一章中,我们将了解 BackboneJS 中事件的意义。