Как я могу поделиться javascript / html между несколькими элементами на странице?

Question

У меня есть веб-страница с двумя текстовыми полями.После нажатия на первую, у меня есть модальный вариант начальной загрузки, который отображается с возможностью поиска в виде дерева.Вы щелкаете элемент в древовидном меню, модальное окно закрывается, и выбор появляется в текстовом поле.Работает отлично!

Теперь я решил, что для другого текстового поля я хочу сделать то же самое.Единственное отличие заключается в том, что у модального заголовка другое название, а исходные данные для модального древовидного представления поступают из другой конечной точки.Все остальные javascript для поддержки поиска и выделения в древовидной структуре, открытии и закрытии модального окна и т. Д. Одинаковы.

Чтобы заставить его работать, я продублировал все html для модалов и кода js и простоизменил идентификаторы, чтобы избежать столкновений между ними.Я не могу жить с собой ради этого!

В итоге у меня есть несколько js и html, которые работают вместе как компонент, который я хочу повторно использовать на странице среди нескольких текстовых полей или любого типа виджета, который я могуСоздайте.Как мне спроектировать свое приложение, чтобы я мог поделиться этим кодом и не дублировать его по всей странице?

Answer 1

В этом вопросе есть что распаковать.Высокий уровень, для достижения того, что вы просите, с помощью JS…

Вы можете:

1. Создать метод, который принимает объект события (или объект события jQuery) в качестве аргумента;и обрабатывает извлечение данных из атрибутов этого элемента, установку заголовка, AJAXing просмотра дерева и возвращение выбора / установки значения текстового поля
2. встраивание уникальных данных в атрибуты данных в каждом текстовом поле
3. установить прослушиватель события click для передачи элемента event.target с его уникальными data- атрибутами в метод

Разметка:

<input type="text" id="foo" data-endpoint="/path/to/endpoint_1" data-title="Modal Foo" value="" />

JS

function on_click_modal_spawning_textbox( event ) {
  // get the salient data from the `data-` attributes on the `event.target`
  // do modal stuff, programmatically replace the modal title, AJAX treeview, et cetera…
}

// assuming you're using jQuery, otherwise this would be a vanilla `.addEventListener()`
$( document ).on( 'click', 'input[ data-endpoint ]', on_click_modal_spawning_textbox );

Answer 2

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