如何正确地编写或创建一个支持HTML数据*属性的JQuery插件?

Question

我目前正在创建一个JQuery插件，支持数据属性来定义选项。我在网上搜索了关于如何正确地做到这一点的资源，但找不到任何。

我已经做了什么:

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')，它确保代码只应用于表。