Magento 2 - observables 在常见的 Knockoutjs 和 magento 2 框架中的工作方式有区别吗？

Question

普通knockoutjs和Magento 2中的observables有什么区别？

任何人都可以通过举一些例子来区分

Answer 1

来自艾伦风暴：

“Observables 用在很多地方，有很多方法可以理解“obervables”，但你需要了解的是，HTTP 请求返回一个在响应（或失败）时完成的 Observable，它实际上无法知道何时您的后端决定“发送”更多数据，因为它不是那样构建的，您的后端只响应请求。

在 Magento 2 中，使用“obervables”有点棘手。Magento 2 的 javascript 框架工作大量使用了超出普通前端开发人员需要了解的 abservable。

Observable 是独立的 setter/getter 对象。从 Magento 引导页面，在浏览器的 javascript 控制台中运行以下代码。在使用全局 ko 变量而不是 Magento 的特殊 RequireJS 模块的系统中，您也应该能够在 Magento 之外执行此操作。

//load the Knockout.js library -- normally you'd do this in a `define`
ko = requirejs('ko');

//create the observable object with a default value
var objectToHoldMyValue = ko.observable('default value');

//fetch that value by calling the observable as a function
console.log( 'Value: ' + objectToHoldMyValue() );
"default value"

//set a new value by calling the observable as a function with an argument
objectToHoldMyValue('new value')

//fetch that value by calling the observable as a function
console.log( 'Value: ' + objectToHoldMyValue() );
"new value"    

从上面的代码和注释可以看出，observable 对象的第一个工作是存储值、返回值和更改存储值。如果您不习惯 javascript 的“对象可以是匿名函数”的性质，那么语法可能会有点奇怪，但这并不奇怪。另外——也没什么必要，除非你考虑订阅者。

//subscribe to a change
objectToHoldMyValue.subscribe(function(newValue){
console.log("The subscriber sees: " + newValue);
});

上面的代码设置了一个回调，换句话说，就是一个事件监听器（即你订阅了一个事件）。您订阅的活动？可观察值的变化。如果再次运行值设置代码。

objectToHoldMyValue('a second new value')
The subscriber sees: a second new value

你会看到 Knockout 调用你的订阅者方法。

重要提示：仅当值更改时才调用订阅者。如果传入 observable 的当前值，Knockout 将不会调用订阅者回调

objectToHoldMyValue('a third new value')
The subscriber sees: a third new value

objectToHoldMyValue('a third new value')
[no output, because the subscriber was not called]

虽然这个例子有点傻，但在一个真正的程序中，observables 让你在变量的值发生变化时采取行动。这是一个非常强大的功能。

对于 Magento 2 开发人员

作为 Knockout.js 开发人员，您可能过着对 observables 是如何实现的一无所知的生活。Magento 2 开发人员没有这种奢侈。UI 组件系统大量使用可观察属性，并设置自己的订阅者。好消息是：当你看到类似

//...
someProp: ko.observable('default value')
//...

你不必恐慌。该程序只是使用 someProp 来存储一个值。坏消息是——这个 observable 可能有很多订阅者。这些订阅者可能来自 Knockout.js 模板的数据绑定属性。它们可能来自 Magento 核心代码，用于设置自己的订阅者。您可以通过 _subscriptions 属性查看观察者的回调数

console.log(objectToHoldMyValue._subscriptions);
Object
change: Array[3]
    0: ko.subscription
    1: ko.subscription
    2: ko.subscription

或者看看这样的特定回调

console.log(
objectToHoldMyValue._subscriptions.change[1].callback
);

但是——您受调试器的支配，不知道如何显示这些信息，并且没有简单的方法来判断特定订阅者的来源。此外，此时我们正在深入研究 Knockout.js 内部结构，依赖此类代码进行调试以外的任何事情都会带来巨大的潜在不稳定性。”

来源：https : //alanstorm.com/knockout-observables-for-javascript-programmers/