Question

我有一个我提取和解析的外部API请求以及填充DOM的少数函数，我想编写一个简单的协调算法（不需要高效也不需要优雅它是学习目的），能够检测传入数据的变化并将其反映到实际的DOM

为了更好地说明我可以说我有request初始DOM用一些数据填充original，然后我将有一个定期命中端点并将新数据与旧数据进行比较的函数变化是对它的反应。

到目前为止，我唯一的想法是将初始请求的结果存储到已用于呈现初始DOM的{{1}}值中，然后将updated var存储为在setInterval上更新，如果两个重新渲染整个内容之间存在差异。

一些代码：

var original;
var updated;

/* Take data original data and render DOM*/
function initialRender() {
  // 1. Fetch data transform and store into original
  // Do the inital render with original data
}

/* Make request every 2sec */
setInterval(function() {
  //1. On each call set updated to new data
  //2. Compare original with updated
  //3. If there are changes call initialRender() or other helper function
}, 2000);

我想到的另一种方法是从NodeList实际获得生命DOM，然后每2s重新创建整个DOM，如果它们不同则插入更新的

编辑：数据以JSON形式转换为对象数组，然后用于初始渲染。

动态替换更改的DOM节点

0 个答案: