Polymer 声明性组件、封装组件、可重复使用组件

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

在 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="{{isPhone}}"></…

这正是我们在 Polymer 中采用的方法。与其构建基于 JavaScript 的单体式 Web 应用,不如创建可重复使用的元素。随着时间的推移,将较小的元素组合在一起后,整个应用就会发展壮大。糟糕,整个应用可能是一个元素:

<my-app></my-app>

使用 Polymer 的特殊酱构建网络组件

幻灯片http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer 为构建基于 Web 组件的应用提供了许多便利

  • 声明式元素注册:<polymer-element>
  • 声明式继承:<polymer-element extends="...">
  • 声明式双向数据绑定:<input id="input" value="{{foo}}">
  • 声明式事件处理脚本:<button on-click="{{handleClick}}">
  • 已发布的属性: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 本身都很有用,但结合起来就会发生一些神奇的事情!

  1. Shadow DOM - 样式和 DOM 封装
  2. 自定义元素 - 定义新的 HTML 元素。为他们提供一个包含属性和方法的 API。
  3. HTML Imports 是 CSS、JS 和 HTML 软件包的分发模式。
  4. 模板 - 适当的 DOM 模板,用于定义稍后要消灭的闲置标记块

如果您想详细了解这些 API 的基础知识,请访问 ebidel.github.com/webcomponents