HTML5 组件实现标准组件（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-19 19:24 | 只看该作者

HTML5 组件实现标准组件（1）

在这个由三部分组成的系列文章的前两部分中，您已经学习了如何实现一个专属 HTML5 滑块组件。该组件提供了许多复杂功能；例如，当用户单击轨道时，该组件会使用 CSS3 转换顺畅地为滑块旋钮制作动画效果。但从用户角度来看（正如您在第 1 部分中看到的），在应用程序中使用它没有在内置 HTML 元素中使用它那样简单。
要使用这个专属滑块，您必须：

向您的 HTML 添加一个空的 DIV。
创建一个新的 COREHTML5.Slider。
将您在第二步创建的滑块附加到第一步创建的空的 DIV中。
实现事件处理程序，以便将控制权转交给滑块。

除了难以使用之外，该专属滑块还容易被滥用，无论是有意的还是无意的。任何人都可以访问这个滑块的元素，因为（几乎和当今其他所有 JavaScript 专属组件一样）滑块可直接将它们添加到 DOM 树中。
专属组件专属组件是一个无需遵循标准 API 来实现组件的组件。

理想的做法是减少先前的步骤，仅 将滑块标记添加到 HTML中。在本文中，您所要做的就是，使用以下 API 将专属滑块转换成为标准的 HTML5 组件：

Shadow DOM：Shadow DOM API 支持您将元素添加到通过常用方法（比如 document.getElementById()）无法访问的 DOM 树。Shadow DOM 中的元素隐藏在暗处；它们对 DOM 树其他部分实际上是不可见的，在默认情况下，它们不受周围文档中的 CSS 的影响。
模板：HTML5 模板是一个惰性文档片段。当您需要显示这些片段时，可以 压制（stamp out）（意思是创建）该模板，让片段出现在 DOM 树中。这些模板允许您封装那些您可以创建和定制的 HTML、JavaScript 和 CSS。
定制元素定制元素是组件的标签。定制组件的标签必须包含一个连字符（例如 <custom-tag>），除此之外，它们与内置 HTML 标签没什么区别。
HTML 导入：HTML 导入允许您从一个 HTML 文件中导入另一个，这使得您可以在其自身文件中实现定制组件。

这些 API 目前仍正开发中。撰写文本之时，还没有浏览器支持所有这些 API。因此，如果现在开始实现 HTML5 标准组件，那么可以从 Polymer 和 X-Tags 这两个开源项目中进行选择，它们提供了缺失的功能。
本文向您展示了如何：
HTML 5 专题HTML5 代表了 Web 业务和云业务在实现方式上的里程碑式改变。本将顺应潮流为您介绍一些和 HTML5 新特性相关的内容，及其炫酷的效果。

在 Shadow DOM 中封装组件标记。
从惰性 HTML 模板中创建活动 DOM 元素。
创建定制元素并将它们连接到 JavaScript。
导入 HTML 文件。
使用 Polymer 实现组件。
使用 X-Tags 实现组件。

仅适用于 Chrome在撰写本文时，Shadow DOM 示例只能在最新版的 Chrome 浏览器中运行。

Shadow DOM图 1 显示了一个正在播放视频的 HTML5 应用程序，以及 Chrome 的 Element 检查器（在 Tools->Developer tools下提供），该检查器将显示 video元素内的元素：
图 1. 查看 video元素的内部

请注意，尽管 video元素显然包含一个播放 / 暂停按钮、进程指示器和其他元素，但 Element 检查器显示 video元素内部只有一个 source元素。您看不见它们，因为它们位于 Shadow DOM 中，默认情况下是看不见的。图 2 展示了如何在 Chrome 的 Element 检查器中显示 Shadow DOM 元素：
图 2. 在 Chrome 中启动 Shadow DOM

要得到所示的设置对话框，单击 Chrome 开发人员工具窗口右下角的齿轮图标。向下滚动 Show Shadow DOM 复选框。在选中该复选框时，Chrome 的 Element 检查器显示了 Shadow DOM 中的元素，如图 3 所示：
图 3. 查看 video元素的 Shadow DOM

和一样，显示了 video元素中的元素，但这一次 video元素的内部构件是可见的，因为 Chrome 正在显示 Shadow DOM 元素。
Shadow DOM（直到近期才向浏览器实现者提供）已被证明对开发人员非常有用，因为在默认情况下，Shadow DOM 元素是不可访问的，而且不受周围 DOM 树的影响。因为从本质上讲，它们封装在自己的世界中，其他组件不会影响它们的工作方式。
图 4 显示了一个人为示例 (contrived example) 的结果，该示例展示了如何将元素放入 Shadow DOM：
图 4. 改变按钮的影子根 (shadow root)

该应用程序开始看起来如左边的屏幕截图所示，只显示一个标题和一个按钮。如果单击该按钮，那么应用程序将会使用图片和字幕替换文本（如右边屏幕截图所示），图片和字幕位于按钮的 Shadow DOM 中。
清单 1 显示了应用程序的 HTML，如所示：
清单 1. 填充按钮的 Shadow DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
  <head>
   <title>Shadow DOM</title>

   <style>
   button {
      font: 18px Century Schoolbook;
      border: thin solid gray;
      background: rgba(200, 200, 200, 0.5);
      padding: 10px;
   }
   </style>
  </head>

  <body>
   <h1>Shadow DOM</h1>

   <button id='button'>Click this button</button>

   <script>
      var b = document.getElementById('button');

      b.onclick = function (e) {
         var sr= b.webkitCreateShadowRoot();

         sr.innerHTML= '<p>This content is in the shadow DOM</p>' +
                        '<img src="beach.png">';
      };
   </script>
  </body>
</html>

在浏览器中加载应用程序时，底部的 JavaScript  开始运行，并创建一个 onclick事件处理程序，该程序使用 webkitCreateShadowRoot()方法创建 影子根，即 Shadow DOM 树中的顶端节点。事件处理程序然后使用两个元素填充影子根：一个段落和一个图像。
Shadow DOM 提供了封装 Shadow DOM 为定制组件提供了面向对象的编程的最基本原则 —封装。组件开发人员可以使用 Shadow DOM 以 CSS 样式或编程访问的形式保护其组件的内部构件免受外部干扰。这项功能对于确保组件可以安全互操作至关重要。

无论何时为元素创建一个影子根并随后设置该元素的内部 HTML，都会覆盖元素的原始内容，正如  中的应用程序所示。
默认情况下，按钮没有 Shadow DOM，因此，浏览器允许您创建一个，如  所示。但是对于元素（比如 video元素）来说，默认情况下已经有一个 Shadow DOM，该浏览器不太适用。如图 5 所示，sr = b.webkitCreateShadowRoot(); 导致 Chrome Element 检查器发出一个错误消息：A Node was inserted somewhere it doesn't belong。
图 5. 尝试更改 video元素的影子根（并获得失败）

收藏分享评分

回复引用

订阅 TOP

返回列表

HTML5 组件 实现标准组件（1）

HTML5 组件 实现标准组件（1）

HTML5 组件实现标准组件（1）

HTML5 组件实现标准组件（1）