观察ES6模块属性

Observing ES6 Module properties

本文关键字：属性 模块 ES6 观察      更新时间：2023-09-26

我有一个模块：

var progress = {
    val: 0
};
var service = (function(){
    function someMethod(){
        progress.val++;
    }
    return{
        someMethod: someMethod
    };
})();
export {service,progress}

CCD_ 1将执行对数组进行迭代的操作。我想在每次迭代中将progress.val增加一。这种进展应该是可以观察到的：

  System.import('components/Service.js')
   .then(function(M){
            self.progress = M.progress;
           Object.observe(M.progress,function(c){
               console.dir(c);
           });
       });

不幸的是，观察者回调只被调用一次，每次迭代包含一个项目的更改数组。

如何在每次迭代中调用回调？

这就是观察对象的工作原理。

观测者只会在时钟的下一次滴答声发射一组记录。在进行单个更改时，它不会同步启动这些更改。另请参阅对象。观察同步回调。

为了实现您想要的，一种方法是重写迭代器，使其每次在循环中"休眠"，从而给Object.observe一个启动的机会。我不一定推荐这种精确的方法，但只是举个例子：

function iterate(a, fn) {
    (function loop() {
        if (!a.length) return;
        fn(a.shift());
        setTimeout(loop); 
    })();
}

现在，fn对观察对象属性所做的任何更改都将在循环的迭代过程中报告。

你可以使用承诺来完成同样的事情：

function iterate(a, fn) {
    a.reduce((p, e) => p.then(() => fn(e)), Promise.resolve());
}

如果你碰巧处于异步/等待环境中（这是ES7的一个功能，但在Babel等transpiler中可用），那么你也可以做以下操作，这在本质上相当于上面的promise方法：

async function iterate(a, fn) {
    for (i of a) await fn(i);
}

顺便说一句，这里不需要IIFE。此外，self没有声明——我预计self.progress = M.progress行会出现运行时错误。

相关文章：