Observables 在 KnockoutJs 中如何工作

此内容基本上是原始材料的翻译。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙语创建有关 KnockouJs 的内容。

文档

• KnockoutJs：可观察对象
• KnockoutJs：可观察数组
• KnockoutJs：计算可观察量
• KnockoutJs：可写的计算可观察对象
• KnockoutJs：纯计算可观察量
• KnockoutJs：计算可观察量

---

可观测值

KnockoutJs 引入了 observables 的概念，这些属性是可以被监视并在其值发生变化时自动更新的属性。此功能允许用户界面动态响应 模型.

数据的变化

要在 KnockoutJs 中创建可观察对象，您可以使用 ko.observable() 函数并为其分配初始值。要访问 observable 的当前值，您可以将其视为函数。要仅观察没有初始值的事物，只需调用不带参数的 Observable 属性即可。

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

• ko.isObservable：对于 observables、observables 数组 和所有计算的 observables 返回 true；
• ko.isWritableObservable：对于 observables、observable 数组 和 writable 计算的 observables.
返回 true

订阅

observables 中的 订阅 是一种机制，允许您在 observable 的值发生变化时收到通知。它们对于跟踪可观察量中的变化并对这些变化做出反应、更新用户界面或在必要时采取其他操作至关重要。

subscribe() 方法 *** 接收一个 *callback 函数，每当 observable 的值被修改时就会执行该函数。 callback 函数接收 observable 的新值作为参数。该函数接受三个参数：callback是每当通知发生时调用的函数，target（可选）在函数callback中定义this的值和event（可选；默认为change）是接收通知的事件名称。

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

1. change: 这是每当 observable 的值发生变化时触发订阅的默认事件。它是最常见的事件，在没有明确指定其他事件时使用；
2. beforeChange: 此事件在 observable 的值更改之前触发。 callback 函数将接收两个参数：observable 的当前值和将分配给 observable 的建议（新）值。这允许您在更改之前根据当前值执行操作；
3. afterChange: 该事件在 observable 的值改变后触发。回调函数将接收两个参数：可观察量的先前值（更改之前）和分配给可观察量的新值。当您需要在发生特定变化后对其做出反应时，它非常有用。
4. arrayChange: 此事件特定于 Observables 数组。当可观察数组发生更改（例如添加、删除或替换数组中的项目）时会触发它。回调函数采用四个参数：受影响的项目（添加、删除、状态和索引）。

另一个重要的一点是可以将订阅存储在变量中，并在必要时使用 dispose() 方法取消订阅。当您想要暂时或永久禁用 UI 更新以响应可观察值的更改时，这非常有用。

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

确定可观察量类型的方法

1. isObservable()：此方法用于检查值是否为 observable。如果值是 observable（observable、observableArray、compulated 或 writable Computed），则返回 true，否则返回 false。
2. isWritableObservable()：此方法检查值是否是可写的 observable (可写 observable)。如果该值是可写的 observable，则返回 true，否则返回 false；
3. isCompated()：此方法用于检查某个值是否是计算的可观察对象。如果值是 Compulated Observable，则返回 true，否则返回 false；
4. isPureCompulated()：此方法检查值是否是纯计算可观察。 纯计算可观察量 是仅依赖于其他纯可观察量 并且没有内部记录逻辑的一个。如果值是 Pure Computed Observable，则返回 true，否则返回 false。

---

可观察数组

Observables 数组 是 observables 的扩展，用于处理需要可观察的数据列表。与标准 JavaScript 数组 不同，Observable 数组 允许您自动跟踪列表数据的更改并响应式更新用户界面。

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Observables 数组 具有特定的方法，允许您以反应方式添加、删除和操作项目。其中一些方法是：

• indexOf(value)：返回数组中与其参数相等的第一项的索引，如果没有找到匹配的值，则返回值-1。
• push(item): 将一个新项目添加到数组的末尾;
• pop()：删除并返回数组中的最后一项；
• shift()：删除并返回数组中的第一项；
• unshift(item)：将新项目添加到数组的开头;
• remove(item)：从数组中删除特定项目
;
• removeAll([parameter])：从 array 中删除所有项目，并且可以接收 array
形式的参数，该参数将删除传递参数中的项目；
Replace(oldItem, newItem)：将第一个参数传入的item替换为第二个参数；
• verse()：更改原始数组
中项目的顺序并更新用户界面以反映新顺序；
revered()：返回数组的反向副本；
• splice(index, count, items)：允许您在数组中的特定位置添加或删除项目；
• slice()：返回 array
子集的副本，从起始索引开始一直到 end-1 索引。开始和结束值是可选的，如果没有提供；
• sort()：确定项目的顺序。如果未提供该函数，该方法将按字母升序（对于字符串
）或升序数字顺序（对于数字）对项目进行排序；
• sorted()：返回已排序数组的副本。如果你需要不改变原来的可观察数组
，但需要按照特定的顺序显示，则优于sort()方法；

