BackboneJS教程

BackboneJS 应用程序

BackboneJS 为 Web 应用程序提供了一种结构,允许分离业务逻辑和用户界面逻辑。在本章中,我们将讨论用于实现用户界面的 BackboneJS 应用程序的架构风格。下图展示了 BackboneJS 的架构-
Backbone.js 架构
BackboneJS 的架构包含以下模块-
HTTP Request Router View Events Model Collection Data Source
现在让我们详细讨论所有模块。

HTTP Request

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

Router

它用于路由客户端应用程序并使用 URL 将它们连接到操作和事件。它是应用程序对象的 URL 表示。此 URL 由用户手动更改。 URL 由主干使用,以便它可以了解要发送或呈现给用户的应用程序状态。
路由器是一种可以复制 URL 以到达视图的机制。当 Web 应用程序为应用程序中的重要位置提供可链接、可添加书签和可共享的 URL 时,路由器是必需的。
在上述架构中,路由器向View发送HTTP请求。当应用程序需要路由功能时,这是一个有用的功能。

View

BackboneJS 视图负责从我们的应用程序中显示的方式和内容,它们不包含应用程序的 HTML 标记。它指定了向用户展示模型数据背后的想法。视图用于反映"您的数据模型是什么样的"。
视图类对 HTML 和 CSS 一无所知,当模型更改时,每个视图都可以独立更新,而无需重新加载整个页面。它代表 DOM 中 UI 的逻辑块。
如上述架构所示,View 代表用户界面,负责显示对使用 Router 完成的用户请求的响应。

Events

事件是任何应用程序的主要部分。它将用户的自定义事件绑定到应用程序。它们可以混合到任何对象中,并且能够绑定和触发自定义事件。您可以使用您选择的所需名称来绑定自定义事件。
通常,事件与其程序流同步处理。在上面的架构中,你可以看到当一个事件发生时,它通过视图来表示模型的数据。

Model

它是检索和填充数据的 JavaScript 应用程序的核心。模型包含应用程序的数据、数据的逻辑并代表框架中的基本数据对象。
模型代表具有一些业务逻辑和业务验证的业务实体。它们主要用于数据存储和业务逻辑。可以从数据存储中检索模型并将其保存到数据存储中。模型从 View 使用 Router 传递的 Events 中获取 HTTP 请求,并同步来自数据库的数据并将响应发送回客户端。

Collection

集合是一组模型,当模型在集合中被修改时绑定事件。该集合包含可以在循环中处理并支持排序和过滤的模型列表。创建集合时,我们可以定义该集合将具有的模型类型以及属性实例。在模型上触发的任何事件也会在模型中的集合上触发。
它还从视图中获取请求,绑定事件并将数据与请求的数据同步,并将响应发送回 HTTP 客户端。

Data Source

它是从服务器建立到数据库的连接,包含从客户端请求的信息。 BackboneJS 架构的流程可以描述为如下步骤所示-
用户使用路由器请求数据,路由器使用 URL 将应用程序路由到事件。 视图向用户表示模型的数据。 模型和集合通过绑定自定义事件从数据库中检索和填充数据。
在下一章中,我们将了解事件在 BackboneJS 中的重要性。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4