HTML5 组件 实现标准组件（3）立即实现 Web 组件 Polymer
|
- UID
- 1066743
|
HTML5 组件 实现标准组件（3）立即实现 Web 组件 Polymer
立即实现 Web 组件我在本文中讨论的所有 Web Components API 都是相对较新的，各个浏览器供应商对它们的支持程度各不相同。为了立即有效实现这些组件，不能只编写代码并将代码加载到浏览器中；还需要知道在 HTML5 业务中哪些内容是 polyfill或 shim：允许您使用新功能（如果可用的话）的解决方案，但在不可用时，会返回一个受支持的备用解决方案。
目前，有两个项目提供了 Web Components polyfill：Polymer 和 Mozilla X-Tags。Polymer 只能在 Chrome 中使用，并需要一个 Web 服务器来使用 HTML 导入，它不适于生产。X-Tags 几乎可以在所有现有浏览器中使用，不需要 Web 服务器；但是，X-Tags 只实现定制元素 API，不能实现模板和 Shadow DOM。
接下来，我将分别向您展示如何使用 Polymer 和 X-Tags，将一个标准组件包装在本系列的上一篇文章中实现的专属滑块中。
Polymer按照定义，专属组件不需要遵循组件标准，因此没有实现或使用它们的标准方法。但是，通过将它们包装在标准组件中，可以使它们更易于使用。首先，我使用 Polymer 将这个专属滑块包装在一个标准组件中。图 8 显示了该滑块的 Polymer 版本：
图 8. 一个 polymer 滑块 清单 5 显示了如何使用滑块的 Polymer 版本：
清单 5. 使用 Polymer 滑块标签1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<head>
<title>Slider with Polymer</title>
<script src="../polymer/polymer.js"></script>
<script src="lib/slider.js"></script>
<link rel="import" href="./slider.html" />
</head>
<body>
<x-slider id='slider'
fillColor='goldenrod'
strokeColor='red'>
</x-slider>
</body>
</html>
|
如果将 和本系列第一篇文章中的清单 2（它显示了如何单独使用该专属滑块）进行比较，您会发现 显然更简单一些。您可以使用 x-slider元素创建一个只有一行 HTML 代码的滑块。
x-slider element是在清单 6 中实现的：
清单 6. Polymer 滑块组件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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <element name="x-slider" attributes="strokeColor fillColor">
<template>
<style>
x-slider {
display: block;
}
.x-slider-button {
float: left;
margin-left: 2px;
margin-top: 5px;
margin-right: 5px;
vertical-align: center;
border-radius: 4px;
border: 1px solid rgb(100, 100, 180);
background: rgba(255, 255, 0, 0.2);
box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
cursor: pointer;
width: 25px;
height: 20px;
}
.x-slider-button:hover {
background: rgba(255, 255, 0, 0.4);
}
#xSliderDiv {
position: relative;
float: right;
width: 80%;
height: 65%;
}
</style>
<div id='x-slider-buttons-div'
style='width: {{width}}px; height: {{height}}px;'>
<button class='x-slider-button' id='xSliderMinusButton'>-</button>
<button class='x-slider-button' id='xSliderPlusButton'/>+</button>
<div id='xSliderDiv'></div>
</div>
</template>
<script>
Polymer.register(this, {
width: 350,
height: 50,
strokeColor: 'blue',
fillColor: 'cornflowerblue',
ready: function () {
var self = this,
slider = new COREHTML5.Slider(this.strokeColor,
this.fillColor, 0);
setTimeout( function () { // This timeout is a hack
slider.appendTo(self.$.xSliderDiv);
slider.draw();
}, 200);
this.$.xSliderMinusButton.onclick = function () {
if (slider.knobPercent >= 0.1) {
slider.knobPercent -= 0.1;
slider.erase();
slider.draw();
}
};
this.$.xSliderPlusButton.onclick = function () {
if (slider.knobPercent <= 0.9) {
slider.knobPercent += 0.1;
slider.erase();
slider.draw();
}
};
}
});
</script>
</element>
|
类似于 。这两个清单都定义了一个新元素，并向 Polymer 全局对象注册该元素。它们还定义了一个包含 CSS 样式和标记的模板。 与 的区别是：清单 6 使用了 Polymer 数据绑定和一个 ready事件处理程序。
双大括号（如 {{width}}）表示一个元素属性。您可以在您的元素标记中使用双大括号。在 中，我将元素的封闭 DIV的宽和高设置为页面作者使用元素属性设置的宽和高。
您可以在一个对象中声明属性，该对象可传递到 Polymer.register()方法；例如， 为 x-slider元素声明了 4 个属性：width、height、strokeColor和 fillColor。如果您使用 element元素的 attributes属性来指定属性（也称为 发布属性），页面制作者可在其元素中使用那些属性，就像 中的 x-slider元素一样。
根据 Polymer 文档的记载，当一个组件已经完成其自身的初始化之后，它将调用其 ready()方法（如果该方法存在的话）。该文档没有进一步详细介绍何时对组件进行初始化，但该操作显然是在浏览器准备绘制组件之前完成的。因为是在准备绘制组件之前对组件进行初始化的，而且此时 ready()方法是生命周期中的惟一方法，所以我必须添加一个 setTimeout()程序 (hack)，该程序在调用 ready()方法后的 200 毫秒后绘制了一个滑块。像这样的不完善之处无疑会随时间逐渐消失。（Web Components 规范还定义了一个 inserted回调函数，在将一个元素插入 DOM 后，浏览器会调用此函数，但是在本文发布时 Polymer 还不支持此函数。）
Polymer 也提供一个关于定制元素的 $属性，参考了元素属性的映射。我使用该映射来访问最终包含该专属滑块的 DIV。 |
|
|
|
|
|
