是否有辦法制作像navbar.html這樣的檔案，然后使用JavaScript來使用像這樣的檔案作為組件？例如，假設我有一個叫做imageCarousel.html的檔案，我必須在許多不同的HTML檔案中使用這個檔案，那么我怎樣才能制作一個JavaScript檔案，它有一個函式，可以接收我想顯示HTML檔案代碼的類，然后是HTML檔案的路徑，然后還可以在其他JavaScript檔案中使用該JavaScript檔案？
我已經搜索了許多不同的地方，我可以明確地說，沒有其他地方可以解決這個確切的問題。而且我是在做了所有的研究之后才提出這個問題的。
我也是在做了所有的研究之后才提出的。
此外，我不想在這里使用任何庫，如 react 等。 感謝您閱讀這個問題！ uj5u.com熱心網友回復： 你可以使用JS函式創建你的模板。正如評論中所解釋的，你需要某種開發環境將你的代碼寫成多個檔案，然后組織它們。
如果你不想這樣做......這里是你可以做的。
請看這個codeandbox的例子。
https://codesandbox.io/s/elegant-mccarthy-t6msj?file=/index.html PS: 這是一個不好的做法，而且隨著你的應用程式的增長，它將變得復雜。因為匯入檔案的順序會很重要。把它們看作是depedencies。在這種情況下， 所以我建議你，如果你想建立一個應用程式，可以探索模塊構建庫。如果你只是想學習......那么我想這將有助于你。
uj5u.com熱心網友回復： 用JS專案通常在許多 為了將所有檔案捆綁在一起并生成HTML JS靜態檔案，需要使用捆綁器。捆綁器還可以轉譯較新的JS語法，以支持舊的瀏覽器。
最常用的捆綁器是webpack，也可以看看 UPD。也可以看看RequireJS，但這是老辦法了。index.html
<script src="/path/to/Navigation. js"></script>>
<script src="/path/to/index. js"></script>
in Navigation.js
功能Navbar (text) {
return `
<nav class='navbar'>
<h1>Hello Template</h1>
<a href="www. google.com">Go To Google</a>
<h3>${text}</h3>
</nav>
`。
};
in index.js
document.getElementById("app"/span>)。 innerHTML = Navbar("Hello from template") 。
index.js需要Navigation.js，這個鏈條會隨著你添加的組件和腳本的增加而增加。
.js檔案中使用模塊，而不是html。對于匯入其他模塊可以使用import something from './file.js或者const module = require('./someFile.js')。rollup、parcel或esbuild。
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
function loadHTML(url){
return new Promise((res,rej)=> /span>{
fetch(url).then(r=>/span>r。 text().then(r=> {
var html = document.createElement("div"/span>)
html.innerHTML = r
res(html.querySelector("*"/span>)
})
})
}
loadHTML("scrollImageChange.html").then(>r=> //span>{
document.body.append（r)
})
注意：將所有的HTML標記包在一個根元素里面，以便正常作業，否則這個函式將只回傳第一個子元素
uj5u.com熱心網友回復：
我認為你可以決議那個HTML檔案，使其成為一個DOM物件，然后你可以隨意操作它。就像一個JS組件。
例如，使用HTTP呼叫將HTML檔案獲取為字串，然后用DOMParser()來使用它。 來創建一個DOM物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/333747.html
標籤：