Polymer 是通往 Web 组件美好未来的一个门户。我们希望让用户能够轻松使用和构建自定义元素。在过去一年中,该团队一直在努力为不断演进的规范开发一系列 polyfill。除此之外,我们还创建了一个便捷的语法糖库,以便更轻松地构建 Web 组件。最后,我们将创建一组界面和实用程序元素,以便在您的应用中重复使用。在 2013 年 Chrome 开发者峰会上,我深入探讨了 Polymer 的不同部分以及“一切皆元素”这一理念背后的哲学。
幻灯片:http://html5-demos.appspot.com/static/cds2013/index.html
“一切皆元素”(从 <select> 到自定义元素)
幻灯片:http://html5-demos.appspot.com/static/cds2013/index.html#6
在 20 世纪 90 年代,构建网页虽然受到限制,但功能强大。我们只有几个元素可供使用。强大之处在于…一切都是声明式的。无需编写大量 JavaScript 代码,即可轻松创建页面、添加表单控件并创建“应用”。
以不起眼的 <select> 元素为例。只需声明该元素,即可使用其中内置的大量功能:
- 可通过 HTML 属性进行自定义
- 使用默认界面呈现子元素(例如
<option>),但可通过属性进行配置。 - 在其他情境(例如
<form>)中很有用 - 具有 DOM API:属性和方法
- 在发生值得注意的事情时触发事件
Web 组件提供了重返 Web 开发鼎盛时期的工具。在这个世界中,我们可以创建新的元素,这些元素让人联想到 <select>,但却是针对 2014 年的用例而设计的。例如,如果 AJAX 是在今天发明的,它可能是一个 HTML 标记(示例):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
或数据绑定到 queryMatches 属性的自适应元素:
<polymer-media-query query="max-width:640px" queryMatches="">
这正是我们在 Polymer 中采用的方法。我们不构建基于 JavaScript 的单体式 Web 应用,而是创建可重复使用的元素。随着时间的推移,整个应用会通过将较小的元素组合在一起而不断发展。甚至整个应用都可以是一个元素:
<my-app></my-app>
使用 Polymer 的特殊方法构建 Web 组件
幻灯片:http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer 包含许多便利功能,可用于构建基于 Web 组件的应用:
- 声明式元素注册:
<polymer-element> - 声明式继承:
<polymer-element extends="..."> - 声明式双向数据绑定:
<input id="input" value=""> - 声明式事件处理脚本:
<button on-click="" - 已发布的属性:
xFoo.bar = 5<-><x-foo bar="5"> - 属性观察:
barChanged: function() {...} - 默认使用 PointerEvents/PointerGestures
这个故事告诉我们,编写 Polymer 元素的核心在于声明式。您需要编写的代码越少,效果就越好 ;)
Web 组件:Web 开发的未来
幻灯片:http://html5-demos.appspot.com/static/cds2013/index.html#26
如果我不提及 Web 组件背后的标准,那就是我的失职。毕竟,Polymer 是基于这些不断演进的基础 API 构建的。
我们正处于 Web 开发领域一个非常激动人心的时刻。与添加到 Web 平台的其他新功能不同,构成 Web 组件的 API 并不华丽,也不是面向用户的。它们纯粹是为了提高开发者效率。四个主要 API 各有其用,但结合使用时,会产生神奇的效果!
- Shadow DOM - 样式和 DOM 封装
- 自定义元素 - 定义新的 HTML 元素。为它们提供一个包含属性和方法的 API。
- HTML 导入是 CSS、JS 和 HTML 软件包的分发模型。
- 模板 - 适当的 DOM 模板,用于定义稍后要标记的标记的惰性块
如果您想详细了解这些 API 的基础知识,请访问 webcomponents.org。