5

初识

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 ImportsWeb 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>

你可以在这里查看PolymerAPI

使用自定义的 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 DOMtemplate十分简单,使用 <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表达式,基础支持有:

  • 标示符和路径。比如:foomatch.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表达式,跟 AngularFilter有些类似。详见

数据绑定

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框架,其很多设计思想值得学习和思考。


Coding 是个云端开发协作平台,极简的一站式开发服务包括了项目协作,代码托管,质量检测,演示部署,代码在线阅读等功能。Coding 官方博客,是团队小伙伴在开发过程中的学习与分享,如需转载,请注明出处与作者哦 !


CODING
3.3k 声望4k 粉丝

CODING 是腾讯云旗下一站式 DevOps 研发管理平台,向广大开发者及企业研发团队提供代码托管、项目协同、测试管理、持续集成、制品库、持续部署、云原生应用管理 Orbit、团队知识库等系列工具产品,支持 SaaS 模式...