Google的Polymer框架介绍

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

在2013年的Google I/O大会上，Google公司提出了一个新的UI框架，名为Polymer。Google称Polymer框架代表着所有Web UI框架的未来。

一、Polymer框架

Polymer框架可以分为三个层次：
1. 基础层(platform.js)：是基本构建块。大多数情况下，即使不是全部，这些API最终都将成为本地浏览器的API。
2. 核心层(polymer.js)：实现基础层的辅助器。
3. 元素层：建立在核心层之上的UI组件或非UI组件。

二、基础层

基础层包括以下技术：
1. DOM Mutation Oberservers和Object.observe()：用于观察DOM元素的变更，是纯JavaScript对象。
2. 指针事件：处理鼠标和触摸操作，支持所有的平台。
3. 阴影DOM：封装元素内的结构和样式，适合自定义元素。
4. 自定义元素：可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号，这是一种简单的命名空间标识，以区别于标准元素。
5. HTML导入：包自定义元素。这些包可能包含HTML、CSS和JavaScript。
6. 模型驱动的视图(MDV)：把数据直接绑定到HTML。
7. Web动画：一套统一的Web动画API。

3～5是Web Components，是网络组件模型。Web Components是Polymer框架的最重要的基础。
platform.js目前浏览器还没有提供，它仅有31KB大小。

三、核心层和元素层

Polymer框架天生就偏向于本地HTML5。比如使用Polymer框架的面板UI Widget的例子：

    <polymer-panels
        on-select="panelSelectHandler"
        selected="{{selectedPanelIndex}}">
    </polymer-panels>

其架构是面向组件的，它由HTML5元素组成，一些元素甚至没有用户界面，比如动画是元素，但它没有UI，而是代替点。响应式设计内建了许多Widget，这意味着它们能自适应多种给定的平台，如手机、平板、桌面等。

四、互操作性

Polymer框架的设计像是点菜，选择你所需要的。Web Components的元素是高度互操作的。