Backbone.js 面试题

以下是一些最常问的Backbone.js 面试题及答案。

1) 什么是 Backbone.js？请详细解释。

Backbone.js 是一个基于 JavaScript 的轻量级客户端（前端）Web 框架。它用于开发在 Web 浏览器中运行的客户端应用程序。使用 Backbone.js 开发客户端应用程序非常简单，并且花费的时间较少。它也使开发单页应用程序更加容易。它支持 MVC（模型、视图和控制器）架构。

• Model： Model 是代码的一部分，用于填充和检索数据
• View： View 只是 Model 的 HTML 表示。如果你对 Model 进行了任何更改，它会立即反映在 View 中。
• Controller： Controller 允许你通过 URL 保存你的 JavaScript 应用程序。

2) Backbone.js 是用什么语言编写的？

Backbone.js 是用 JavaScript 编写的。它是一个 JavaScript 库，包含一个 RESTful JSON 接口。

3) Backbone.js 的主要组成部分有哪些？

Backbone.js 的主要组成部分

• Model - 它对数据执行各种类型的操作，如验证、转换、计算属性、访问控制。
• View - 它指定了数据的外观。
• Collection - 它负责将新模型加载到服务器并从服务器保存。
• Router - 它用于路由客户端应用程序，并将它们连接到操作和事件。
• Event 类对象 - 它通过使用我们选择的所需名称，方便对象绑定和触发自定义事件。

4) 解释 Backbone.js 的架构。

Backbone.js 支持 Model-View-Controller 架构，允许开发人员分离业务逻辑和 GUI 逻辑。

• Model： 它包含数据和从服务器检索数据的逻辑。
• View： 它包含负责最终用户界面的代码，即应用程序呈现给用户的方式。
• Controller： 它是控制应用程序行为的主要应用程序逻辑。它是充当 Model 和 View 之间桥梁的代码的一部分。

5) 什么时候需要 Backbone.js？

在以下情况下需要 Backbone.js：

• 当你正在开发一个需要大量 JavaScript 的 Web 应用程序时。
• 如果你的应用程序需要可伸缩性，并且你想为代码提供结构时，就需要它。
• 当 Web 应用程序需要使用 jQuery 来遍历 DOM 或实现动画时，Backbone 会很有用。
• 当 Model 发生更改并且你希望自动更新 HTML 应用程序时。

6) 什么是 Backbone.js 中的 Collection？

Collection 可以定义为模型的有序集合。在 Backbone.js 中，有一个 Collection 类提供了许多有用的方法来处理 Collection。我们可以扩展 Collection 类来提供一些额外的功能。例如：

7) 设置 Backbone.js 需要哪三个 JS 文件？

以下是设置 Backbone.js 并使其正常工作所需的三个 JS 文件：

• jQuery
• Backbone
• Underscore (下划线)

在我们的应用程序中，我们必须将这些文件放在 js 文件夹中，并在我们的 index.html 页面上使用它们。

8) Backbone.js 路由器的用途是什么？

Backbone.js 路由器用于将应用程序的 URL 路由到特定的操作和事件。对于每个定义的路由器，必须至少存在一个路由。它还定义了当 Web 应用程序提供可链接、可书签化和可共享的 URL 时，应用程序对象的 URL 表示。

9) 描述 Backbone 事件？

Backbone.js 事件可以定义为可以与任何对象混合的模块。有以下方法用于操作 Backbone.js 事件：

1. on - 它将事件绑定到对象，并在事件触发时执行回调。
2. off - 它会从对象中删除回调函数或所有事件。
3. trigger - 它会为给定的事件调用回调函数。
4. once - 它在创建自己的 Backbone Model 类时扩展 Backbone Model 类。
5. listenTo - 它通知一个对象监听另一个对象上的事件。
6. stopListening - 它可以用来停止监听其他对象上的事件。
7. listenToOnce - 它会导致监听器在回调函数被移除之前只执行一次。

10) 什么是 Backbone.js 中的 View？

View 是 Backbone.js 架构的重要组成部分。在 Backbone.js 应用程序中，View 负责最终用户界面。View 定义了应用程序在用户眼中显示的方式。View 还负责监听事件并做出相应的反应。

11) 什么是 Backbone.js 中的 ModelBinder？

Model Binder 是一个用于将 Model 和 View 绑定在一起的类。绑定是为了实现同步。

12) 提及 Model binder 的一些最强大的功能？

Model binder 的一些最强大的功能是：

1. 它允许开发人员在使用 jQuery 创建绑定时定义范围。
2. 在某些情况下，我们可以依赖基于 HTML 的 name 属性的默认作用域规则。
3. 如果视图很复杂，可以重新定义作用域规则。

13) Backbone.js 有哪些优点？

Backbone.js 的优点

• 你可以使用 Backbone.js，通过 JavaScript 和最少的数据结构（models & collections）以及用户界面（views & URLs）来开发 Web 应用程序。
• 它最适合以组织有序的方式开发类似 MVC 的 Web 应用程序、单页 Web 应用程序或复杂的 JavaScript Web 应用程序，而不会将 JavaScript 代码与 HTML 混合。
• 它提供了带有许多函数的 API。
• 它提供了键值绑定和自定义事件。
• 它使你能够将数据抽象为 Model，将 DOM 应用程序抽象为 View，并通过事件将两者绑定在一起。

14) 什么是 Backbone.js 中的 Converter？

Converter 是一个用于将 JavaScript 对象转换为 Model 的函数。当 HTML 元素和 Model 的属性之间进行转换时，会调用它。

15) 什么是 Backbone.js 中的 sync？

Sync 是每次尝试将 Model 读取或保存到服务器时都会调用的函数。它将 Model 的状态持久化到服务器。

16) Backbone.js 中有哪些实用工具方法？

可以使用两种方法来操作 Backbone.js 实用工具：

1. Backbone.noConflict：它将 Backbone 对象恢复到其原始值，并提供了一个存储 Backbone 引用的设施。它可用于将 Backbone 嵌入到第三方网站，当你不希望覆盖现有的 Backbone 时。
2. Backbone.$：当你页面上有多个 jQuery 副本时，或者想告诉 Backbone 使用特定对象作为其 DOM/Ajax 库时，会使用此属性。

17) 提及在 Backbone.js 中可以使用解除绑定函数的情况？

在 Backbone.js 中，解除绑定函数用于删除 Model 上的绑定。当我们想删除 Model 或所有 Model 上的验证绑定时，我们必须移除 Collection 上挂载的所有事件。在这种情况下，我们使用解除绑定函数。

例如

18) Backbone.js 中有哪些可用的配置选项？

Backbone.js 中有以下配置选项：

1. modelSetOptions
2. boundAttributes
3. supressThrows
4. 转换器
5. change Triggers
6. InitialCopyDirection

19) Backbone.js 依赖项有哪些好的替代品？

Backbone.js 只有一个硬性依赖项，名为 Underscore.js。但是，我们经常需要包含 jQuery 和 json2.js 来支持 Backbone.js 的某些功能。

当我们谈论 Underscore.js 和 jQuery 的替代品时，有时可以使用 Lo-Dash 和 Zepto 配合 Backbone.js。这两者是 Underscore.js 和 jQuery 的更轻量级的替代品。

20) 在 Backbone.js 的 Model 对象中，“id” 和 “cid” 属性之间有什么区别？

在 Backbone.js 中，“id” 属性在 Model 上是根据 Model 的 attributes hash 中设置的“id”自动分配的。这是我们从 REST API 收到的 ID，用于我们查询的资源。另一方面，“cid” 是分配给每个 Model 的临时 ID，在实际 ID 分配给对象之前很有用。例如，一个被推送到 Collection 但尚未持久化的 Model，在保存到数据库并为其生成实际 ID 之前，可以称为“cid”。之后，它可以称为“id”。

21) 与使用“on()”相比，使用“listenTo()”绑定事件处理程序有哪些主要优点？

与使用“on()”相比，使用“listenTo()”绑定事件处理程序主要有两个优点。请查看这两种用法的语法，因为它们的使用方式不同。

语法

使用“listenTo()”时，你想监听其事件的对象作为第一个参数传递。另一方面，对于“on()”，它是该对象上的一个方法。

