如何在页面上的多个元素之间共享javascript / html？

Question

我的网页上有两个文本框。 单击第一个时，我有一个引导模式，其中显示了可搜索的树状视图。 您在树视图中单击一个项目，模态关闭，选择出现在文本框中。 完美的作品！

现在，我决定对于另一个文本框，我想做同样的事情。 唯一的区别是模态具有不同的标题，而模态树视图的源数据来自不同的端点。 支持树状视图中的搜索和突出显示，打开和关闭模态等的所有其他JavaScript都是相同的。

为了使其正常工作，我为模态和js代码复制了所有html，并只是更改了ID以免两者之间发生冲突。 为此，我不能忍受自己！

所以最后，我有一些js和html作为组件一起工作，我想在多个文本框或我可能创建的任何类型的小部件的页面上重用。 如何设计我的应用程序，以便我可以共享此代码而不在整个页面上重复它？

Answer 1

我认为webcomponents是要走的路。 您可以创建一个接收ID和其他所需数据作为参数的组件，然后创建它的实例。

Answer 2

这个问题有很多需要解决的问题。 高级，用JS实现您的要求...

你可以：

1. 构建一个接受事件对象（或jQuery事件对象）作为其参数的方法； 并处理从该元素的属性中提取数据，设置标题，AJAX树形视图以及返回选择/设置文本框值的操作
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 );