如何优化JavaScript代码：消除mousemove事件与if判断的重复冗余

优化思路 #

你这段代码的重复逻辑非常好剥离：只有弹窗里显示的部门名称是差异化内容，其余的弹窗创建、鼠标事件绑定、坐标计算逻辑完全一致，直接把差异化的部分提前判断处理，公共逻辑复用即可，同时还可以修复原有逻辑的潜在问题、进一步优化性能。

核心优化点 #

• 剥离唯一的差异化变量：只提前判断dept的取值，决定弹窗里显示的部门名称，不用把整套逻辑写两遍
• 修复原有逻辑漏洞：原代码在窗口宽度恰好等于480px时，不会进入任何判断分支，x、y变量未定义会导致报错，改用三元表达式覆盖全场景
• 降低DOM操作频率：原代码每次mousemove都会执行一次append操作，优化后只在鼠标移入时添加一次弹窗，mousemove仅更新坐标，性能更好
• 复用重复的坐标计算逻辑，避免冗余代码，同时缓存重复调用的DOM查询结果，减少性能损耗

优化后代码 #

// 提前处理唯一的差异化内容：弹窗显示的部门名
const showDept = dept === "Parlement européen" ? dep : dept;
// 统一创建弹窗
const popup_topo = $(`<div class='popup_topo'><strong>${showDept}<br/>${total} parrainages</strong></div>`);
const $this = $(this);

$this.on("mouseenter", function() {
  // 鼠标移入时只添加一次弹窗
  $this.append(popup_topo);
}).on("mousemove", function(event) {
  const winWidth = $(window).width();
  const offset = $this.offset();
  // 三元表达式直接计算x偏移，覆盖全窗口宽度场景
  const xOffset = winWidth < 480 ? -45 : 30;
  const x = event.pageX - offset.left + xOffset;
  const y = event.pageY - offset.top + 30;
  // 仅更新坐标
  popup_topo.css({
    top: `${y}px`,
    left: `${x}px`
  });
}).on("mouseleave", function() {
  popup_topo.remove();
});

内容的提问来源于stack exchange，提问作者Meryem ACHEMLAL