引言
前端开发过程中，我们经常需要将一些公共的 HTML 片段注入到我们的页面中。这些公共的片段可以是导航栏、页脚、语言选择器、搜索框等等。 在传统上解决这个问题的方法是将这些片段拼接到 HTML 代码中，但这种方式可以变得非常混乱，特别是当我们需要在多个页面使用相同的片段时。 这时，一个名为 Includer 的 npm 包就可以派上用场了。
什么是 Includer？
Includer 是一个小型但非常有用的 npm 包，它允许我们维护多个 HTML 片段，然后在我们的页面中通过一个简单的标记引用这些片段。 Includer 不仅提高了代码可读性和可维护性，而且它还允许我们使用一个单独的文件来编辑这些公共片段的内容。
如何安装 Includer？
我们可以使用 npm 来安装 Includer。你可以在命令行中使用以下命令：
npm install includer --save
如何使用 Includer？
安装 Includer 后，我们就可以在我们的项目中使用它了。 在我们的 HTML 文档中，我们可以通过一个非常简单的语法引入 Includer。下面是一个示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ---------------- ------ ---------------- ----- -- -------- --- -------- ------------------------------------------------- ------- ------ ----- ------ --- ----- ------ ------------ ------------ --- ----- --------------------------------- ----- --------------------------------- --------- ---- --- -------- ------------------ ---------- ------- -------展开代码
在上面的代码中，我们已经在 head 区域中导入了 Includer。现在，我们可以在我们的 HTML 文档中使用 data-include 属性来引用我们的共享组件了。在这个示例代码中，我们引用了 header.html 和 footer.html 两个共享组件。
创建共享组件
现在，我们已经知道了如何在我们的页面中使用 Includer，接下来我们需要创建一些共享组件。共享组件可以是任何编写好的 HTML 片段，例如导航栏、页脚、语言选择器、搜索框等等。
创建一个共享组件非常简单。我们只需要编写一个纯 HTML 文件并将其保存到我们的项目目录中。在这个示例中我们创建了一个 header.html 文件，它包含了一个简单的导航栏：
-- -------------------- ---- ------- ---- ----------- --- -------- ----- ---- ------ ---------------------- ------ ---------------------- ------ ------------------------- ----- ------ ---------展开代码
同样地，我们也可以创建 footer.html 文件。下面是示例代码：
<!-- footer.html --> <footer> <p>© 2021 My Website</p> </footer>
在上面两段代码中，我们只是创建了简单的 HTML 片段。你可以在这些文件中放置任何你想要的 HTML 代码，包括 CSS 和 JavaScript。
Includer 选项
Includer 还有一些额外的选项可以使用。它们可以帮助你更好的使用和组织共享组件。下面是一些常见的选项：
data-include-ignore（忽略）
你可以使用 data-include-ignore 属性来忽略某个共享组件。例如，在下面的代码中，我们忽略了一个名为 comments.html 的组件。
<div data-include="header.html"></div> <div data-include="comments.html" data-include-ignore></div> <div data-include="footer.html"></div>
data-include-replace（替换）
你可以使用 data-include-replace 属性来替换相应的共享组件。例如，在下面的代码中，我们将导航栏替换为一个名为 menu.html 的组件。
<div data-include="header.html" data-include-replace="menu.html"></div> <div data-include="footer.html"></div>
参考资料
- Includer GitHub 页面，https://github.com/vstirbu/Includer
结论
使用 Includer 可以帮助我们更好地维护和组织我们的 HTML 代码。在实践中，它的优雅简洁的语法使得编写和维护代码变得非常方便。 如果您正在寻找一种更好的方式来维护多个 HTML 片段，请尝试 Includer！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77659
