ポリマー1.0へのアップグレードのガイド

コアポイント

• Polymer 1.0は、より効率的なパフォーマンス、サイズが小さく、カスタム要素のサポートが向上し、データバインディングシステムが改善され、使いやすく直感的なデータバインディングシステムを備えた以前のバージョンの徹底的なリファクタリングです。
ポリマー0.5からポリマー1.0へのアップグレードには、バウアーの依存関係の更新、HTMLのインポートの更新、要素の定義とデータバインディングの調整と新しい構文に適合するための徹底的なテストなど、いくつかのステップが必要です。
Polymer 1.0は、Webコンポーネント標準の重要な部分であるShadow Domを導入し、カスタム要素の実装の詳細をカプセル化し、ページの残りの部分の外に内部構造とスタイリングを隠します。 CSSカスタムプロパティと
• および::shadowセレクターを使用して、Shadow DOMの要素をスタイリングできます。 /deep/

最近締結されたGoogle I/O 2015会議で、Googleはポリマー1.0の待望のバージョンをリリースし、生産に入る準備ができていると発表しました。ポリマーライブラリがまだ開発者プレビュー段階にある間に使用している人のために、この記事は、既存のアプリケーションを最新バージョンのポリマーに移行するガイドとして機能します。

バージョン1.0：

に関するいくつかの重要なメモ

以前のバージョン0.5（これまでで最も長寿命のバージョン）と互換性がありません。
新しいバージョンは、パフォーマンスと効率に焦点を当て、ライブラリの全体的なサイズを大幅に削減します。
ゼロから完全に再構築されているため、開発者は標準のDOM要素に似たカスタム要素をより簡単かつ高速に設計できます。
内部ベンチマークは、以前のバージョンと比較して、バージョン1.0がChromeで約3倍高速で、Safariで約4倍高速であることを示しています。

最新バージョンのポリマーをインストールする手順は、この記事で説明したものとまったく同じです。既存のポリマーのインストールを更新するには、アプリケーションディレクトリに移動し、端末で次のコマンドを実行します。

前述のように、2つのバージョンは互換性がないことに注意することが重要です。したがって、代わりに新しいコピーを別のフォルダーにインストールすることをお勧めします。バージョン0.5以降の変更を説明するために、2つのバージョンの違いを比較するための参照として、SitePointの以前の投稿のクレジットカードカスタム要素を使用します。

<code class="language-bash">$ bower update</code>

サポートされていないブラウザーにポリフィルを提供

ポリマーの新しいバージョンでは、

ライブラリに含まれるShadow Dom Polyfillは必要ありません。代わりに、小型の

ライブラリを使用して、古いブラウザーにポリフィルを提供します。 webcomponents.js webcomponents-lite.jsバージョン0.5：

バージョン1.0：

<code class="language-html"></code>

「Liteバージョン」は、前任者よりも約80kb少ないです。これは、パフォーマンスが重要な要素である場合に非常に重要です。

<code class="language-html"></code>

カスタム要素を定義します

<polymer-element></polymer-element>タグは、カスタム要素定義を含む<dom-module></dom-module>タグに置き換えられています。カスタム要素は、<dom-module></dom-module>タグのid属性によって識別されます。カスタム要素の命名ルールはまだ同じです。

バージョン0.5：

<code class="language-bash">$ bower update</code>

バージョン1.0：

<code class="language-html"></code>

カスタム要素を登録

以前は、Polymer()コンストラクターを呼び出すだけでカスタム要素を登録できます。タグが<polymer-element></polymer-element>タグ内にある場合、カスタム要素名を指定することはオプションです。このバージョンでは、カスタム要素は、プロトタイプのis属性を使用して登録されるようになりました。

バージョン0.5：

<code class="language-html"></code>

バージョン1.0：

<code class="language-html"><polymer-element name="credit-card"></polymer-element>
  ...</code>

is属性の値は、カスタム要素の<dom-module></dom-module>タグのid属性と一致する必要があり、以前のバージョンとは異なりますが、これはオプションではありません。

タグは<dom-module></dom-module>要素の内側または外側にある場合がありますが、要素のテンプレートはPolymerコンストラクターが呼び出される前に解析する必要があります。

カスタム要素属性

<polymer-element></polymer-element>タグに含まれる属性は、データ型とともにpropertiesオブジェクトで宣言する必要があります。

バージョン0.5：

<code class="language-html"><dom-module id="credit-card"></dom-module>
  ...</code>

バージョン1.0：

<code class="language-javascript">Polymer('credit-card', {});</code>

カスタムエレメントスタイル

要素スタイルは、<template></template>タグの外側に定義されます。

バージョン0.5：

<code class="language-javascript">Polymer({
  is: 'credit-card'
});</code>

バージョン1.0：

<code class="language-html"><polymer-element name="credit-card" attributes="amount"></polymer-element></code>

HTMLインポートを使用して、外部スタイルのシートをサポートします。

データバインディング

Polymer 1.0は、2種類のデータバインディングを提供します：

