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

我的网页上有两个文本框。单击第一个后，我有一个引导模式，显示一个可搜索的树视图。您单击树视图中的项目，模式关闭，并且选择出现在文本框中。完美运行！

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

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

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

标签： javascriptjqueryhtmlasp.net-mvcbootstrap-4