电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 和 Polymer 一起加入 Web 组件革命（2） [打印本页]

作者: look_w 时间: 2018-11-13 19:05 标题: 和 Polymer 一起加入 Web 组件革命（2）

一种自适应的响应式布局组件假设您希望应用程序的布局随着打开应用程序设备的大小而变化。有一种布局应该适合小尺寸的移动设备屏幕，而另一种布局则适合桌面浏览器。在第一个例子中，我们可以了解如何使用 Polymer 创建响应式的布局。
图 2 显示了布局在桌面或平板浏览器中的外观。
图 2. 使用桌面屏幕尺寸的响应式布局

桌面布局的左侧有一个侧边栏，可能用于导航，还有它自己的标题与可单击的菜单选项。在典型的应用程序中，用户在导航栏中进行选择，右侧面板中就会显示所选择的内容。右侧面板在顶部同样有自己的标题工具栏。
当设备屏幕宽度变窄时，左侧边栏的面板也会收缩，只显示内容面板。一个 "hamburger" 菜单按钮将会自动出现在留下面板的工具栏中。图 3 显示了布局的小尺寸设备版本。
图 3. 移动手机窄屏上的响应式布局

单击本段后面的 View the layout 按钮，在桌面浏览器和手机浏览器中打开示例页面，对两种布局进行比较。或者，和本指南中所有的示例一样，您可以在桌面版本中手动调整浏览器窗口的宽度，从而模拟手机浏览器的行为。

请注意，当点击或单击 hamburger 菜单按钮时，抽屉将从左侧滑入，覆盖主面板的右侧（通常是为了显示一个可用选择的列表），如图 4 中所示。
图 4. 导航侧边栏菜单从左侧滑到内容面板之上

如果使用标准的 HTML/JavaScript 库，则需要使用大量的代码才能使用这些库来实现相同的行为。清单 1 显示了使用 Polymer 创建响应式布局的代码。
清单 1. 使用 <core-scaffold> Polymer 组件的滑入响应式布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport"
  content=
  "width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../bower_components/platform/platform.js"></script>
  <link rel="import"
   href="../bower_components/core-scaffold/core-scaffold.html">
</head>

<body>
  <core-scaffold>
  </core-scaffold>
</body>

</html>

HTML Imports  规范支持页面通过                   <link> 标签导入完整的 HTML 文档（包括 HTML、CSS 和相关的                   JavaScript）。已导入 HTML 文档中的 Web 组件可以在多个应用程序中进行重用。现代浏览器军正在致力于 HTML                   Imports 的本地实现。与此同时，Polymer 包含实际上的 polyfill 脚本，以便确保 HTML                   导入行为在所有现代浏览器中都保持一样。

在清单 1 中，Polymer 平台库是通过 <script> 标签中的             platform.js 包含进来的。另外的组件则是通过包含进来的：在这个例子中，<core-scaffold> Web 组件通过             core-scaffold.html 包含进来。
要生成丰富的响应式尺寸调整行为，只需使用 <core-scaffold> Web 组件。             <core-scaffold> 似乎是新出现的 HTML 标签，但它实际上是一个自定义的 Web 组件，属于             Polymer 的核心元素库。Polymer 的核心中包含一整套有用的 Web 组件，可以给 Web 开发带来前所未有的简单体验。您可以浏览                来查看可用的组件。
请注意，<body> 只包含一个 <core-scaffold>             标签，这就足够用了。<core-scaffold> 自定义元素完全封装了复杂的响应式 UI 处理。
可以将 Polymer 组件（包括 <core-scaffold>）相互结合使用，也可以与其他自定义 Web             组件结合使用，以便创建页面或单页面 Web 应用程序（或是自己自定义的 Web 组件）。
通过属性定制 Web 组件与标准 HTML 元素一样，自定义 Web 组件也有可用于未来定制的属性。Polymer             <core-scaffold> 组件有两个可用的属性：

responsiveWidth 控制侧边栏收缩到左侧时的最小设备宽度。此属性的默认值为 600px。
mode 控制内容滚动时的标题行为。mode 的默认值为 seamed。（本指南将在下一示例中探讨其他可能的模式。）

在中尝试将 responsiveWidth 修改为一个较小的值，试验响应式布局切换到窄版本时的情形：

1	<core-scaffold responsiveWidth='300px'></core-scaffold>

请注意：您必须从 Web 服务器运行应用程序，这样 HTML Imports polyfill             才能正常工作。
Shadow DOM 与 Custom Elements  支持使用独立但包含在 Web 页面主层次结构，或者另一个自定义组件的 DOM 树中的自定义元素来创建 DOM                      树。  规范支持浏览器添加和管理新的自定义 HTML 元素。

自定义元素的内部结构也是使用 HTML、CSS 和 JavaScript 来实现的。但实现细节对于元素的用户不可见。感谢自定义元素的提供的封装，您不必担心代码与组件的内部实现之间出现 JavaScript             命名空间冲突或 CSS 样式污染的情况。
从内部讲，<core-scaffold> 包含其他几种 Polymer             核心组件。接下来您就将了解如何定制它们。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)