如何在頁面上的多個元素之間共享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 );