KnockoutJS-计算的可观察物

KnockoutJS 是一个用于创建富客户端 Web 应用的 JavaScript 库，它允许您使用声明性绑定将模型数据自动更新到您的视图中。同时，KnockoutJS 还提供了“计算的可观察物”（Computed Observables）功能，这是一种方便的方式来自动地计算出一个值，并在相关数据发生变化时实时更新。

Computed Observables 的定义

计算的可观察物是一种 KnockoutJS 特有的“绑定”。它是一个可以自动执行并计算其返回值的函数，而且它的执行时机是受其内部依赖项的变化而触发的。

Computed Observables 的创建

计算的可观察物可以通过两种方式创建：

• 作为一个函数表达式
• 作为一个具有“读取函数”和“写入函数”的对象

作为一个函数表达式

下面是一个简单的计算的可观察物示例，它的返回值为两个可观察物的和：

var firstName = ko.observable("John");
var lastName = ko.observable("Doe");
var fullName = ko.computed(function() {
  return firstName() + " " + lastName();
});

在这个示例中，计算的可观察物 fullName 会自动监控两个可观察物变量 firstName 和 lastName，并在它们的值发生变化后立即更新 fullName 的值。

作为一个具有“读取函数”和“写入函数”的对象

计算的可观察物也可以通过一个具有“读取函数”和“写入函数”的对象来创建，这种方式被称作“可写的计算的可观察物”（Writeable Computed Observables）。下面是一个简单的示例：

var firstName = ko.observable("John");
var lastName = ko.observable("Doe");
var fullName = ko.computed({
  read: function() {
    return firstName() + " " + lastName();
  },
  write: function(value) {
    var parts = value.split(' ');
    firstName(parts[0]);
    lastName(parts[1]);
  }
});

在这个示例中，计算的可观察物 fullName 既可以被读取也可以被写入，读取时会返回 firstName 和 lastName 的值的组合，写入时会将写入的字符串分割成两个部分，并将它们分别设置为 firstName 和 lastName 的值。

Computed Observables 的依赖项

计算的可观察物是按需计算的，也就是说它只有在被访问或其依赖项发生变化时才会被计算。KnockoutJS 会自动追踪计算的可观察物内部使用到的所有依赖项，从而在依赖项发生变化时触发计算的可观察物的重新计算。

下面是一个示例，它演示了当一个可观察物（age）发生改变时，计算的可观察物（fullName）会自动更新：

var firstName = ko.observable("John");
var lastName = ko.observable("Doe");
var age = ko.observable(30);
var fullName = ko.computed(function() {
  return firstName() + " " + lastName() + " (" + age() + ")";
});
console.log(fullName()); // 输出: "John Doe (30)"
age(31);
console.log(fullName()); // 输出: "John Doe (31)"

在这个示例中，计算的可观察物 fullName 监控了三个可观察物变量 firstName、lastName 和 age，并在任意一个变量发生变化时自动更新。

Computed Observables 的注意事项

在使用计算的可观察物时需要注意以下几点：

• 计算的可观察物不应该有副作用。也就是说，它的计算结果应该只由它的依赖项决定。
• 计算的可观察物的计算结果应该是一致的。也就是说，对于相同的依赖项，它的计算结果必须保持不变。
• 计算的可观察物的计算过程应该是轻量级的。也就是说，计算时间不应该太长，以保证良好的浏览器性能。

Computed Observables 的扩展

KnockoutJS 还提供了一些有用的扩展，以帮助您更好地使用计算的可观察物：

• throttle：限制计算的频率，减少计算的次数，以提高浏览器性能。
• deferEvaluation：延迟计算，直到首次访问计算的可观察物时才进行计算，这可以提高应用程序的加载速度。

结论

计算的可观察物是 KnockoutJS 重要的功能之一。它使得在 Web 应用中实现动态数据计算变得十分简单和方便。通过使用计算的可观察物，您可以实现数据绑定、自动计算和自动更新等功能，从而让您的应用更加强大和灵活。