在jQuery插件中覆盖Data变量的问题

我来帮你捋捋这个问题——你遇到的无法覆盖data中嵌套数据项的情况，大概率是因为对jQuery data() 方法处理嵌套对象的逻辑理解有偏差。先看你初始化data的代码：

$this.data({
  'menu': {
    'expand': false,
    'initDone': false,
    'runFirtTime': true
  },
  'item': {
    'clicked': false,
    'lastItem': 'Nothing'
  },
  'button': {
    'isVisible': false,
    'clicked': false
  }
});

问题根源 #

如果之后你尝试用类似下面的方式修改某个子项，就会出问题：

// 错误：这会直接替换整个menu对象，丢失initDone、runFirtTime属性
$this.data('menu', { 'expand': true });

jQuery的data()方法在给已有键赋值时，会直接替换掉原来的值——这里就是把完整的menu对象换成了只有expand: true的新对象，不是你想要的“覆盖单个子属性”效果。

而如果是直接修改对象引用：

$this.data('menu').expand = true;

虽然这个写法本身能生效（因为对象是引用类型），但如果之后你需要批量更新多个子属性，或者怕引用修改带来的意外问题，就需要更稳妥的方式。

解决方案 #

方案1：修改单个子属性（最直接）

先取出对应的嵌套对象，修改属性后再存回去（其实引用修改后不存也能生效，但存回去更稳妥，避免特殊场景下的失效）：

// 取出menu对象
const menuState = $this.data('menu');
// 修改单个属性
menuState.expand = true;
menuState.initDone = true;
// 存回data
$this.data('menu', menuState);

方案2：批量更新子属性（用深合并）

如果需要一次性更新多个子属性，用$.extend(true)做深合并，保留原有未修改的属性：

$this.data('menu', $.extend(true, {}, $this.data('menu'), {
  expand: true,
  runFirtTime: false
}));

这里的true表示深拷贝，确保嵌套的属性也能正确合并，不会丢失原有数据。

方案3：统一管理整个插件状态（推荐）

把所有插件状态放到一个单独的data键下，比如myPluginState，这样管理起来更清晰，不容易搞混各个嵌套对象：

// 初始化时
$this.data('myPluginState', {
  menu: {
    expand: false,
    initDone: false,
    runFirtTime: true
  },
  item: {
    clicked: false,
    lastItem: 'Nothing'
  },
  button: {
    isVisible: false,
    clicked: false
  }
});

// 修改时
const pluginState = $this.data('myPluginState');
pluginState.menu.expand = true;
pluginState.item.lastItem = 'user-profile';
// 可选：存回data（引用类型修改后其实已生效，存回是为了保险）
$this.data('myPluginState', pluginState);

整合到你的插件里 #

给你一个完整的插件示例片段，把状态管理逻辑加进去：

(function($) {
  $.fn.myPlugin = function(options) {
    const $this = $(this);
    // 合并默认配置和用户选项
    const settings = $.extend(true, {}, $.fn.myPlugin.defaults, options);

    // 初始化插件状态（只在第一次调用时初始化）
    if (!$this.data('myPluginState')) {
      $this.data('myPluginState', {
        menu: {
          expand: false,
          initDone: false,
          runFirtTime: true
        },
        item: {
          clicked: false,
          lastItem: 'Nothing'
        },
        button: {
          isVisible: false,
          clicked: false
        }
      });
    }

    // 示例方法：展开菜单
    this.expandMenu = function() {
      const state = $this.data('myPluginState');
      state.menu.expand = true;
      // 这里可以加菜单展开的DOM操作逻辑
      console.log('菜单已展开:', state.menu.expand);
      return this; // 支持链式调用
    };

    // 示例方法：记录点击的菜单项
    this.recordClickedItem = function(itemId) {
      const state = $this.data('myPluginState');
      state.item.clicked = true;
      state.item.lastItem = itemId;
      return this;
    };

    // 第一次初始化逻辑
    const state = $this.data('myPluginState');
    if (state.menu.runFirtTime) {
      // 执行第一次加载的逻辑
      state.menu.initDone = true;
      state.menu.runFirtTime = false;
      $this.data('myPluginState', state);
    }

    return this;
  };

  // 插件默认配置
  $.fn.myPlugin.defaults = {
    // 你的默认配置项，比如动画时长、样式类名等
    animationDuration: 300
  };
})(jQuery);

这样你就能轻松修改插件的控制与状态信息，不会再出现数据丢失或者无法覆盖的问题啦～

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