javascript - 异步数据检索和缓存

Question

我想定期重新运行一些依赖于从服务器检索的数据的方法*。但是，我也想缓存该数据并且只访问服务器一次。

如果是 jQuery，我会做类似的事情

function draw() {
  var data = undefined;

  // Pre-data retrieval code
  var foo, bar, alpha, beta, gamma, etc.
  ...

  if (data == undefined) {
    $.ajax({
      ...
      async: false, // IMPORTANT PART
      success: function(data) {
         data = processData(data);
      }
    });
  }

  doSomethingComplex(data);

  // Defined within to inherit scope
  // i.e., don't want to pass in foo, bar, alpha, beta, gamma, etc.
  function doSomethingComplex() {...}
}

但是，d3 的 XHR 函数似乎将 async 参数硬编码为 true。所以我发现自己在做类似的事情

if (data != undefined) doSomething(data);
else {
  d3.json(..., function(data) {
    data = processData(data);
    doSomething(data);
    }
}

1) 还有哪些其他设计用于缓存和决定是否进行 AJAX 调用？特别是在 d3 中。

2)在draw函数中定义doSomethingComplex(以避免传入大量参数)似乎很懒。传递每个变量有什么好处吗？

*我的具体情况是在窗口调整大小时重新绘制 d3 条形图(我不喜欢 viewBox 和 preserveAspectRatio 处理文本大小调整的方式)。我很乐意听到有关调整大小时重绘的其他建议，但对上述设计的建议很感兴趣

Answer 1

你的第二个例子是更好的方法。使用 sync: true 进行 Ajax 调用会使其同步，并且违背了进行 AJAX 的全部目的(记住 A 在 AJAX 中代表什么) )调用。

至于在绘制中调用 doSomethingComplex 是好还是坏，如果不考虑整个设计的整体水平，就很难回答。从表面上看，它违反了SRP ，但是，对于 JavaScript，有时这样做可以使整个代码流程合乎逻辑并且更易于遵循。当实用主义有意义时，我倾向于放弃教条主义。

我想说尝试重构代码，以便它不需要在绘制中调用 doSomethingComplex 并看看这是否更有意义。一般来说，单个函数执行的任务越少，测试和维护代码就越容易，不要忘记出现错误的可能性就越小。

为了减少需要传递的变量数量，您始终可以将它们包装在单个对象中:

var state = {
 foo: ...,
 bar: ...
 ...
};

doSomethingComplex(state);

通过这样传递状态，您也可以避免与闭包相关的副作用。并不是说闭包总是不好，但如果你能设法少一件需要担心的事情，为什么不这样做呢？

同样，所有这一切都取决于事物如何融入更大的图景并使用这些点作为指导灯。没有 Elixir 。