对于修改数组内容的函数，例如 push 和 splice，KO 方法会自动触发依赖跟踪机制，以便所有注册的监听器都收到更改通知并且你的界面会自动更新，这意味着使用 KO 方法（observableArray.push(...) 等）和原生 JavaScript array 方法（observableArray() .push(.. .))，因为后者不会向 array

订阅者发送任何内容已更改的通知。

虽然可以像任何其他可观察对象一样使用 subscribe 并访问 observableArray，但 KnockoutJs 还提供了一种超级快速的方法来找出 array observable 确实发生了变化（哪些项目刚刚被添加、删除或移动）。您可以订阅数组
更改，如下所示：

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

---

计算的可观测值

计算的 Observables 是依赖于一个或多个 observables 的函数，只要这些依赖项发生任何变化，就会自动更新。每次其依赖项发生更改时，该函数都会被调用一次，并且它返回的任何值都将传递给 observables，例如 UI 元素或其他 计算的 observables 。

Compated Observables 和 Observables 之间的主要区别是 Compulated Observables 不直接存储值；相反，它们依赖其他可观察值来计算它们的价值。这意味着当 Compated Observable 所依赖的任何 observables 被修改时，它的值总是会自动更新。

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

计算可观察量的方法

1. dispose()：此方法用于在不再需要时处置（清理）计算的可观察对象。它删除与 Compated Observable;
关联的所有订阅和依赖项
2. extend()：此方法允许您将自定义扩展器添加到计算的Observable。扩展器是可以修改 Compulated Observable; 行为的函数
3. getDependencyCount()：此方法返回依赖于 Compated Observable 的 observables 数量；
4. getDependency()：此方法返回一个包含 observables 的数组，这些 observables 是
Compulated Observable
5. ; 的依赖项 getSubscriptionsCount()：此方法返回来自
Compulated Observable
6. ; 的当前订阅数量 isActive()：此方法返回一个布尔值，指示 Compated Observable 当前是否处于活动状态（如果
Compulated Observable
7. 由于更改而处于评估过程中，则它是活动的在其依赖项中）； peek()：此方法类似于用于访问 Compulated Observable 的当前值的括号运算符 ()。然而，peek 方法不会在
Compated Observable
8. 和调用它的地方之间创建依赖关系； subscribe()：此方法允许您订阅，以便在
Compated Observable

的值发生变化时接收通知。

这 ko.compulated 的第二个参数在评估计算的

observable 时设置 this 的值。如果不传递它，就不可能引用 this.firstName() 或 this.lastName()。

有一个约定可以避免完全跟踪它：如果 viewmodel 的构造函数将对此的引用复制到另一个变量（传统上称为 self）中，则可以在整个 viewmodel 并且不必担心它被重新定义以引用其他内容。

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

因为 self 在函数闭包时被捕获，所以它在任何嵌套函数中都保持可用和一致，例如 计算的可观察值的求值器。当涉及到事件处理程序时，此约定更加有用。

纯 计算可观测值

如果计算的可观察量只是根据一些可观察的依赖关系计算并返回一个值，最好将其声明为ko.pureCompulated而不是ko.compulated。

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

当计算的可观察量被声明为pure时，其求值器不会直接修改其他对象或状态，KnockoutJs可以更有效地管理其重新求值和内存使用。如果没有其他代码主动依赖它，KnockoutJs 将自动挂起或释放它。

可写的计算可观察量

可写计算的可观察量是计算的可观察量的扩展，它允许创建计算的可观察量，可以通过读取和写入来更新。与传统的 Compulated Observables 不同，传统的 Compulated Observables 仅根据其他 observables 计算其值，并且不直接存储值，

Writable Computed Observables

可以存储值，并提供更新该值的函数必要时。 要创建一个可写计算的Observable，需要将 ko.compulated 函数与包含两个主要属性的配置对象一起使用：读和写。 read 属性包含计算函数来确定 observable 的值，而 write 属性包含当您想要更新

observable 的值时调用的函数。

以上是Observables 在 KnockoutJs 中如何工作的详细内容。更多信息请关注PHP中文网其他相关文章！