Magento 2 - 可观察对象在常见的 knockoutjs 和 magento 2 框架中的工作方式是否存在差异？

Question

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

谁能举个例子区分一下

Answer 1

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

好吧，在 Magento 2 中，“obervables”的使用有点棘手。 Magento 2 的 javascript 框架大量使用了超出普通前端开发人员需要了解的可观察对象。

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对象的第一个工作就是存储一个值，return一个值，改变一个存储的值。如果你不习惯 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]

虽然这个例子有点傻，但在真实的程序中，可观察对象可以让您在变量值发生变化时采取行动。这是一个非常强大的功能。

对于 Magento 2 开发者

作为 Knockout.js 开发人员，您可能过着几乎不了解可观察对象的实现方式的生活。 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
);

但是 — 您受制于调试器 w/r/t 如何显示此信息，并且没有简单的方法来判断特定订阅者的来源。此外，此时我们已深入研究 Knockout.js 内部结构，依赖这种代码进行除调试以外的任何操作都会带来巨大的不稳定潜力。"

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

Magento 2 - 可观察对象在常见的 knockoutjs 和 magento 2 框架中的工作方式是否存在差异？

Magento 2 - Is there a difference on how observables work in common knockoutjs and in the magento 2 framework?

observable

knockout.js

magento2