什么是polymer？

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

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

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

polymer分層結(jié)構(gòu)：

　　元素層（Elemets），是基本構(gòu)建塊， 分為UI elements（如select、tab）、 non-UI elements（如ajax、animate）。

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

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

　　基礎(chǔ)層

　　　　基礎(chǔ)層包含以下技巧：
　　　　1. DOM Mutation Oberservers和Object.observe()：用于觀察DOM元素的變更，是純JavaScript對象。
　　　　2. 指針事件：處理鼠標(biāo)和觸摸操縱，支撐所有的平臺。
　　　　3. 陰影DOM：封裝元素內(nèi)的結(jié)構(gòu)和樣式，適合自定義元素。
　　　　4. 自定義元素：可以自定義HTML5的元素。自定義元素的名字必須包含一個破折號，這是一種簡略的命名空間標(biāo)識，以區(qū)別于標(biāo)準(zhǔn)元素。
　　　　5. HTML導(dǎo)入：包自定義元素。這些包可能包含HTML、CSS和JavaScript。
　　　　6. 模型驅(qū)動的視圖(MDV)：把數(shù)據(jù)直接綁定到HTML。
　　　　7. Web動畫：一套同一的Web動畫API。

　　

　　核心層和元素層　

　　　　Polymer框架天生就偏向于本地HTML5。比如應(yīng)用Polymer框架的面板UI Widget的例子：

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

Web Components？

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

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

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

指定引入的組件文檔及類型

（并不需要實(shí)現(xiàn)它的全部規(guī)范。polymer element的創(chuàng)建、引入是參照這個規(guī)范來的）

Shadow DOM？

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

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

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

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

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

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

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

MVVM模式？

為什么要談這個模式？Polymer中有一個設(shè)計原則，Model-Driven Views（MDV），數(shù)據(jù)驅(qū)動模型，而MVVM模式就是這個原則的很好體現(xiàn)。

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

Model（模型）是一種數(shù)據(jù)格式約束，它定義了數(shù)據(jù)應(yīng)當(dāng)被如何訪問和組織。從數(shù)據(jù)存取、數(shù)據(jù)轉(zhuǎn)換、數(shù)據(jù)處理、數(shù)據(jù)展示都必須依賴于這個數(shù)據(jù)模型。

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的初识Polymer框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。