2017年更新

Question

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

Answer 1

2017年更新

此问题已有7年历史，而且已经发生了很多变化。 Web components现在已经实现，或者可以在每个主要浏览器中与polyfill一起使用。这意味着您可以使用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赢得了＆＃34; t＆＃34;＃34;＃34;＃34;＃34;＃34;＃34;并改变元素之外的任何内容，反之亦然（除非你强迫它）。聚合物具有相当大的元素资源，您可以找到它here。

关于使用元素和创建自己的元素的所有内容都包含here。

Answer 2

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

Answer 3

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

你可以这样：

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

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

如果您使用的是任何类型的CMS，他们通常会有module的想法或plug-ins为您解决此问题。你在这干什么工作？

Answer 4

通常，您可以将片段放入可以添加到服务器端的单独文件中：

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

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

Answer 5

你可以试试模板引擎，比如google closure template tools。

你在这里做的基本上是在一个名为soy files的特殊文件中创建html布局，你将把它作为参数提供给传入的数据，这些数据将用javascript / java动态解释。看看他们的教程，非常好。闭包广泛用于Gmail，Youtube以及Google的所有产品。

HTML中可重用的视图组件

5 个答案:

2017年更新

使用Polymer的样本方法：

自定义标记声明：

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