• 四角い括弧[[ ]]一方向のバインディングを作成します。データフローは、ホストから子供の要素まで、トップダウンであり、バインディングはホストプロパティを変更することはありません。
• brappers{{ }}自動バインディングを作成します。データフローは、ターゲット属性が双方向結合として構成されているかどうかに応じて、一方向または双方向です。

このバージョンでは、バインディングは、ノードのテキストコンテンツ全体または属性の値全体を置き換える必要があります。したがって、文字列連結はサポートされていません。プロパティ値については、文字列連結の代わりに計算されたバインディングを使用することをお勧めします。

バージョン0.5：

<code class="language-javascript">Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }
});</code>

バージョン1.0：

<code class="language-html"><polymer-element name="credit-card" attributes="amount"></polymer-element>
  <template>
    ...
  </template></code>

<code class="language-html"><dom-module id="credit-card">
  <style>
    ...
  </style>
  <template>
    ...
  </template>
</dom-module></code>

これは、ノードにバインドされたコメントの周りのスペースが含まれないことを意味することに注意してください。

新しい日陰のdom

ポリマー0.5 Shadow Domを使用して、Shadow Rootsの後ろにサブツリーを隠すことにより、開発者にシンプルな要素インターフェイスを提供し、すべての複雑さを抽象化します。これはカプセル化の基礎を形成し、Shadow Domをサポートするブラウザでうまく機能します。

Shadow Domをまだサポートしていないブラウザの場合、ネイティブシャドウDOMとまったく同じポリフィルを実装することは非常に困難であり、通常はネイティブの実装よりも遅く、多くのコードが必要です。これらの理由により、ポリマーチームはShadow Dom PolyFillをキャンセルすることを決定し、代わりにShadow Domと同様のパッケージを提供するネイティブDOMのより軽いバージョンを構築しました。

Shady DomとShadow Domは互いに互換性があることに注意する必要があります。つまり、ブラウザが利用可能であるときにShady Dom APIがネイティブシャドウDOMを使用し、サポートされていないブラウザでShady Domに戻ります。

結論

アプリケーションの複雑さでは、アプリケーションをポリマー1.0にアップグレードすることは非常に遅いプロセスになる可能性がありますが、負荷時間を高速化し、ペイロードを大幅に削減する上で大きな利点があります。 Polymer Project Webサイトで入手可能な公式移行ガイドは、内部APIの他のいくつかの変更をより詳細に検討するため、必ず確認してください。

さらに、Chuck Hortonは、Road to Polymer 1.0と呼ばれるGitHubリポジトリを作成しました。これは、バージョン0.5からバージョン1.0にコードを更新できるコード変換ツールを提供します。これは、外観を手動で変更したくない場合に移行の出発点になる可能性があります。

ポリマー1.0 ポリマー0.5とポリマー1.0の主な違いは何ですか？

ポリマー1.0は、ポリマー0.5の以前のバージョンの完全な書き直しです。新しいバージョンはより効率的で、スペースが少なくなり、パフォーマンスが高まります。また、理解し、使用しやすい、新しい、単純化された構文も導入します。データバインディングシステムは、パフォーマンスを改善し、その動作をより直感的にするために改善されました。さらに、Polymer 1.0は、Webコンポーネントの標準の重要な部分であるカスタム要素の作成のためのより良いサポートをサポートしています。 プロジェクトをポリマー0.5からポリマー1.0にアップグレードする方法は？

ポリマー0.5からポリマー1.0へのアップグレードには、いくつかのステップが含まれます。まず、新しいポリマー1.0要素を指すように、Bower依存関係を更新する必要があります。その後、HTMLインポートを更新して、新しい要素をロードする必要があります。また、新しいポリマー1.0構文を使用するには、要素の定義とデータバインディングを更新する必要があります。最後に、プロジェクトを徹底的にテストして、すべてが期待どおりに機能することを確認する必要があります。

シャドウドムとは何ですか？ポリマー1.0でどのように機能しますか？

Shadow Domは、Webコンポーネント標準の重要な部分です。カスタム要素の実装の詳細をカプセル化し、ページの残りの部分の外側に内部構造とスタイルを隠す方法を提供します。 Polymer 1.0では、Shadow Domを使用して、完全にカプセル化された再利用可能なカスタム要素を作成できます。

シャドウdomで要素をスタイリングする方法は？

Shadow Domのスタイリング要素は、ページの残りの部分からカプセル化され、分離されているため、少し難しい場合があります。ただし、Polymer 1.0は、シャドウDOM要素をスタイリングするいくつかの方法を提供します。 CSSカスタムプロパティを使用して、Shadow Dom内で適用できるスタイルを定義できます。また、

および

セレクターを使用して、シャドウDOMに浸透し、その内部要素をスタイリングすることもできます。

...（FAQの回答の残りの部分は、コンテンツを一貫性に保つために同じ方法で書き直すことができますが、単語と文は変わります）

以上がポリマー1.0へのアップグレードのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。