最近使用polymer對競鹿官網進行改版， 將使用polymer的經驗總結一下分享給大家。
一，polymer是什麼：
polymer 一個google開發的web components方式的前端UI控制元件庫，它實現了google最新發布的Material design 設計規範。polymer的概念很超前，polymer中有很多可以借鑑學習的地方。
polymer官方網站： http://www.polymer-project.org/
二，使用polymer的問題。
1，web components 是什麼。
components 是元件的意思。 web元件就是web的一個一個元素標籤， 如input標籤，img標籤，video標籤等等。 web componts 的概念就是把所有可重用的東西封轉成元素元件， 下次要用，自己使用自己寫好的標籤即可。 polymer給大家提供了封裝自定義標籤的方法， 它自己也有很多已經封裝的標籤， 如滑塊： paper-slider,文件地址http://www.polymer-project.org/docs/elements/paper-elements.html#paper-slider ，大家可以看看這個文件中的demo檢視效果。
polymer的理念是一切功能切元素， 即使是ajax， 也是元素，core-ajax標籤可以發起ajax請求， 文件地址：http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax
2，如何學習polymer 。
1) 看完get started的文件， 對polymer會有大體的瞭解 http://www.polymer-project.org/docs/start/getting-the-code.html
2)學習polymer自帶標籤的使用 http://www.polymer-project.org/docs/elements/ ， core-開頭的是核心標籤。 paper-開頭的是Material design風格的標籤。 paper-開頭的標籤會帶有很炫的效果，它們一般是基於core-標籤再此封裝出來的。 比如paper-input標籤 是基於 core-input封裝的
3, polymer 中如何選擇新產生的dom元素。
polymer選擇元素的方法是 this.$.idname ， 可以選擇模板中指定id的層。 但是這種選擇方法不能選擇新查詢的層。 比如：
<template>
<div id="root">
<div id="a">A層</div>
<template if="{{show_b}}">
<div id="b">B層</div>
</template>
<div id="c">C層</div>
</div>
<template>
加上show_b這個變數預設值是false， 也就是說預設 不會有B層元素， 後面show_b變數為true是才會產生B層元素， 也就是說B層元素是後來生成的， 而不是初始化時就有的。
這時候我們在polymer程式碼中 可以用 this.$.a選擇到A層， 可以用this.$.c選擇到C層，但是無法用 this.$.b選擇到B層。
解決方法是，我們可以在最外面加一個 root層， root層是初始化時就有的層， 因為B層是新生的，可以這樣選擇：
this.$.root.querySelector('#b')
4, 事件監聽 on-eventname 和addEventlistener的區別。
polymer提供了on-eventname屬性來對事件進行監聽， 如監聽按鈕的點選事件：
<paper-button id="button" label="flat button" on-click="{{buttonClick}}"></paper-button> 另外還可以用addEventlistener監聽事件， 如 this.$.button.addEventlistener('click',function(){
alert('click');
console.log(this);
}) 在兩種監聽方法是有區別的。 on-eventname 方式監聽， 在監聽函式中 this 指向的是當前polymer物件。你可以用this來獲得當前polymer物件的其他屬性。
而addEventlistener 在監聽函式中 this 是當前元素。
5， 如何選中模板中<content>標籤中的內容。
參考文章 http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/ ， 這篇文章中說明了 <content>標籤代表的元素並不屬於 shadow dom的元素，而是屬於外層元素。
所以用選擇外層元素來選擇它就好， 在polymer程式碼中可以這樣選擇： this.querySelector('#id')
6， polymer中如何匯入jquery 。
我們可以簡歷一個 lib.html 他的程式碼是：
<script src="./jquery.js"></script>然後在元素中匯入
<link rel="import" href="lib.html" />
因為 link import 載入的頁面時會自動判定是否重複載入只會載入一次（類似php的require_once函式）。 所以及時我們在多個元素中 匯入lib.html 都不會重複載入jquery 。
7 ，polymer 相容語法
我們在CSS樣式中，可以用/deep/ 語法，讓一條元素既對html元素生效，也對shadow dom元素生效。 如：
html /deep/ h3 { background:red } 但是deep語法，並非所有瀏覽器都支援。 相容不支援deep語法的瀏覽器的方法，link標籤匯入樣式時，加上shim-shadowdom屬性 <link rel="stylesheet" href="./xxx.css" shim-shadowdom />
style標籤定義元素時，加上shim-shadowdom 屬性
<style shim-shadowdom>
</style>
這其實是在告訴polymer的平臺相容js，這些地方需要處理， platform.js會識別到這些區域，然後用js做相容處理。
我們在css中還經常會用 ::content 選擇 <content> 標籤指定中的元素， 但是 ::content 語法也是一些瀏覽器不支援的， 所以要用polyfill-next-selector在宣告一下， 如：
polyfill-next-selector { content: '#question .title:before'; }
#question ::content .title{
//css樣式程式碼
}8, 檔案的相對路徑
polymer中的相對路徑一般都是相對於當前檔案的路徑，而不是相對於入口檔案的路徑，這個大家用過polymer都知道，比如 link import 匯入檔案時就是這樣的。 大家要注意的是，如果你自定義元素中有和地址相關的屬性，polymer也會自動給你計算出當前檔案的相對路徑。 如：
我們在 /element 檔案下建立 my-element.html 定義一個元素，程式碼如下：
<polymer-element name="my-element" attributes="url">
<script>
Polymer('my-element',{
ready:function(){
alert(this.url);
}
});
</script>
</polymer-element>
上面元素定義了一個url屬性，並在初始化時alert出url屬性的值。 然後我們在另外一個頁面呼叫這個元素，假設另外一個頁面地址是 /page/test.html , 呼叫程式碼如下：
<my-element url="p/a/t/h"></my-element>
我們執行程式碼發現， alert出來的字串被處理了， 列印出的字串是 page/p/a/t/h ， 注意不是 p/a/t/h,也不是 element/p/a/t/h
這些屬性名稱會被polymer計算相對地址： url,href,src 。 如果你自定義元素有自定這些屬性要注意了。 你如果不想polymer給這些屬性自動加上計算的目錄結構， 你只能以斜杆開頭定義一個絕對路徑。
9，ajax傳參技巧
core-ajax 傳遞的params引數 可以直接和輸入框對應上， 如：
<core-ajax id="ajax" url="http://url" params="{{formdata}}" method="post" ></core-ajax>
然後有提交表單的輸入框：
<paper-input inputValue="{{formdata.email}}" />
<paper-input inputValue="{{formdata.name}}" />
這裡的這個formdata 需要初始化宣告是一個物件， 不然寫會報錯的。
Polymer('my-elementer',{
//這裡宣告一個formdata物件，空的都行，但是不宣告不行。
formdata:{}
})
10，layout 佈局
polymer layout佈局功能， 是用flex實現的， 比較先進，還能實現元素的垂直居中。 但現在支援的瀏覽器較少，等以後瀏覽器都先進了，可以過來看看polymer的實現程式碼借鑑一下。
文件地址 http://www.polymer-project.org/docs/polymer/layout-attrs.html
程式碼在：polymer/layout.html 檔案中。
11，polymer的原理。
polymer自定義標籤，建立一個新元素，然後定義元素的shadow dom， shadow dom是HTML5 的內容， 詳見： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
定義好自定義元素後是用 link import匯入的， link import 也是HTML5 的知識 , 詳見： http://www.html5rocks.com/en/tutorials/webcomponents/imports/
用了這麼多HTML5的技術，一些瀏覽器不支援的， 所以要在用polymer之前，載入platform.js，然後不支援這些HTML5特性的瀏覽器可以用js來實現相容。
但它相容性有些差，對android版本要求4.3以上。 因此，對應國內來說， 大部分android使用者 訪問有問題， 因此polymer也不能用到phonegap中， 這是polymer比較遺憾的地方。但是不影響我們去學習和借鑑它的一些東西。
12，polymer一次匯入的檔案太多，能否壓縮。
polymer 每使用一個標籤，都要匯入一個檔案，而且標籤可能還有依賴，所以polymer程式碼寫完後，我們發現頁面載入了好多檔案， 能否壓縮優化，讓一次載入？
這是可以的，使用 https://github.com/Polymer/vulcanize
因為polymer相容性的問題，最後我們還是換回了angularjs做官網。 我們之前寫的polymer程式碼大家可以借鑑一下， 地址是： http://5.deersite.sinaapp.com/
NB的人才都不找工作，都到JobDeer拍賣自己： www.jobdeer.com
大家有問題可以在微博上找我： http://weibo.com/luofei614
評論(2)