Question

在普通编程中可以观察到的东西以及在magento 2 JavaScript框架中可以观察到的东西，可以通过举一些例子来区分

Answer 1

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

在Magento 2中，使用“易吃的东西”有点棘手。 Magento 2的javascript框架作品大量使用了可观察的内容，这超出了普通前端开发人员需要知道的内容。

可观察对象是独立的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"

从上面的代码和注释中可以看到，可观察对象的第一项工作是存储值，返回值以及更改存储的值。如果您不习惯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

您会看到淘汰赛调用您的订阅者方法。

重要：仅当值更改时才调用订阅者。如果您传入观察值的当前值，则淘汰赛将不会调用订阅者回调

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来存储值。坏消息是–可观察的用户可能很多。这些订阅者可能来自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/

在普通js和magento 2 js中可观察到的敲除

1 个答案: