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

Posted 2023-02-23

【中文标题】JavaScript：使用 HTML 文件制作组件？

【英文标题】：JavaScript: Using HTML files to make components?

【发布时间】：2021-11-15 14:08:24

【问题描述】：

有没有办法制作像navbar.html 这样的文件，然后使用 javascript 将这些文件用作组件？例如，假设我有一个名为 imageCarousel.html 的文件，并且我必须在许多不同的 HTML 文件中使用这个文件，那么如何制作一个 JavaScript 文件，它的函数包含我想要显示 HTML 的类文件的代码，然后是 HTML 文件的路径，然后如何在其他 JavaScript 文件中使用该 JavaScript 文件？

我已经搜索了很多不同的地方，我可以清楚地表明没有其他地方可以回答这个确切的问题。在做了所有的研究之后，我问了这个问题。

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

感谢您阅读此查询！

【问题讨论】：

如果您需要这种类型的功能，为什么要使用点 html 扩展？如果您不必拘泥于 html 扩展，那么有多种方法可以实现您所说的。

@JayendraSharan 我愿意接受你的回答。告诉我如何实现这个功能。谢谢！

您正在考虑像 React 这样的代码可重用性，但我认为根据您的查询没有办法做到这一点，您必须将一个 HTML 文件的代码复制到另一个。

如果您想自己处理所有事情，您可以创建带有返回 HTML 模板的函数的 JavaScript 文件。或者您可以使用ejs 或车把或任何其他模板引擎。你也可以使用 React :)

@JayendraSharan 我如何在没有节点的情况下使用 ejs？

【参考方案1】：

我认为您可以使用 react.js 之类的 js 库来做到这一点！有了它，您可以创建一个 js 组件并在其他 js 文件上调用它！如果您不想使用我不知道纯 js 是否可能的反应！

【讨论】：

很抱歉，由于某种原因我不想在这里使用 react。你能编辑你的答案吗？谢谢！

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

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

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

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

有很多tutorials how to use webpack

UPD。也可以看看RequireJS，不过是老办法了。

【讨论】：

但是我先学会它不会花很多时间吗？感谢您的回答顺便说一句

这需要时间，但如果您想在多个模块/页面中重用某些模块，则需要使用一些工具。

好的，可以理解。谢谢！

【参考方案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，并且这个链将随着您添加的组件和脚本的数量而增长。

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

【讨论】：

您是如何在 index.js 文件中获得导航栏功能的？是不是因为之前的script标签？

是的，我更新了我的答案:)

我觉得你的答案最接近我想要的谢谢！

你不接受我的回答..哈哈.. :)

是的，我先接受了你的回答，但后来我也接受了另一个，这就是为什么可能很抱歉

【参考方案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 标记包装在一个根元素中以使其正常工作，否则此函数将仅返回第一个子元素

【参考方案5】：

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

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