Polymer 是在 Google I/O 2013 发布的一个新的 Web UI 框架。Polymer的核心原则是 “Everything is an element”。它是一款实用、基于事件驱动、封装性和互操作性强的 Web UI 开发框架。

在了解 Polymer 之前,如果你没有了解过 Web Components ,推荐去了解下 Web Components 规范。可以通过 Web Components Wiki了解,Polymer 用到的有 Shadom Dom,Custom Elements,HTML Imports 等 Web Components 技术。

安装 Polymer

Polymer 提供几种方式安装源码。

  • Bower 安装,推荐使用此方法安装。如果您对bower不熟悉,可以自行Google了解。如果已经安装bower,可以使用命令直接安装:bower install --save Polymer/polymer
  • 直接下载zip包,zip下载地址
  • GitHub Polymer源码,Polymer链接

构建自己的 Polymer 应用

创建一个 Polymer 元素

Polyer支持创建自定义元素,在外部看来就像其他的 DOM 元素,但是在内部,提供便利的数据绑定和其他丰富的功能,使用更加少的代码,构建复杂的应用。
创建一个新的 Polyer 元素,需要:

  1. 引入 Polymer 核心组件,polymer.html
  2. 使用<polymer-element>声明自定义元素

下面例子,将创建一个名字为 my-element 的元素:

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
    <template>
        <span>This is element content</span>
    </template>
    <script>
      Polymer({ ready: function() {
        //...
      }})
    </script>
</polymer-element>

Polymer元素主要由俩部分构成,<template>和<script>,其中<template>是Polymer元素的HTML模板,<script>是模板对应的 javascript代码。
注意到<script>标签中的Polymer构造方法,Polymer构造方法是一个对document.registerElement的包装,并且提供一些特殊的功能,比如数据绑定和事件映射,Polymer构造方法接受一个对象参数,定义该元素的prototype。
有些 Polymer元素并不需要 javascript 代码,可以使用noscript属性声明:

<polymer-element name="my-element" noscript>
...
</polymer-element>

你可以在这里查看Polymer的 API

使用自定义的 Polymer 元素

定义好自己的 Polymer元素之后,就可以通过import的方式引入它(通过import引入的文件,即使引入多次,浏览器也只会请求一次。)。在 HTML代码中引入自定义的元素并且使用它。首先需要引入 webcomponents.js依赖。

<!DOCTYPE html>
<html>
  <head>
    <script src="webcomponents.js"></script>
    <link rel="import" href="/elements/my-element/my-element.html">
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

遵循Everything is an element的原则,在HTML页面中,我们会很少看到需要写一些 javascript代码,这样就使得HTML文件代码看起来很清爽。

虽然上面例子看起来只有短短几行简单的代码,但是Polymer支持创建丰富的可复用的组件,其中Polymer官网就提供许多供使用和学习的基础组件core-elementspaper-elements

Shadow DOM

在Polymer可以使用Shadow DOM从模板中分离视图内容,创建一个使用Shadow DOM的template十分简单,使用 <content></content>来选择需要替换的元素即可。

<polymer-element name="my-element" noscript>
  <template>
    <span>This is content: </span>
      <content select="q"></content>
  </template>
</polymer-element>

使用的时候,只需要在Polymer标签内部嵌入Light DOM。

<my-element>
  <q>Hello World</q> <!--Light DOM-->
</my-element>

布局属性

Polymer使用CSS Flexbox定义了一系列基础布局样式。具体可以点击这里查看
只需要简单的在标签上引入布局属性就可以轻松使用。

<div horizontal layout>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

模板表达式

Polymer支持在模板中使用{{}}执行javascript表达式,基础支持有:

  • 标示符和路径。比如:foo 、match.set.game
  • 数组访问。比如:array[i]
  • 非逻辑。比如:!
  • 一元表达式。比如:+i,-a
  • 二进制操作。比如:+,-,*,/,%
  • 比较操作。比如:==,<,>,<=,>=,!=,===,!==
  • 逻辑比较。比如:foo && bar,foo || bar
  • 三元表达式。比如:a ? b : c
  • 分组。比如:(a + b) * (c + d)
  • 字符值(数字、字符,null,undefined)。
  • 数组和对象。如:[foo, 1],{id: 1, foo: bar}
  • 函数。如:reverse(my_list)

Polymer 还支持以下表达式:

  • 计算表达式。可以直接使用类似 {{a + b}}的方式,也可以使用如下方式处理比较复杂的计算:
    <link rel="import" href="../bower_components/polymer/polymer.html">
    <polymer-element name="my-element" >
        <template>
            <span>The result is {{result}}</span>
        </template>
        <script>
          Polymer({
            computed: {
                result: '1 + 100'
            }
          })
        </script>
    </polymer-element>
  • 表达式 Scope。详见
  • Filter 表达式。使用{{expression | filterName }}执行 Filter表达式,跟 Angular 的Filter有些类似。详见

数据绑定

Polymer 提供多种数据绑定方法。

  • 单模板实例。使用bind属性绑定一个对象到模板实例,详见
    <template>
          <template bind="{{person}}">
            He's name is {{name}}.
          </template>
    </template>

还可以使用as为对象创建一个命名空间:

    <template>
          <template bind="{{person as p}}">
            He's name is {{p.name}}.
          </template>
    </template>
  • 模板迭代。使用repeat属性迭代,详见
    <template>
      <template repeat="{{user in users}}">
        {{user.name}}
      </template>
    </template>
  • 条件绑定
    使用if属性有条件的绑定模板实例:
    <template>
          <template if="{{conditional}}">
             The conditional is true
          </template>
    </template>

Polymer不仅提供以上的方式绑定数据,而且提供了很多其他的方法,使得模板之间的复用十分便利。更多关于数据绑定可以查看官网API

总结

Polymer拥有许多基础模板和很强的组件模型。作为一款还在成长中的Web UI框架,其很多设计思想值得学习和思考。