JavaScript: 使用HTML 文件制作组件？

Question

有没有办法制作像navbar.html这样的文件，然后使用JavaScript将这样的文件作为组件使用？例如，假设我有一个名为 imageCarousel.html 的文件，我必须在许多不同的 HTML 文件中使用这个文件，那么我如何制作一个 JavaScript 文件，该文件具有接受的功能我想显示 HTML 文件代码的 class，然后是 HTML 文件的路径，然后我如何在其他 JavaScript 文件中使用 JavaScript =30=] 个文件？

我搜索了很多不同的地方，我可以明确地说没有其他地方可以解决这个确切的问题。我在做了所有研究之后才问这个问题。

我也不想在这里使用任何库，比如 react 等

感谢阅读此查询！

Answer 1

我认为你可以使用像 react.js 这样的 js 库！用它你可以创建一个js组件并在其他js文件上调用它！如果你不想使用 react，我不知道它是否可以使用纯 js！

Answer 2

对于 JS 项目，通常在许多 .js 文件中使用模块，而不是 html。对于导入其他模块可以使用 import something from './file.js 或 const module = require('./someFile.js').

为了将所有文件捆绑在一起并生成HTML + JS静态文件需要使用bundlers。捆绑器还可以转换更新的 JS 语法以支持旧浏览器。

最常用的捆绑器是webpack，也可以看看rollup、parcel或esbuild。

有很多tutorials how to use webpack

更新。也可以查看 RequireJS，但这是旧方法。

Answer 3

您可以使用 JS 函数创建模板。如评论中所述，您需要某种开发环境才能将代码写入多个文件，然后进行组织。

如果您不想这样做...您可以这样做。

index.html

<script src="/path/to/Navigation.js"></script>
<script src="/path/to/index.js"></script>

in Navigation.js

function 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").innerHTML = Navbar("Hello from template");

例如，请参阅此代码框： https://codesandbox.io/s/elegant-mccarthy-t6msj?file=/index.html

PS：虽然这是一种不好的做法，并且随着应用程序的增长它会变得复杂。因为导入文件的顺序很重要。将它们视为依赖关系。在这种情况下，index.js 需要 Navigation.js 并且此链将随着您添加的组件和脚本的数量而增长。

因此，如果您想构建应用程序，我建议您探索模块构建库。如果您只是想学习...那么我想这会有所帮助。

Answer 4

function loadHTML(url){
    return new Promise((res,rej)=>{
        fetch(url).then(r=>r.text()).then(r=>{
            var html = document.createElement("div")
            html.innerHTML = r
            res(html.querySelector("*"))
        })            
    })
}

loadHTML("scrollImageChange.html").then(r=>{
    document.body.append(r)
})

注意： 将所有 html 标记包装在一个根元素中以使其正常工作，否则此函数将 return 仅第一个子元素

Answer 5

我认为您可以解析那个 HTML 文件，使它成为一个 DOM 对象，然后您可以随意操作它。就像一个JS组件。

例如，使用 HTTP 调用将 HTML 文件作为字符串获取，然后将其与 DOMParser() 一起使用创建一个 DOM 对象。

JavaScript: 使用HTML 文件制作组件？

JavaScript: Using HTML files to make components?

html

javascript

components