Question

我的网页上有两个文本框。点击第一个，我有一个自动模式，显示可搜索的树视图。单击树视图中的项目，模式将关闭，选择将显示在文本框中。效果很好！

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

为了让它工作，我复制了模态和js代码的所有html，只是更改了ID以避免两者之间的冲突。这样做我不能和自己一起生活！

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

Answer 1

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

Answer 2

在这个问题中需要解开很多东西。高水平，实现你对JS的要求......

你可以：

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

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

2 个答案: