Polymer 是 Web 组件未来前景之一。我们希望让用户能够轻松使用和构建自定义元素。在过去的一年里,该团队一直致力于为不断变化的规范打造一组 polyfill。除此之外,我们还创建了一个方便的糖添加库,以便您更轻松地构建网络组件。最后,我们将制作一组可在您的应用中重复使用的界面和实用程序元素。在 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 组件的 API 并不醒目,也不面向用户。它们完全是为了提高开发者的工作效率。这四个主要 API 各自非常有用,但组合在一起后,就会发生一些神奇的事情!
- Shadow DOM - 样式和 DOM 封装
- 自定义元素 - 定义新的 HTML 元素。为他们提供具有属性和方法的 API。
- HTML 导入是一系列 CSS、JS 和 HTML 的分发模式。
- 模板 - 适当的 DOM 模板,用于定义要在稍后删除的 inert 标记块
如果您想详细了解 API 的基础知识,请访问 webcomponents.org。