4

HTMLImports.whenReady とはどう違いwindow.addEventListener('WebComponentsReady', function(e) {ますか？

Polymer の公式ドキュメントには次のように書かれています。

「メインの HTML ドキュメントで要素を定義するには、HTMLImports.whenReady(callback) から要素を定義します。ドキュメント内のすべてのインポートの読み込みが完了すると、コールバックが呼び出されます。」

インポートに関する Webcomponents.org の公式ドキュメントには次のように書かれています。

ネイティブ インポートでは、メイン ドキュメントのタグがインポートの読み込みをブロックします。これは、インポートがロードされ、インポートに登録されている要素がアップグレードされていることを確認するためです。このネイティブの動作はポリフィルが難しいため、HTML Imports ポリフィルは試みません。代わりに、WebComponentsReady イベントがこの動作の代わりになります。

2つの違いは何ですか？

4

1 に答える 1

5

それらはほぼ* 同じです: 両方が同時にトリガーされます。

callbackとの中からお好きなフレーバーをお選びいただけますEvent。

注: 何らかの理由で、ポリフィルのみを参照すると(CustomElement.jsつまり、HTMLImports.js機能なしで)、WebComponentsReadyイベントのみがスローされます。

Event Handler(最初のケースでは が定義されていることを確認する必要があり、ここHTMLImportsで文書化されている唯一の APIであるため、を使用することを好みます)

※：もちろん違います！違いは、引用された定義に記載されています。

  • 後者は、カスタム要素がインスタンス化されるのを待っています。CustomElement.jsポリフィルによってトリガーされます。
  • 1 つ目は、インポートが読み込まれて解析されるのを待つだけです。HTMLImports.jsが送信された直後に、ポリフィルによって呼び出さ{HTMLImportsLoaded}れます。

ただし、通常の状況では、カスタム要素は登録されるとすぐにインスタンス化されるため、2 つのイベントが次々に発生します。

年代順

  1. <link rel=import>.onload()、
  2. {HTMLImportsLoaded}イベント、
  3. HTMLImports.whenReady()
  4. {WebComponentsReady}イベント

詳細はこちら。

于 2016-05-04T15:30:23.230 に答える