如何正确开发支持HTML data-*属性的jQuery插件？

核心原则 #

• 配置优先级：调用时传入的配置 > HTML data-*属性配置 > 插件默认配置
• 保留jQuery插件的链式调用特性
• 支持多元素实例化
• 确保配置解析的健壮性，处理JSON格式异常

修正后的完整实现 #

1. HTML结构（规范JSON格式）

<table id="myTable" data-columns='[{"header": "Header1"}, {"header": "Header2"}, {"header": "Header3"}]' data-sortable="true">
</table>

注：用单引号包裹JSON内容，内部键值对使用双引号，符合HTML属性语法要求，jQuery的.data()方法会自动将合法的JSON字符串解析为对象/数组。

2. 插件核心代码

$.fn.myPlugin = function(options) {
    // 定义插件默认配置
    const defaults = {
        columns: [],
        sortable: false
        // 可添加更多默认配置项
    };

    // 遍历所有匹配元素，支持多元素调用并保持链式调用
    return this.each(function() {
        const $element = $(this);
        // 读取元素的data属性，自动解析JSON格式值
        const dataConfig = $element.data();
        // 深拷贝合并配置：默认配置 → data属性配置 → 调用传入配置
        const settings = $.extend(true, {}, defaults, dataConfig, options);

        // 插件初始化逻辑
        function init() {
            // 根据columns配置生成表头
            if (settings.columns.length > 0) {
                const headerRow = $('<tr></tr>');
                settings.columns.forEach(col => {
                    headerRow.append(`<th>${col.header}</th>`);
                });
                $element.append(headerRow);
            }
            // 根据sortable配置添加样式/功能
            if (settings.sortable) {
                $element.addClass('sortable-table');
            }
        }

        // 执行初始化
        init();

        // 可选：将实例挂载到元素，方便后续调用公共方法
        $element.data('myPluginInstance', {
            settings: settings,
            // 暴露更新配置的方法
            update: function(newOptions) {
                $.extend(true, settings, newOptions);
                $element.empty();
                init();
            }
        });
    });
};

3. 插件调用方式

// 基础调用：自动读取data属性配置
$("#myTable").myPlugin();

// 自定义调用：传入的配置会覆盖data属性和默认配置
$("#myTable").myPlugin({
    sortable: false,
    columns: [{"header": "自定义表头1"}, {"header": "自定义表头2"}]
});

// 调用实例方法（比如更新配置）
$("#myTable").data('myPluginInstance').update({
    sortable: true
});

关键细节说明 #

• 配置合并：使用$.extend(true, {}, defaults, dataConfig, options)，true表示深拷贝，避免修改原默认配置；配置顺序决定优先级，后面的配置会覆盖前面的。
• data属性处理：$element.data()会自动将data-*属性转换为驼峰命名的对象（比如data-columns转为columns），同时自动解析合法的JSON值。
• 健壮性优化：可添加异常捕获，避免非法JSON导致插件崩溃：

  let dataConfig = {};
  try {
      dataConfig = $element.data();
  } catch(e) {
      console.warn('Data属性解析失败:', e);
  }
  

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