Google的Polymer框架介紹

在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的例子：

其架構是面向組件的，它由HTML5元素組成，一些元素甚至沒有用戶界面，比如動畫是元素，但它沒有UI，而是代替點。響應式設計內建了許多Widget，這意味著它們能自適應多種給定的平台，如手機、平板、桌面等。

四、互操作性

Polymer框架的設計像是點菜，選擇你所需要的。Web Components的元素是高度互操作的。