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

最新推荐文章于 2020-11-23 18:45:13 发布

culi3118

最新推荐文章于 2020-11-23 18:45:13 发布

阅读量515

点赞数

文章标签： java python javascript vue html ViewUI

原文链接：https://www.sitepoint.com/a-guide-to-upgrading-to-polymer-1-0/

版权

chemdraw 聚合物

At the recently concluded Google IO 2015, Google released the much awaited 1.0 version of Polymer and declared it production-ready. For those of you who have been using the Polymer library while it was still in developer preview, this article will serve as a guide to migrate your existing application to the latest version of Polymer.

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

A few important things to note about v1.0:

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

It is incompatible with version 0.5, the previous version and the longest surviving so far.
它与0.5版本，先前版本以及迄今为止存在的最长版本不兼容。
The new release is focused on performance and efficiency while dramatically reducing the overall size of the library.
新版本侧重于性能和效率，同时大大减少了库的整体大小。
It has been completely rebuilt from the ground-up to make it easier and faster for developers to design custom elements that work more like standard DOM elements.
它是从头开始完全重建的，以使开发人员可以更轻松快捷地设计自定义元素，使其更像标准DOM元素。
Internal benchmark tests reveal that v1.0 is about 3x faster on Chrome and 4x faster on Safari compared to the previous version.
内部基准测试表明，与以前的版本相比，v1.0在Chrome上的速度快大约3倍，在Safari上的速度快4倍。

The steps to install the latest version of Polymer remain exactly the same as described in this article. To update an existing installation of Polymer, navigate to the app directory and run the following command in your terminal:

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

$ bower update

It’s important to be aware that this will certainly break your existing app, since, as mentioned, the two versions are incompatible. Hence, installing a fresh copy in a separate folder is recommended instead. To illustrate the changes since v0.5, we’ll use the credit card custom element from one of my previous articles on SitePoint as a reference to draw comparisons between the two versions.

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

填充不支持的浏览器 (Polyfilling non-supporting browsers)

The new version of Polymer no longer needs the shadow DOM polyfill included in the webcomponents.js library. Instead use the much smaller webcomponents-lite.js library to polyfill older browsers.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

The “lite” version offers a size gain of approximately 80kb over its predecessor, which could be significant when performance is a key factor.

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

定义自定义元素 (Defining custom elements)

The <polymer-element> tag has been replaced by the <dom-module> tag that holds the definition of a custom element. The custom element is now identified by the id attribute of the <dom-module> tag. The rules to name the custom element still remain the same.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

注册自定义元素 (Register custom elements)

Previously, we could register the custom element by simply invoking the Polymer() constructor. Specifying the custom element name was optional if the <script> tag was inside the <polymer-element> tag. In this release, the custom element is now registered by using the is property on the prototype.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

The value of the is property must match the id attribute of the <dom-module> tag of the custom element and, unlike the previous release, this is not optional.

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

The <script> tag can be inside or outside of the <dom-module> element, but the element’s template must be parsed before the call to the Polymer constructor.

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

自定义元素属性 (Custom element attributes)

Any attribute that is part of the <polymer-element> tag should now be declared on the properties object along with the data type.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

自定义元素样式 (Custom element styles)

The element styles are now defined outside the <template> tag.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

  <template>
    ...
  </template>
</dom-module>

External stylesheets are supported using HTML Imports.

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

数据绑定 (Data binding)

Polymer 1.0 offers two types of data bindings:

Polymer 1.0提供两种类型的数据绑定：

Square brackets [[]] create one-way bindings. Data flow is downward, host-to-child, and the binding never modifies the host property.
方括号[[]]创建单向绑定。数据流是向下的，从主机到子，并且绑定永远不会修改主机属性。
Curly brackets {{}} create automatic bindings. Data flow is one-way or two-way, depending whether the target property is configured for two-way binding or not.
花括号{{}}创建自动绑定。数据流是单向还是双向，取决于目标属性是否配置为双向绑定。

In this release, a binding must replace the entire text content of a node, or the entire value of an attribute. So string concatenation is not supported. For attribute values, it is recommended to use computed bindings instead of string concatenation.

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

Version 0.5:

版本0.5：

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

Version 1.0:

版本1.0：

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

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

Note that this means a node can’t include any white space around the binding annotation.

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

新的可疑DOM (The new shady DOM)

Polymer v0.5 used shadow DOM to provide a simpler element interface to the developer and abstracts all the complexities by hiding the subtrees behind a shadow root. This forms the basis of encapsulation, which works well in browsers that supports shadow DOM.

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

For browsers that do not yet support shadow DOM, implementing a polyfill that works exactly like native shadow DOM is difficult, often slower than the native implementation, and needs a lot of code. For these reasons, the Polymer team decided to do away with the shadow DOM polyfill and instead built a much lighter version of the local DOM that offers encapsulation similar to shadow DOM.

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

It’s important to note that shady DOM and shadow DOM are compatible with each other, which means that the shady DOM API uses the native shadow DOM in browsers when it’s available and falls back to the shady DOM in non-supporting browsers.

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

结论 (Conclusion)

Upgrading your app to Polymer v1.0 could be a painfully slow process depending on the complexity of your app, but offers great benefits in terms of faster load time and significantly smaller payload. The official migration guide available on the Polymer project website covers a bunch of the other changes to the internal APIs in greater depth so be sure to check that out.

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

Additionally, Chuck Horton has set up a Github repository called Road to Polymer 1.0 that offers a code convert tool to update your code to v1.0 from v0.5. This could serve as a starting point for your migration if you’re not up to making some of the cosmetic changes manually.

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