将jQuery插件拆分为独立方法的旧文档方案是否仍适用？

首先明确说：你从旧文档里找到的拆分插件为独立方法的方案完全具备时效性。jQuery的核心插件扩展机制（基于$.fn挂载）从1.x到现在的3.x版本几乎没有变化，官方文档移除这块内容只是因为现在更推崇ES模块化、类式的插件写法，但这种拆分方法的本质是代码组织与可维护性优化，逻辑上完全适用于所有jQuery版本。

接下来给你一套完整的实现方案，以及实用的参考资源：

一、完整实现示例 #

这种方案的核心是把插件的不同功能（初始化、更新、销毁等）拆成独立的子方法，通过jQuery的dataAPI存储实例状态，避免全局污染。

1. 主插件入口（负责初始化配置与实例存储） #

// 主插件函数，负责初始化配置和存储实例数据
$.fn.myAdvancedPlugin = function(options) {
  // 合并默认配置与用户传入的配置
  const defaultSettings = {
    theme: 'light',
    autoInit: true,
    onReady: function() {}
  };
  const settings = $.extend(true, {}, defaultSettings, options);

  // 遍历所有匹配的DOM元素，保证链式调用
  return this.each(function() {
    const $el = $(this);
    // 将配置和元素实例存储到DOM的data中，方便子方法获取
    $el.data('myAdvancedPlugin', {
      settings: settings,
      $element: $el
    });

    // 如果开启自动初始化，直接调用init方法
    if (settings.autoInit) {
      $el.myAdvancedPlugin.init();
    }
  });
};

2. 拆分独立子方法 #

把不同功能拆成$.fn.myAdvancedPlugin下的属性方法，每个方法专注单一职责：

// 初始化方法：负责绑定事件、渲染DOM等
$.fn.myAdvancedPlugin.init = function() {
  return this.each(function() {
    const $el = $(this);
    const pluginData = $el.data('myAdvancedPlugin');
    const { settings } = pluginData;

    // 初始化逻辑示例：添加主题类、绑定点击事件
    $el.addClass(`my-plugin-${settings.theme}`);
    $el.on('click.myPlugin', function() {
      console.log('Plugin element clicked');
    });

    // 触发ready回调
    settings.onReady.call($el[0]);
  });
};

// 更新配置方法：允许动态修改插件配置
$.fn.myAdvancedPlugin.update = function(newOptions) {
  return this.each(function() {
    const $el = $(this);
    const pluginData = $el.data('myAdvancedPlugin');
    // 合并新配置到原有配置
    pluginData.settings = $.extend(true, pluginData.settings, newOptions);

    // 比如更新主题类
    $el.removeClass(`my-plugin-${pluginData.settings.theme}`)
       .addClass(`my-plugin-${newOptions.theme}`);
  });
};

// 销毁方法：清理事件、移除数据，避免内存泄漏
$.fn.myAdvancedPlugin.destroy = function() {
  return this.each(function() {
    const $el = $(this);
    // 解绑命名空间事件，移除数据
    $el.off('.myPlugin').removeData('myAdvancedPlugin');
    // 移除插件添加的DOM类
    $el.removeClass(function(index, className) {
      return (className.match(/(^|\s)my-plugin-\S+/g) || []).join(' ');
    });
  });
};

3. 调用方式 #

用户可以灵活调用不同方法，支持链式调用：

// 初始化插件（自动调用init）
$('#demo').myAdvancedPlugin({
  theme: 'dark',
  onReady: function() {
    console.log('Plugin ready on', this);
  }
});

// 手动调用init（如果autoInit设为false）
$('#demo').myAdvancedPlugin.init();

// 更新配置
$('#demo').myAdvancedPlugin.update({ theme: 'blue' });

// 销毁插件
$('#demo').myAdvancedPlugin.destroy();

二、参考资源与建议 #

1. jQuery UI历史版本源码：早期的jQuery UI组件（比如1.8.x版本的datepicker、dialog）完全采用这种拆分方法，每个组件都有init、destroy、option等独立方法，源码结构清晰，是最好的学习范本。
2. GitHub遗留插件示例：搜索关键词“jQuery plugin split methods”，能找到不少早期的开源插件（比如表单验证、图表类），它们的代码里都有这种拆分逻辑，你可以clone下来分析实现细节。
3. 经典书籍参考：《jQuery in Action》第二版（注意是第二版，第三版侧重现代JS）里有专门章节讲解“高级插件设计”，详细阐述了如何拆分方法、管理实例状态，内容非常实用。

三、注意事项 #

• 命名空间事件：绑定事件时用命名空间（比如.myPlugin），销毁时可以精准解绑，避免影响其他事件。
• 深拷贝配置：用$.extend(true, {}, defaultSettings, options)做深拷贝，避免嵌套配置被意外修改。
• 链式调用：每个方法都要return this，保持jQuery的链式调用特性。

内容的提问来源于stack exchange，提问作者Mr. CC