一，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