开坑，写点Polymer 1.0 教程第0篇——介绍篇

写在最前

我是一名近2年由Flex转web的老前端，纵观目前web界群魔乱舞的局面，个人认为目前比较火热的Angular和这篇文章要介绍的polymer是最适合我过渡的两种技术选型（由flex过渡到html+js）。相比其它web components技术，如react，我更看好polymer这种方式，它更加直观，自然，更加适合传统前端程序员的思维。由于国内polymer的资料比较少，官网在大墙之外也难于访问，我打算开个坑，一边自己学习，一边翻译和批注（扩展并添油加醋）一些官网的guide，期望大家一起来关注web components这个前端必然的发展方向。
当然也请不要怀疑我这个半路出家的web前端的专业性，本人接触组件化开发模式已有8年时间了，在学习的过程中我会就自己对组件化的一些经验和理解来检验Polymer的真身。

名词约定

由于对于web一些技术名词的定义五花八门，什么控件，组件，标签，插件，我在这里做一个统一规范，并会在后面的教程里遵循这个规范。

• 标签：如<input>, <table>这些原生tag

• 组件：由<input>, <table>等这些原生的标签组成的自定义组件。如：<user-list></user-list>
  

什么是Polymer？

Polymer 英文发音 ['pɒlɪmə]（念作： 抛了吗？ 你股票Polymer？）意为高分子聚合物

Polymer是个给前端开发人员使用的类库，它可以让前端码农们更加简单，快速的开发现代化的，更屌的可重用组件。

用自定义的标签来扩展web应用

原生的html已经提供了一些内置的标签，如<button>,<form>以及<table>。每个原生标签都有自己的属性，方法，和事件。每个标签也有自己的内置样式，当然这些样式可以用自己的css来覆盖。

任何码农都可以用这些原生标签来制作一个简单的web页面。但是它们的功能是有限的。如果你要制作一个简单的tabs功能的组件（因为原生的标签不提供这个功能），就需要加上你自己的js代码和css样式。

如果使用了咱们（注意发音时候要特别嘚瑟）Polymer制作滴自定义标签，你就可以凭借一己之力扩展原生的html标签库了（多骄傲，倍儿有面子）。

<my-tabstrip>
  <my-tab>
    Home
  </my-tab>
  <my-tab>
    Services
  </my-tab>
  <my-tab>
    Contact Us
  </my-tab>
<my-tabstrip>

辣么，Polymer是web组件么？，是自定义标签么？

Polymer都不是，它其实不提供具体的组件，它只是个工具来帮助你创造出属于自己的自定义组件。你可以把它类比成俄罗斯方块

俄罗斯方块只提供了4个像素组成的5种基本形状。如果你缺少某种由5个像素组组成的异形方块，
比如这种

这个时候就要用polymer这个胶水去扩展目前4个像素的方块，把它扩展成你需要的形状。
以下这幅来自官网的图片描述的Polymer的地位和角色

由上图可见，自定义组件（Custom Element）是利用Polymer这个工具基于原生的html标签（Web components primitives）开发的。

• Web Components：原生的html标签

• The Polymer library： 提供一种语法，来让你创建自定义组件，你的自定义组件会拥有模板，双向绑定，属性监控等功能，让你用更少的代码写出更酷炫的控件。

• Custom elements： 你的产出物，也就是自定义组件。如果你是伸手党，辣么恭喜你，polymer已经为你这样的懒人提供了一大套现成的自定义组件库。你在polymer的环境中直接使用它们就行。

你足够屌可以自己定制自己的组件，如果修行不够，也可大大方方滴占用他人的劳动成果，（优秀的组件可能都会被提供出来，当然也不排除一些大公司制作出一整套非常好用的组件候用于商业用途，需要有偿使用等等，具体我也不清楚，以后整个web components的运作模式可能会类似于apple的app store，有官方软件，有免费第三方和收费第三方）

获得这些现成的自定义标签

以下是Polymer team自己实现的一些扩展，请戳（需要翻墙）
https://elements.polymer-project.org/

本章参考官网内容的链接

https://www.polymer-project.org/1.0/docs/start/getting-the-code.html

好了，介绍篇结束。下一篇安装篇会介绍Polymer的安装