Как правильно создать или создать плагин JQuery, который поддерживает атрибуты HTML data-*?

В настоящее время я создаю плагин 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()

Вам не нужно ничего делать; jQuery уже понимает атрибуты и фактически проанализирует их для вас. Этот вызов self.data() вернет массив объектов.

— 24.11.2022 01:54

Кроме того, в плагине (в отличие от обратного вызова метода jQuery) вам не нужно писать $(this), потому что this будет указывать на объект jQuery, а не на отдельный элемент. На самом деле, стандартная практика для плагина, который может осмысленно работать с более чем одним совпадающим элементом в объекте jQuery, должен использовать цикл .each(), а также, конечно, возвращать объект jQuery в качестве результата, чтобы его можно было использовать в цепочке вызовов. .

— 24.11.2022 01:56

javascript jquery jquery-plugins

24.11.2022 01:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info('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'), который гарантирует, что код применяется только к таблицам.

24.11.2022 01:58