HTML 中的可重用视图组件

Question

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

Answer 1

2017 年更新

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

使用 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>

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

在 head 中包含标签：

<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 提供了相当多的元素资源，您可以在此处找到它。

此处介绍了有关使用元素和创建自己的元素的所有内容。

Answer 2

您可以使用服务器端包含直接导入HTML片段（例如标头），但是如今大多数框架都倾向于在更高层次上处理问题，例如 Apache Taglibs 或 Django 模板。

Answer 3

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

这样你就可以：

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

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

如果您使用任何类型的 CMS，他们通常会提供一个模块 想法或插件 来为您完成此任务。你在这里做什么工作？

Answer 4

一般来说，您可以将代码片段放入一个单独的文件中，您可以使用服务器端包含来添加该文件：

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

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

Answer 5

您可以尝试模板引擎，例如 google Closure 模板工具。

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