Polymer 1.0升级指南

2015-7-27 22:21| 发布者: joejoe0332| 查看: 705| 评论: 0|原作者: 无若, 卖女孩儿的小酱油, wancheng, Iam魔方|来自: oschina

摘要: 在最近结束的 Google IO 2015，Google 发布了期待已久的 Polymer 1.0，并宣布可用于生产环境，使用 Polymer 库的人们还在使用开发预览版，本文将做为一个指南，指导将现在应用迁移到 Polymer最新版本。 ...

　　在最近结束的 Google IO 2015，Google 发布了期待已久的 Polymer 1.0，并宣布可用于生产环境，使用 Polymer 库的人们还在使用开发预览版，本文将做为一个指南，指导将现在应用迁移到 Polymer最新版本。

　　关于 v1.0 一些重要的注意事项：

它不兼容 version 0.5，上一个版本和存活至今的最老版本。
新版主要关注性能和效率，库的总量大幅缩减。
从底层彻底重建之后，开发人员可以使用它更容易更快地设计自定义元素，更像是标准的 DOM 元素。
与上一个版本相比内部基准测试显示 v1.0 在 Chrome 上快 3 倍，在 Safari 上快 4 倍。

安装最新版本 Polymer 的步骤与这篇文章中的完全相同，如果想升级已安装的 Polymer，定位到 Polymer 的目录并在终端中运行下面的命令：

1	`$ bower update`

　　要知道非常重要的一点，这个操作会破坏现有的 Polymer 应用，就像之前提到的，两个不同版本的 Polymer 是互不兼容的。因此，建议在一个单独的目录下安装全新的 Polymer。为解释自 v0.5 版本以来的变化，我们引用我之前写在 SitePoint 上的文章里关于信用卡图表自定义元素的例子来展示两个版本间的不同。

Polyfilling 不支持浏览器

　　新版本的 Polymer 不再需要包含在 webcomponents.js 库里面的 shadow DOM 的 polyfill，取而代之的是使用一个更小的叫 webcomponents-lite.js 的库来 polyfill 旧的浏览器。

0.5版本：

1	`<script` `src="bower_components/webcomponentsjs/webcomponents.min.js"></script>`

1.0版本

1	`<script` `src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>`

　　这个"轻量级"的版本较之前的内容增加大约 80kb，当遇到性能瓶颈的时候这些改变将变得非常有意义。

定义自定义元素

<polymer-element>;标签已被保存自定义元素规定的<dom-module>标签所替换。自定义的元素现在由<dom-module>标签的 id 属性标识。自定义元素的规则仍然不变。

0.5版本：

1

2

3

<polymer-element name="credit-card">
  ...
</polymer-element>

1.0版本：

1

2

3

<dom-module id="credit-card">
  ...
</dom-module>

注册自定义元素

　　在此之前，我们可以通过简单的调用 Polymer()构造函数注册自定义元素。如果<script>标签在<polymer-element>标签中，指定自定义元素名称是可选的。在这个版本中，自定义元素现在可以在源码中使用关键词 is 来注册。

0.5版本：

1	`Polymer('credit-card', {});`

1.0版本：

1

2

3

Polymer({
  is: 'credit-card'
});

is 的值必须与自定义元素的 <dom-module> 标签的 id 属性相匹配，这一点与以前的版本不同，它是不可选的。
<script>标签可以被放在 <dom-module> 元素的内部或者外部，但 <dom-module> 元素的模板必须在调用 Polymer constructor 之前解析。

自定义元素属性

任何属于<polymer-element>标签的现在都应该根据数据类型定义为 properties 对象。

版本0.5：

1	`<polymer-element` `name='credit-card'` `attributes='amount'>`

版本1.0：

1

2

3

4

5

6

7

Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }

自定义元素样式

现在元素样式定义在<template>标签外边。

版本0.5:

1

2

3

4

5

6

7

<polymer-element name="credit-card" attributes="amount">
  <template>
    <style>
      ...
    </style>
  </template>
</polymer-element>

版本1.0：

<dom-module id="credit-card">
  <style>
    ...
  </style>
  
  <template>
    ...
  </template>
</dom-module>

外部样式表支持使用 HTML Imports。

数据绑定

Polymer 1.0 版本提供了二种类型的数据绑定：

二对中括号创建一个单向绑定。数据流是向下的，宿主向子应用，并且绑定决不会修改宿主属性。
二对大括号创建一个自动绑定，数据流是单向或者双向的。取决于目标属性配置是否为双向绑定。

在这个 release 版本中，绑定必须替换一个结点的所有文本内容，或者某个属性的所有值。所以是不支持字符串连结操作的。对于属性值，建议使用计算绑定来代替字符串连结。

版本0.5：

1	`<input` `type="submit"` `value="Donate {{amount}}">`

版本1.0：

1

2

3

<template>
  <input type="submit" value="[[computeValue(amount)]]">
</template>

1

2

3

4

5

6

Polymer({
  is: "inline-compute",
  computeValue: function(amount) {
    return 'Donate ' + amount;
  }
});

注意一个结点中绑定标示两侧不能包含任意空白符。

新的 shady DOM

　　Polymer v0.5 使用 shadow DOM 给开发人员提供一个更简单的元素接口，并通过隐藏子树后面的影子根来抽象复杂性。这是最基本形式的封装，它工作在浏览器中并提供 shadow DOM。

　　对于浏览器来说，它是不能提供 shadow DOM 的，像本地 shadow DOM 那样实现一个多边形填充是困难的，通常这会比本地实现慢，还会需要更多的代码。正是这些原因， Polymer 团队决定拿走 shadow DOM 填充，并用本地 DOM，用较轻版本构建来支持更小的 shadow DOM。

　　要注意的是 shady DOM 和 shadow DOM 是相互兼容的，这意味着 shady DOM 的 API 使用浏览器中有效的本地的shadow DOM，而在不支持的浏览器中就会回到 shady DOM。