在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的元素是高度互操作的。