如何正确创作或创建支持 HTML 数据-* 属性的 JQuery 插件？

Question

我目前正在创建一个 JQuery 插件，它支持用于定义选项的数据属性。 我在 inte.net 上搜索了有关如何正确执行此操作的资源，但找不到任何资源。

到目前为止我做了什么：

HTML：

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

插入：

 $.fn.myPlugin = function () {
        columns:""

    }
    var self = $(this)
    var foo = self.data("columns")

    //..some code to create columns

插件使用：

$("#myTable").myPlugin()

Answer 1

这是基于您的问题的最小 jQuery 插件。

 (function( $ ) { $.fn.myPlugin = function () { this.filter('table').each(function() { var container = $(this); var data = container.data('columns'); var html = '<tr>' + data.map(obj => '<th>' + obj.header + '</th>').join('') + '</tr>'; console.log('html: '+html); container.append(html); }); return this; } }( jQuery )); $('#myTable').myPlugin()

 #myTable th { border: 1px gray solid; padding: 1px 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable" data-columns='[{ "header": "Header1" }, { "header": "Header2" }, { "header": "Header3" }]'> </table>

请注意.filter('table') ，它确保代码仅应用于表格。