Knockout JS 面试题

最常问的 Knockout JS 面试题

1) 什么是 Knockout JS？

Knockout JS 是一个基于 MVVM (Model View View Model) 模式的 JavaScript 库，它帮助开发人员构建丰富响应式的网站。它是一个小型、轻量级的 JavaScript 库，主要用于设计和开发 SPA (单页应用)。它支持在浏览器中进行快速开发，尤其是在涉及 ViewModels 和数组时。

2) Knockout JS 有什么用？如何有用？

Knockout Js 是一个轻量级框架，可以大大减少同步数据模型和用户界面控件所需的代码量。它速度极快，跨浏览器兼容，并且不依赖任何其他库。

它的轻量级特性（压缩后小于 20kb）可以轻松集成到大多数 Web 应用程序中，而无需进行重大的架构更新。这就是它日益流行的原因。

3) Knockout JS 最突出的特点是什么？

Knockout JS 最突出的特点是：

• 自动 UI 刷新
• 依赖跟踪
• 支持所有现代浏览器
• 模板绑定
• 声明式绑定
• 紧凑的尺寸，小于 20 kb。
• 纯 JavaScript 编写
• 易于实现

4) Knockout JS 支持哪些类型的数据绑定？

Knockout JS 支持两种类型的数据绑定：

• 单向绑定
• 双向绑定

5) Knockout JS 中的双向数据绑定是什么？

Knockout JS 采用双向数据绑定。它使用 "data-\*" 标签在浏览器 UI 控件和数据 ViewModel 中的成员或方法之间创建实时动态链接。让我们通过一个演示示例来理解它：假设您有一个包含 'FirstName' 字段的数据模型，以及一个使用 data-bind 属性绑定到 'FirstName' 的编辑框，那么当数据模型更改时（例如，以编程方式），该更改会立即显示在编辑框中，并且当用户在编辑框中更改 FirstName 时，'FirstName' 字段中的底层数据也会随之更改。

6) Knockout JS 中的依赖跟踪是什么？

依赖跟踪是 Knockout JS 中的一个特性，它使得 Knockout JS 在您的数据模型发生更改时自动更新 UI (DOM)。

7) Knockout JS 容易学习吗？

Knockout JS 学习起来快速而容易。它不像 Angular 那样功能齐全，也不具备 Angular 的众多功能，但它提供了一种强大的处理数据的方法，并大大减少了实现健壮的现代客户端解决方案所需的代码量。Knockout JS 的最佳特性是它提供了高效的数据绑定，并且做得很好。这就是它日益流行的原因。

8) 在 Knockout JS 中，您如何理解可观察对象 (observables)？

在 Knockout JS 中，可观察对象是特殊的 JavaScript 对象，用于通知订阅者有关更改的信息并自动检测依赖项。可观察对象有助于 Knockout JS 在 ViewModel 更改时自动更新您的 UI。

这就是在 Knockout JS 中创建可观察对象的方式

9) Knockout JS 中的计算可观察对象 (computed observable) 是什么？

Knockout JS 中的计算可观察对象是一种特殊类型的函数，它依赖于一个或多个可观察对象才能工作。例如，当一个或多个链接的可观察对象的值发生更改时，就会调用计算可观察对象。计算可观察对象的经典示例是“Full Name”，它会观察并组合“first name”和“last name”来生成“Full name”。

10) 简要解释 Knockout JS ViewModel。

Knockout JS ViewModel 类似于在 JavaScript 中创建的作为函数的类。它被声明为一个变量，可以包含成员和方法。

11) 如何激活一个 Knockout JS 模型？

我们可以通过调用关键方法 'ko.applyBindings' 并将要绑定的模型名称作为参数传递来轻松激活 Knockout JS 模型。例如：

12) 可以在一个页面上绑定多个 Knockout JS 模型吗？如果可以，如何使用它们？

可以。我们可以轻松地同时将 Knockout JS 绑定到多个模型。我们需要将不同的模型隔离起来，将任何标记放置在单独的 div 容器中，并为其命名一个唯一的 ID，然后为每个模型调用关键的 'applyBindings' 方法，将 ViewModel 作为第一个参数，将匹配的 div ID 作为第二个参数。

13) Knockout JS 中的可观察数组 (observable arrays) 是什么？

可观察数组是 knockout 属性的集合，包含 ViewModel 中收集的所有内容。此属性通过双向绑定与 UI (View) 进行绑定。

14) Knockout JS 如何用于上下文属性？

Knockout JS 的使用方式如下：

• $parent 属性： $index 属性返回数组中当前上下文项的索引。
• $index 属性： $parent 属性允许我们检查对象的父项。

15) JQuery 和 Knockout JS 有什么区别？或者 JQuery 与 Knockout JS 有何不同？

Knockout JS 不依赖 jQuery 库，但我们可以同时使用 jQuery。使用 Knockout JS，我们可以轻松地处理客户端和服务器端应用程序。

16) Knockout JS 和 MVC 有什么区别？

下表列出了 Knockout JS 和 MVC 之间的区别：

17) 依赖跟踪是如何工作的？

依赖跟踪算法的工作方式如下：

• 每当我们声明一个计算可观察对象时，KO 会立即调用其求值函数以获取其初始值。
• 在您的求值函数运行时，KO 会记录您的求值函数读取了哪些可观察对象（或计算可观察对象）的值。
• 当您的求值函数完成时，KO 会为您触摸过的每个可观察对象（或计算可观察对象）设置订阅。订阅回调被设置为导致您的求值函数再次运行，从而将整个过程循环回步骤 1（处理不再适用的任何旧订阅）。
• KO 会将您的计算可观察对象的新值通知给任何订阅者。

18) 什么是 KO，它的用途是什么？请详细解释。

KO 被称为 Knockout JS 的核心。它用于提供一种相互关联的方式来链接 ViewModel 与 Model，以及 ViewModel 与 UI (用户界面)。

KO 不依赖 jQuery 库，但我们可以同时使用 jQuery。使用 KO，您可以轻松处理客户端和服务器端应用程序。

19) 如何准备一个 Knockout 对象以进行数据传输？

我们可以通过使用 ko.toJSON(viewModel) 序列化 JSON，以及使用简单的 JavaScript 对象 ko.toJS(viewModel) 来轻松准备一个 Knockout 对象以进行数据传输。

20) 如何通过绑定控制 Knockout JS 中的流程？

当您的 Knockout ViewModel 中有一个项目数组时，您可以使用 for-each 数据绑定来告诉您的标记遍历它们，例如。

21) 如何从 Knockout 数组中删除一个项目？

要从 Knockout 数组中删除一个项目，我们应该使用 remove 或 removeAll 方法。您需要将要删除的项目传递给这些方法进行匹配。

22) 解释 Knockout JS 中的 ViewModel？

Knockout JS 中的 ViewModel 是一个基本类，它被创建为 JavaScript 函数。它被声明为一个包含成员变量和方法的变量。

23) 使用 Knockout 表单绑定有什么好处？

作为普通功能，我们可能会在表单字段上实现一些操作，例如获取/设置字段值、挂钩事件等，这些都可以通过 'form data-bind' 来完成。使用 Knockout 表单绑定的好处是它允许表单的控件与数据模型及其规则相关联。