一，polymer是什麼：
polymer 一個google開發的web componts方式的前端UI控件庫，它實現了google最新發布的Material design 設計規範。polymer的概念很超前，polymer中有不少能夠借鑑學習的地方。
polymer官方網站： http://www.polymer-project.org/
二，使用polymer的問題。
1，web componts 是什麼。
componts 是組件的意思。 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，layout 佈局
polymer layout佈局功能， 是用flex實現的， 比較先進，還能實現元素的垂直居中。 但如今支持的瀏覽器較少，等之後瀏覽器都先進了，能夠過來看看polymer的實現代碼借鑑一下。
文檔地址 http://www.polymer-project.org/docs/polymer/layout-attrs.html
代碼在：polymer/layout.html 文件中。
9，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比較遺憾的地方。可是不影響咱們去學習和借鑑它的一些東西。
10，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