BackboneJS 应用程序

2018-01-04 17:20 更新

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

Backbone.js的架构

Backbone.js的架构包含以下模块:

  • HTTP Request
  • Router
  • View
  • Events
  • Model
  • Collection
  • Data Source

HTTP请求

HTTP客户端以请求消息的形式向服务器发送HTTP请求,其中web浏览器,搜索引擎等等作为HTTP客户端。 用户使用HTTP请求协议请求文件,例如文档,图像等。 在上面的示例中,您可以看到HTTP客户端使用路由器发送客户端请求。

Router

它用于路由客户端应用程序,并使用URL将它们连接到操作和事件。 它是应用程序对象的URL表示。 URL由用户手动更改。 URL由骨干使用,使得它可以理解要发送或呈现给用户的什么应用程序状态。 路由器是一种可以复制URL到达视图的机制。 当应用程序中的重要位置的Web应用程序提供可链接,可标记和可共享的URL时,需要路由器。
在上面的图中,路由器向视图发送HTTP请求。 当应用程序需要路由功能时,这是一个有用的功能。

View

Backbone.js视图负责从我们的应用程序显示什么和什么,他们不包含应用程序的HTML标记。 它指定了向用户呈现模型数据背后的想法。 视图用于反映“您的数据模型的外观”。 视图类不知道关于HTML和CSS的任何内容,并且当模型更改而不重新加载整个页面时,每个视图都可以单独更新。 它表示DOM中UI的逻辑块。
如上述架构所示,视图表示负责显示通过使用路由器完成的用户请求的响应的用户界面。

Events

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

Model

它是JavaScript应用程序检索和填充数据的核心。 模型包含应用程序的数据和数据的逻辑,并且表示框架中的基本数据对象。 模型表示具有一些业务逻辑和业务验证的业务实体。 它主要用于数据存储和业务逻辑。 它可以从数据存储中检索和保存。 模型从使用路由器的视图传递的事件获取HTTP请求,并同步数据库中的数据并将响应发送回客户端。

Collection

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

Data Source

它是从服务器设置到数据库的连接,并包含从客户端请求的信息。 Backbone.js架构的流程可以描述如下所示的步骤:

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

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

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号