【问题标题】：Reusable view components in HTMLHTML 中可重用的视图组件
【发布时间】：2011-02-14 09:30:42
【问题描述】：

你能在 html 中创建可重用的组件吗？假设我想将一些 css/html 和 js 封装成一个整洁的可重用组件。 Web 开发人员如何做到这一点？我来自地球的 Flex、C# 方面。

【问题讨论】：

我以为我在 html5（或 css3 或相关）规范中看到了一些内容，可以让您在 html/css 中执行此操作。

【解决方案1】：

2017 年更新

这个问题已有 7 年历史了，发生了很多变化。 Web components 现在已实现或可以在每个主要浏览器中与 polyfills 一起使用。这意味着您可以使用 Google 的 Polymer 或 Microsoft 支持的 X-Tag 正是为此而设计的。

使用 Polymer 的示例方法：

custom-tag.html中的自定义标签声明：

<dom-module id="custom-tag">

    <template>

        <style>
            h1 {
               color: red;
            }               
        </style>

        <div class="text-holder">       
            <h1>[[name]]</h1>
            <p>[[description]]</p>
        </div>

    </template>

</dom-module>

<script>
    Polymer({
        is: "custom-tag",
        properties: {
            name: String,
            description: String
        }
    });
</script>

如何在您的页面中使用自定义标签：

在头部包含标签：

<link rel="import" href="path/to/custom-tag.html"/>

然后：

<custom-tag
    name="Lorem"
    description="Lorem ipsum dolor sit amet.">
</custom-tag>

由于 html 导入，您将需要一个简单的 http 服务器。您谈到的封装由 Shadow DOM 提供支持 - 自定义标签中包含的 javascript 和 css 不会“流出”并更改元素外部的任何内容，反之亦然（除非您强制执行）。 Polymer 推出了相当多的元素资产，你可以找到它here。

here 涵盖了有关使用元素和创建自己的元素的所有内容。

【讨论】：

【解决方案2】：

您可以使用Server-Side Includes 直接导入 HTML 片段（例如标头），但如今大多数框架倾向于处理更高级别的内容，例如Apache Taglibs 或 Django templates。

【讨论】：

【解决方案3】：

这取决于您的环境。 HTML（在一个简单的环境中）通常包含在服务器端包含中（其语法取决于您的服务器）。

这样你就可以拥有：

<!-- #include header.html -->
<h1>Blog Page</h1>
<p>content...</p>
<!-- #include footer.html -->

Javascript 包含在外部，因此可以从任何地方调用。如果您处于“简单”环境中（没有服务器端代码、CMS 等），您可能会调用 module.js，它会加载特定的 CSS 样式并将您需要的 HTML 注入 DOM。

如果您使用任何类型的 CMS，他们通常会有一个 module 想法或 plug-ins 为您完成此操作。你在这里做什么？

【讨论】：

只是将我的脚趾浸入水中并进行一些事实调查。
那我就用JS的方法。在 HTML 代码 (
) 中留下一个钩子，并包含 javascript 文件。 JS 将为您的 HTML 创建 DOM 节点，对其应用样式，替换您的“钩子”并创建运行您的位所需的任何 JS 函数。

【解决方案4】：

通常您可以将 sn-ps 放入一个单独的文件中，您可以将其添加到服务器端包括：

<!--#include FILE="you_snippet.html" -->

如果您可以选择，您可能想看看一些模板语言，例如 Apache Velocity。在 Velocity 中，您不仅可以包含不同的文件，还可以定义将为您生成 html 的宏。

【讨论】：

【解决方案5】：

您可以尝试模板引擎，例如 google 关闭 template tools。

您在这里所做的基本上是在一个名为 soy 文件的特殊文件中创建 html 布局，您将为其提供作为参数传入的数据，并且这些数据将使用 javascript/java 动态解释。看看他们的教程，很不错。闭包广泛用于 Gmail、Youtube 以及大部分 Google 的产品中。

【讨论】：