雖然今年的Google I/O也已結(jié)束，但會(huì)上揭曉的新技術(shù)、新工具仍然讓開(kāi)發(fā)者興奮不已。其中Web開(kāi)發(fā)方面尤以Ploymer和Web Components為重。

Polymer 由加盟Google的原Palm webOS開(kāi)發(fā)團(tuán)隊(duì)打造，是一套以“一切皆組件、最少化代碼量、最少框架限制”為設(shè)計(jì)理念的Web UI框架。Web Components則提供了一種更徹底的解耦方式，更加方便了UI的開(kāi)發(fā)和模塊化，可以說(shuō)是Polymer的基礎(chǔ)之一。

開(kāi)發(fā)者Axel Rauschmayer在自己的博客上詳解了Polymer的設(shè)計(jì)理念與組成架構(gòu)，深得Polymer開(kāi)發(fā)者sjmiles（Scott J. Miles）的認(rèn)同。CSDN編譯如下：

在剛剛結(jié)束的Google I/O 2013中，Google發(fā)布了一個(gè)新的Web UI框架——Polymer，似乎為所有Web UI框架指明了發(fā)展方向。

1. Polymer

Polymer由以下幾層組成：

• 基礎(chǔ)層（Foundation）——platform.js：基本構(gòu)建塊，其中大部分API最終將成為原生瀏覽器API。
• 核心層（Core）——polymer.js：基礎(chǔ)層實(shí)現(xiàn)的輔助工具。
• 元素層（Elements）：包括構(gòu)建于核心層之上的UI以及非UI組件。

1.1 基礎(chǔ)層（platform.js）

其中，基礎(chǔ)層使用了以下技術(shù)：

1. DOM Mutation Oberservers和 Object.observe()：用于監(jiān)視DOM元素和簡(jiǎn)單JavaScript對(duì)象的改變。該功能可能會(huì)在ECMAScript 7中正式標(biāo)準(zhǔn)化。
2. Pointer Events ：在所有的平臺(tái)上以同樣的方式處理鼠標(biāo)和觸摸操作。
3. Shadow DOM：將結(jié)構(gòu)和樣式封裝在元素內(nèi)（比如定制元素）。
4. Custom Elements：定義自己的HTML5元素。自定義元素的名字中必須包括一個(gè)破折號(hào)，它的作用類(lèi)似于命名空間，為了將其與標(biāo)準(zhǔn)元素區(qū)分開(kāi)來(lái)。
5. HTML Imports：封裝自定義元素，包中包括HTML、CSS、JavaScript元素。
6. Model-Driven Views（MDV）：直接在HTML中實(shí)現(xiàn)數(shù)據(jù)綁定。仍沒(méi)有標(biāo)準(zhǔn)化的計(jì)劃。
7. Web Animations：統(tǒng)一Web動(dòng)畫(huà)實(shí)現(xiàn)API。

以上第3-5個(gè)API都是Web Components的一部分。很明顯，Web Components對(duì)Polymer的重要性非同一般。

platform.js的作用在于代替瀏覽器提供這些API，它在經(jīng)過(guò)充分壓縮后僅僅31KB。而根據(jù)已公開(kāi)的信息，我們還知道Polymer的目標(biāo)之一就在于測(cè)試這些未標(biāo)準(zhǔn)化的HTML5 UI API。

1.2 核心層和元素層

Polymer本身非常像原生的HTML5：“attributes in, events out”。以UIwidget（widget）polymer-panels為例：

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

可以看出其結(jié)構(gòu)非常“面向組件（component-oriented）”，所有組件都是HTML元素。有的元素本身并不提供UI，比如 animations元素并不提供UI，但是你可以將它與UI元素相關(guān)聯(lián)，實(shí)現(xiàn)動(dòng)畫(huà)效果。此外，Polymer的很多widget中都內(nèi)建了響應(yīng)式設(shè)計(jì)， 也就是說(shuō)，他們會(huì)依平臺(tái)的不同變化成最適合的形狀。

1.3 互操作性

Polymer設(shè)計(jì)得像菜單一樣，可以按需選擇。得益于Web Components，其元素都具有非常高的互操作性。在I/O大會(huì)上我們就看到了這樣的例子：Mozilla項(xiàng)目中的元素X-Tag（同樣基于Web組件）與Polymer協(xié)同得非常好。

1.4 什么時(shí)候可以使用Polymer？

Polymer目前仍是一個(gè)Alpha預(yù)覽版，因此不建議在公共項(xiàng)目中使用。但是，作為一個(gè)開(kāi)源項(xiàng)目，你可以隨時(shí)使用它的代碼。

1.5 Polymer與其它Web框架相比如何？

Polymer并不是為終結(jié)其它框架而生，相反，現(xiàn)有的這些框架也可以構(gòu)建在同樣的基礎(chǔ)層之上。如果你已經(jīng)嘗試過(guò)Ember.js、AngularJS這樣的UI框架，一定會(huì)發(fā)現(xiàn)很多API非常熟悉。AngularJS甚至在 在Twitter上宣布：”Angular將基于Polymer開(kāi)發(fā)widget，這會(huì)是一個(gè)雙贏的方案。“

2. Polymer究竟意味著什么？

沒(méi)有人會(huì)想要使用框架，我們只是想高效地開(kāi)發(fā)Web UI而已，只不過(guò)框架恰恰滿(mǎn)足了我們的需求。與之相反，原生HTML卻缺乏這些功能：

• 豐富的widget集。在我看來(lái)，Web Components最大的意義莫過(guò)于此。得益于Web Components，我們將能輕易獲得眾多widget，隨意使用。
• 用戶(hù)界面布局。我對(duì) CSS Grid Layout寄予了厚望，Grid Layout是原生的HTML，自然它也能與Web Component很好地協(xié)同工作。
• widget間的“粘合劑”（比如數(shù)據(jù)綁定）。

就目前看來(lái)，各大框架仍難以互相兼容：各自使用各自的工具鏈、繼承API、widget基礎(chǔ)構(gòu)架等等。本文中描述的開(kāi)發(fā)模式，以及ECMAScript 6中的類(lèi)與模塊，都指明Web開(kāi)發(fā)的未來(lái)應(yīng)該是更高的互操作性。這對(duì)Web開(kāi)發(fā)生態(tài)系統(tǒng)的益處顯而易見(jiàn)。

相關(guān)資源

如果你想更深入地了解Polymer，可以訪問(wèn)以下網(wǎng)址：

• Google I/O 2013中的演講：
  “Web Components: A Tectonic Shift for Web Development”——Eric Bidelman
  “Web Components in Action”——Matthew McNulty, Alex Komoroske（基于上面的演講，還提到了Polymer）
• HTML5 Rocks上關(guān)于Web Component的文章。
• Polymer項(xiàng)目主頁(yè)： polymer-project.org

原文鏈接： 2ality