如何解决Mmenu插件销毁时出现Cannot read properties of undefined报错？

问题根源 #

1. 重复初始化问题：resize事件会频繁触发，每次窗口宽度小于1025时你都调用了$menu.mmenu()，这会导致Mmenu被多次初始化，不仅浪费资源，还可能导致data("mmenu")获取的实例混乱。
2. 未判断实例是否存在：当窗口宽度一开始就大于1025，或者还没触发过初始化逻辑就执行销毁代码时，$menu.data("mmenu")会返回undefined，直接调用destroy()自然会报错。

修复代码 #

// 全局存储Mmenu实例，避免重复初始化和多次获取
let menuApi = null;

$(window).resize(function(e) {
  const windowWidth = $(window).width();
  // 处理移动端菜单初始化
  if (windowWidth < 1025) {
    // 只有当实例未初始化时才执行初始化
    if (!menuApi) {
      $menu.mmenu({
        "offCanvas": {
          "position": "left"
        },
        "navbar": {
          "title": ""
        },
        "theme": "light"
      });
      // 存储实例到全局变量
      menuApi = $menu.data("mmenu");
    }
  } 
  // 处理桌面端销毁菜单
  else if (windowWidth > 1025) {
    // 先判断实例是否存在，存在再销毁
    if (menuApi) {
      menuApi.destroy();
      // 销毁后重置实例，避免下次resize重复调用已销毁的实例
      menuApi = null;
    }
  }
});

// 页面加载时先执行一次resize逻辑，处理初始窗口宽度
$(window).trigger("resize");

关键改动说明 #

• 全局变量存储实例：用menuApi变量保存Mmenu的API实例，避免每次resize都重新从data()中获取，同时方便判断是否已经初始化。
• 初始化前判断：只有当menuApi为null时才调用mmenu()初始化，防止重复初始化。
• 销毁前判断实例存在：调用destroy()前先检查menuApi是否存在，避免undefined报错。
• 销毁后重置实例：销毁菜单后把menuApi设为null，确保下次窗口缩小时能重新初始化。
• 页面加载触发resize：确保页面刚加载时就根据初始窗口宽度执行对应的逻辑，避免初始状态不符合预期。

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