什么是polymer？

polymer由谷歌的Palm webOS團隊打造，并在2013 Google I/O大會(huì )上推出，旨在實(shí)現Web Components，用最少的代碼，解除框架間的限制的UI 框架。

Everything is an element,一切皆組件，是polymer的核心思想

polymer 可以通過(guò)Twitter的包管理器bower，方便的進(jìn)行組件（Elements）及包的依賴(lài)管理，不必自己從git上下載組件。

polymer分層結構：

    元素層（Elemets）， 分為UI elements（如select、tab）、 non-UI elements（如ajax、animate）

    核心層：polymer.html+polymer.js，是創(chuàng )建polymer element的必要依賴(lài)。
    基礎層：platform.js，是平臺兼容，和響應式代碼實(shí)現的必要依賴(lài)，創(chuàng )建應用必須首先引入它。其中大部分API最終將成為原生瀏覽器API。

通過(guò)<link rel="import" href="component-name.html">方式引入組件，即Web Components的Imports規范。

Web Components是polymer的一個(gè)很重要的基礎，我們有必要來(lái)了解一下：

Web Components？

它是一些規范，旨在以瀏覽器原生的方式向外提供組件，它的規范如下
1、模板（Templates）

     可以將不必立即渲染的元素，不必立即執行的腳本放入這里。
2、裝飾器（Decorators）
3、Shadow DOM
4、自定義元素（Custom Elements），

     實(shí)現自定義html標簽，及屬性。擁有同原生組件一樣的生命周期
5、Imports，

     指定引入的組件文檔及類(lèi)型

（并不需要實(shí)現它的全部規范。polymer element的創(chuàng )建、引入是參照這個(gè)規范來(lái)的）

Shadow DOM？

是一顆對用戶(hù)不可見(jiàn)的DOM元素子樹(shù)，即不能在常規的DOM樹(shù)中看到它。它是實(shí)現Web Components封裝
的必要能力。但是，目前只有Chrome支持它。它有以下幾個(gè)作用：
1、避免頁(yè)面不同組件的ID、CSS、JS的互相干擾
2、使得組件便于維護，組件實(shí)現的改變不影響其使用
3、加快DOM節點(diǎn)的查詢(xún)速度，Shadow DOM中的元素是不被查詢(xún)的。

為了便于索引，不應該將內容（文本）放入Shadow DOM中。
可以使用<content>元素來(lái)指定子元素的插入點(diǎn)。

規范是促進(jìn)技術(shù)良性可持續發(fā)展的、是形成良好生態(tài)系統的必要條件。這就相當于法律的作用。

網(wǎng)格布局 CSS Grid Layout？

布局經(jīng)歷了從表格布局到div層布局的變化，如今面對如此眾多的設備，屏幕大小分辨率有很大差異我們期望能夠找到一種方式來(lái)實(shí)現統一的布局，這就是響應式布局。而響應式布局被寄予厚望的就是，網(wǎng)格布局。
顧名思義，就是用網(wǎng)格來(lái)劃分頁(yè)面。這里有兩個(gè)要求，即多列、可伸縮。
這里的多列不使用浮動(dòng)來(lái)完成，使用grid-columns屬性來(lái)完成。
可伸縮的關(guān)鍵在于，分數單位fr，指列或者行占剩余空間的比例，x(fr)/total(fr)

如果要實(shí)現更加精確的控制，需要引入CSS3中的媒介查詢(xún)，@media的支持。以提供在不同設備，不同屏幕大小不同設備方向上的樣式。

網(wǎng)格布局為w3c草案，目前只得到IE10的部分支持（這次IE跑到前面了）。

MVVM模式？

為什么要談這個(gè)模式？Polymer中有一個(gè)設計原則，Model-Driven Views（MDV），數據驅動(dòng)模型，而MVVM模式就是這個(gè)原則的很好體現。

(這里不舉例子，如果還不能夠理解這個(gè)模式，可以看這里，http://www.cnblogs.com/626498301/archive/2010/08/17/1801475.html)

Model-View-ViewModel，相對于MVC模式，Controller被換成了ViewModel。

Model（模型）是一種數據格式約束，它定義了數據應當被如何訪(fǎng)問(wèn)和組織。從數據存取、數據轉換、數據處理、數據展示都必須依賴(lài)于這個(gè)數據模型。

View（視圖）通常是指組件的可視部分，數據模型、業(yè)務(wù)邏輯一般來(lái)說(shuō)是穩定的，有較高的可重用性，但是視圖可能經(jīng)常更改，

ViewModel（視圖模型）主要用于數據加工（邏輯處理），并為視圖提供數據綁定（將Model的類(lèi)屬性綁定到View的相應組件屬性上）。

它們的依賴(lài)關(guān)系是View依賴(lài)ViewModel，ViewModel依賴(lài)Model，這是單向依賴(lài)，這樣View的變更不會(huì )對VM，Model有任何影響。但是如果Model發(fā)生改變，就會(huì )影響VM、View了。

 “Angular將基于Polymer開(kāi)發(fā)widget”，這是來(lái)自Angular的聲音。而Angular是采用MVVM模式來(lái)設計的，這種模式很適合組件開(kāi)發(fā)，擁有很低的耦合性，便于修改維護。

現實(shí)？

目前來(lái)說(shuō)，Polymer是一個(gè)面向未來(lái)的方案，還沒(méi)有產(chǎn)生正式版本，不夠成熟（組件數量，技術(shù)文檔，實(shí)例，社區都需要發(fā)展）。

同時(shí)，瀏覽器的兼容性上（IE9、10都不能很好支持，即使在Chrome下頁(yè)面渲染速度，用戶(hù)體驗都還存在一些問(wèn)題），也需要進(jìn)一步提升。

暫時(shí)看來(lái)，Googel的Angular就是開(kāi)發(fā)成熟組件的不錯選擇。