Google 发布新一代Web UI库Polymer

在今年的Google I/O大会上，Google发布了Polymer，它是一个使用Web组件构建Web应用的类库，同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能，它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外，Polymer提供了一系列的部件的例子，其中包括天气、时钟、股票行情和线型图。
Web组件让开发者能创建自定义和可重用的HTML 标记。下面的例子中，是一个<my-own-tag>标记组件的框架：

<element name="my-own-tag">
 <template>
   HTML elements here
 </template>
 <script>
   // JavaScript implementing logic
 </script>
</element>

鉴于许多Web框架通过暴露JavaScript API来构建用户界面，而构建用户界面实际上就是生成一堆div和spans标记，Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此，与现在的一般依赖某个Javscript框架的HTML组件相比，Web组件希望能减少碎片。

尽管Web组件是一项有趣的新技术，但在浏览器们都支持它们（并且大部分用户都开始使用这些浏览器们）之前，其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills（译者注：polyfills原指一种墙面填料）。polyfill指的是一段代码，它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能，则polyfill什么都不做。否则，它模拟其实现而不依赖API。例如，webshims库实现了HTML5中各种功能，包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。

Polymer中的polyfills为需要使用Web组件成功构建应用提供了多种Web技术，包括：

• HTML imports：种在其他HTML document中引入和重用HTML document的方法。
• 自定义元素：让开发者定义和使用自定义DOM元素。
• Shadow DOM：在DOM中提供的封装。
• 模型驱动视图（Model Driven Views）：提供象AngularJS的数据绑定。
• ·Web动画：实现复杂动画的API。
• ·Pointer事件：对鼠标触摸和手写笔事件的封装

这些polyfills可以分开使用而不需要使用Polymer的其他部分。此外，Polymer提供：

• polymer.js: Polymer的核心运行引擎，能轻易创建自定义属性和事件。
• 一系列可重用的可视和非可视元素。

Polymer不是第一个尝试实现Web组件相关标准的项目。Mozilla在此之前启动了X-Tag项目——针对自定义元素标准的polyfill。Web UI package 使用Google的Dart语言编写了Model Driven View技术从而实现了自定义元素。

用户可以在YouTube上观看Google I/O大会关于Polymer的演讲。如果用户想了解更多关于Web组件的信息，可以观看Google I/O上Web组件的演讲。另外，用户可以在Polymer的网站查看导学文章和其他相关文档。

查看英文原文：Use Web Components Today With Google's Polymer

感谢杨赛对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。