更新大量的UIMarker内容
有时业务里需要加载大量的UIMarker且这些UIMarker里的内容需要动态更新
这里介绍下怎么样动态的去更新UIMarker的内容
前置知识
地球人都知道dom的更新是非常慢的，这也是前端各种框架抽象虚拟dom,当数据更新时先diff，然后在patch的原因, 当然虚拟dom的作用不仅仅这个，还可以用来跨平台，比如react-dom 也可以应用到react-native
所以：
- 更新DOM内容的时候要做到哪里变化更新哪里
- 内容更新时不要简单粗暴的 直接替换
- 总之要尽可能的减少 repaint和relayout
UIMarekr的内容更新
- 位置更新了就 更新UIMarer的位置(setCoordinates)
- 内容更新了就更新DOM节点里变化的部分
js
let time = Date.now();
function animation() {
const currentTime = Date.now();
if (currentTime - time > 50) {
markers.forEach((marker) => {
const uiDom = marker.getDOM();
if (uiDom.style.visibility !== "visible") {
return;
}
const { name, wendu, yali, liu } = getMarkerData();
const dom = uiDom.children[0];
dom.querySelector(".markerName").textContent = name;
const rows = dom.querySelectorAll(".markerBody .markerRow");
const values = [wendu, yali, liu];
Array.prototype.forEach.call(rows, (row, index) => {
row.textContent = values[index];
});
});
time = currentTime;
}
requestAnimationFrame(animation);
}
animation();利用前端框架来更新dom
UIMarekr的content也是支持dom节点，不仅仅支持html字符串的，你可以将前端框架的生成的dom传递给content，
然后利用前端框架来做dom变化的管理(diff,patch),这样开发时你就可以省去手动管理dom的内容，只要专注于数据的 管理即可
下面是个利用vue的生成的dom节点作为UIMarker content的例子：