“listenTo()”相对于“on()”的关键优势是：

• 监听器会跟踪所有事件处理程序，从而在需要时更容易一次性删除它们。
• 回调的上下文始终设置为监听器本身。

22) 如何对 Collection 进行排序？何时需要显式调用 Collection 的“sort()”？

在 Backbone.js 中，默认情况下，Collection 不会被显式排序。我们可以通过在 Collection 对象上定义一个比较器（comparator）来对 Collection 进行排序。通过定义比较器，每当添加 Model 或在 Collection 上调用“sort()”方法时，Collection 都会被排序。

示例

比较器属性可以是带有单个参数或两个参数的函数（类似于“sort”中的用法），或者是一个标识用于排序的属性名的字符串。

当 Collection 中 Model 的某个属性发生变化时，Collection 不会自动排序。在这种情况下，必须显式调用 sort() 来更新 Collection 中 Model 的顺序。

23) 为了覆盖 Backbone.js 对 REST API 的默认支持，需要修改哪个函数？

要覆盖 Backbone.js 对 REST API 的默认行为（按 Model 基础），我们可以将一个自定义函数设置到“Model.sync”。要使更改全局化，我们可以将自定义函数设置到“Backbone.sync”。理想情况下，“sync”函数应处理四种方法：“create”、“read”、“update”和“delete”。该函数接收 CRUD 方法名、Model 本身以及一个包含附加选项的对象。

还有一种方法可以做到这一点。有时将“Backbone.emulateJSON”设置为 true 可以完成任务，在这种情况下，我们需要将请求提交为“application/x-www-form-urlencoded”而不是“application/json”。

24) Backbone.js 有哪些显著的特性或关键点？

Backbone.js 的一些显著特性或关键点列表：

• Backbone.js 与 underscore.js 存在硬性依赖，使其功能更强，并支持一系列有用的基于 Collection 的操作。
• Backbone.js 对 jQuery 存在软性依赖。
• Backbone.js 基于 MVC 架构。当 Model 更改时，它可以自动更新应用程序的 HTML。
• Backbone.js 使用客户端渲染框架或 JavaScript 模板来渲染 HTML，使你不必将 HTML 代码嵌入到 JavaScript 代码中。
• Backbone.js 为 UI 更新和 DOM 操作提供了一种非常干净优雅的方式。

25) 你对 Backbone.sync 有什么理解？

Backbone.sync 是 Backbone.js 在需要将 Model 保存到服务器或从服务器读取 Model 时调用的函数。

26) 如何在 Backbone.js 中创建 Model？

使用以下语法在 Backbone.js 中创建 Model：

语法

27) 在什么条件下 Backbone.js 是必须需要的？

通常，在以下条件下需要 Backbone.js：

• 当我们必须开发一个需要大量 JavaScript 代码的 Web 应用程序时。
• 如果你的应用程序需要可伸缩性并为代码提供结构，也需要它。
• 当 Web 应用程序需要使用 jQuery 来遍历 DOM 或实现动画时，Backbone 是必需的。

28) 在 Backbone.js 的动态路由中，“:params” 和 “*splats” 是什么意思？

Backbone.js 在实现路由时使用两种变量样式：“:params” 和 “*splats”。让我们看看“:params”和“*splats”的用法：

• “:params” 用于匹配斜杠之间的任何 URL 组件。你可以使用“.params”指定单个片段。另一方面，“*splats” 用于匹配查询之后的任何数量的 URL 片段。由于“*splat”的性质，它应该始终是 URL 中的最后一个变量，因为它将匹配任何组件。
• 在路由定义中，“*splats”或“:params”作为参数（按相应顺序）传递给关联的函数。定义为“/:route/:action”的路由会将 2 个变量（“route”和“action”）传递给回调函数。

29) Backbone.js 可以用于多页面 Web 应用吗？如果可以，如何使用？

是的，我们可以将 Backbone.js 用于多页面 Web 应用。Backbone.js 中有很多关于多页面 Web 应用的考虑因素，但以下两个是最有用的：

• 服务页面：在此方法中，你希望 Web 服务器将所有内容路由到服务器以服务同一个静态页面。例如，https://tpointtech.com/* 中的所有内容将服务于 /var/www/tpointtech.com/index.html。静态页面加载后，JavaScript 将决定如何处理给定的 URL。
• Push State：在此方法中，你仍然可以使用 Backbone 路由来执行路由任务，但不要使用 hashbangs。此方法允许你在不实际需要刷新页面的情况下导航到 URL。

30) 你对 Backbone.js 视图的“el”属性有什么理解？

在 Backbone.js 视图中，“el”属性用于引用在浏览器中创建的 DOM 对象。每个 Backbone.js 视图都有一个“el”属性，如果未定义，Backbone.js 将创建一个空的 div 元素作为其默认值。

31) ModelBinder 在 Backbone.js 中最强大的功能是什么？

在 Backbone.js 中，ModelBinder 类的最强大功能是它允许你在使用 jQuery 创建绑定时定义作用域。

对于简单的视图，你可以依赖于基于 HTML“name”属性的默认作用域规则。

对于复杂的视图，你可以使用 jQuery 选择器定义作用域。

32) toJSON 在 Backbone.js 中的主要功能是什么？

toJSON 在 Backbone.js 中的主要功能是返回 Model 属性的浅拷贝，以便进行 JSON 字符串化。它不返回 JSON 字符串，并在发送到服务器之前提供持久化、序列化和增强。

33) Model 的属性在 Backbone.js 中是如何存储的？

在 Backbone.js 中，Model 的属性存储在一个哈希表中。

34) 使用 Backbone.js 视图代码时可能遇到哪些最常见的问题？

以下是使用 Backbone.js 视图代码时可能遇到的最常见问题列表：

• 应用程序 Model 更改不频繁。
• 应用程序页面频繁从服务器重新加载。
• Model 在不同视图之间不共享。

35) Backbone.js 中的 model.cid 是什么？

在 Backbone.js 中，model.cid 是 Model 的一个特殊属性，即 cid 或客户端 ID，当 Model 首次创建时会自动分配给所有 Model。model.cid 作为唯一标识符。当 Model 未保存到服务器但你想在 UI 上显示它时，这非常有用。

36) 提供一个示例来演示如何查看 Model 单个属性的变化？

每当你在 Model 中更改某些数据时，Model 对象会触发“change”事件。但是，对象还会触发一个带有特定于更改属性的名称的事件：“change:[attribute]”。

例如

37) escape 在 Backbone.js 中的功能是什么？

在 Backbone.js 中，escape 用于获取 Model 中属性的当前值，但它返回 Model 属性的 HTML 转义版本。当你在 HTML 中插入 Model 的数据时，它有助于防止 XSS 攻击。

38) 为什么不建议直接更改视图的“el”属性？正确的做法是什么？

不建议直接更改视图的“el”属性，因为当你尝试直接更改“el”属性时，可能会导致 Backbone.js 视图出现不一致的行为。这种不一致行为的原因是，当你直接更改“el”属性时，它不会自动更新对应的缓存 jQuery 对象属性“$el”。

正确的做法是在视图上使用“setElement()”。

语法

39) 你对 Backbone.js 中的 model.attributes 有什么理解？

Backbone.js 的 attributes 定义了 Model 的属性，并使用 set() 方法更新 attributes。它通常是表示服务器上 Model 数据的 JSON 对象的形式。

语法

示例

40) 你对 Backbone.js 实用工具类有什么理解？

Backbone.js 实用工具类包含一组用于实现 Backbone 实用工具的方法。有两种方法用于操作 Backbone.js 实用工具：

• noConflict(): 它将 Backbone 对象恢复到其原始值，并提供了一个存储 Backbone 引用的设施。
• $(): 当你页面上有多个 jQuery 副本时，或者只是想告诉 Backbone 使用特定对象作为其 DOM/Ajax 库时，可以使用此方法。

41) parse 在 Backbone.js 中的功能是什么？

从服务器响应 fetch 或 store 操作返回的数据称为 parse。它用于通过传递响应对象来返回 Model 的数据。

42) setElement 的功能是什么？

Backbone.js 的 setElement 方法用于将 backbone 视图应用于不同的 DOM 元素。例如：