chemdraw 聚合物_升级到聚合物1.0的指南

chemdraw 聚合物

在最近结束的Google IO 2015上 ，Google发布了期待已久的Polymer版本1.0，并宣布其已准备就绪 。 对于那些仍在使用Polymer库但仍处于开发人员预览中的用户，本文将作为指南，将现有应用程序迁移到最新版本的Polymer。

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

1. 它与0.5版本 ，先前版本以及迄今为止存在的最长版本不兼容。
2. 新版本侧重于性能和效率，同时大大减少了库的整体大小。
3. 它是从头开始完全重建的，以使开发人员可以更轻松快捷地设计自定义元素，使其更像标准DOM元素。
4. 内部基准测试表明，与以前的版本相比，v1.0在Chrome上的速度快大约3倍，在Safari上的速度快4倍。

安装最新版本的Polymer的步骤与本文所述完全相同。 要更新Polymer的现有安装，请导航到app目录并在终端中运行以下命令：

$ bower update

重要的是要意识到这肯定会破坏您现有的应用程序，因为如上所述，这两个版本不兼容。 因此，建议改为在单独的文件夹中安装新副本。 为了说明自v0.5以来的变化，我们将使用我在SitePoint上的前一篇文章中的信用卡自定义元素作为参考，以进行两个版本之间的比较。

填充不支持的浏览器

新版本的Polymer不再需要webcomponents.js库中包含的Shadow DOM webcomponents.js 。 而是使用小得多的webcomponents-lite.js库来webcomponents-lite.js旧版浏览器。

版本0.5：

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

版本1.0：

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

“精简版”版本比其前任版本提供了大约80kb的大小增加，这在性能成为关键因素时可能是重要的。

定义自定义元素

<polymer-element>标记已被保存自定义元素定义的<dom-module>标记替换。 现在，该自定义元素由<dom-module>标记的id属性标识。 命名自定义元素的规则仍然保持不变。

版本0.5：

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

版本1.0：

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

注册自定义元素

以前，我们可以通过简单地调用Polymer()构造函数来注册自定义元素。 如果<script>标签位于<polymer-element>标签内，则指定自定义元素名称是可选的。 在此版本中，现在通过使用原型上的is属性来注册custom元素。

版本0.5：

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

版本1.0：

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

is属性的值必须与自定义元素的<dom-module>标记的id属性匹配，并且与以前的版本不同，这不是可选的 。

<script>标记可以位于<dom-module>元素的内部或外部，但是必须在调用Polymer构造函数之前解析该元素的模板。

自定义元素属性

现在，应该将属于<polymer-element>标记的任何属性与数据类型一起声明在properties对象上。

版本0.5：

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

版本1.0：

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

自定义元素样式

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

现在，元素样式在<template>标记之外定义。

版本0.5：

<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支持外部样式表。

数据绑定

聚合物1.0提供两种类型的数据绑定：

• 方括号[[]]创建单向绑定。 数据流是向下的，从主机到子，并且绑定永远不会修改主机属性。
• 花括号{{}}创建自动绑定。 数据流是单向还是双向，取决于目标属性是否配置为双向绑定。

在此版本中，绑定必须替换节点的整个文本内容或属性的整个值。 因此不支持字符串连接。 对于属性值，建议使用计算的绑定而不是字符串连接。

版本0.5：

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

版本1.0：

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

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

请注意，这意味着节点在绑定注释周围不能包含任何空格。

新的黑幕DOM

Polymer v0.5使用影子DOM为开发人员提供了更简单的元素接口，并通过将子树隐藏在影子根后面来抽象所有复杂性。 这形成了封装的基础，在支持影子DOM的浏览器中可以很好地工作。

对于尚不支持影子DOM的浏览器，实现完全类似于本机影子DOM的polyfill很难，通常比本机实现慢，并且需要大量代码。 由于这些原因，Polymer团队决定取消影子DOM的polyfill，而是构建了一个更轻量级的本地DOM，该版本提供类似于影子DOM的封装。

请务必注意，阴影DOM和阴影DOM彼此兼容，这意味着阴影DOM API在可用时会在浏览器中使用本机阴影DOM，而在不支持的浏览器中会退回到阴影DOM。

结论

根据应用程序的复杂性，将您的应用程序升级到Polymer v1.0可能是一个痛苦的过程，但是在更快的加载时间和明显更少的有效负载方面提供了巨大的好处。 Polymer项目网站上提供的官方迁移指南更深入地介绍了内部API的其他一系列变化，因此请务必检查一下。

此外，查克·霍顿（Chuck Horton）建立了一个名为Road to Polymer 1.0的Github存储库，该存储库提供了一个代码转换工具 ，可将您的代码从v0.5更新到v1.0。 如果您不愿意手动进行一些外观更改，则这可以作为迁移的起点。

翻译自: https://www.sitepoint.com/a-guide-to-upgrading-to-polymer-1-0/

chemdraw 聚合物