HTML5_html5 チュートリアル スキルでのファイル インポートの簡単な紹介

テンプレート、Shadow DOM、カスタム要素により、UI コンポーネントの作成がこれまでより簡単になります。ただし、HTML、CSS、JavaScript などのリソースは依然として 1 つずつロードする必要があり、非常に非効率です。

重複した依存関係を削除するのも簡単ではありません。たとえば、jQuery UI または Bootstrap を読み込むには、JavaScript、CSS、および Web フォントに個別のタグを追加する必要があります。 Web コンポーネントが複数の依存関係を適用する場合、状況はさらに複雑になります。

HTML インポートを使用すると、これらのリソースを結合された HTML ファイルとしてロードできます。
HTML を使用してインポート

HTML ファイルをロードするには、rel 属性が import で、herf 属性が HTML ファイルのパスであるリンク タグを追加する必要があります。たとえば、component.html をindex.html にロードする場合:

index.html

XML/HTML コードコンテンツをクリップボードにコピー

1. <リンク rel="インポート" href="component.html" >

ファイルを HTML にインポートできます (翻訳者注: この記事では、「インポートされた HTML」を「HTML インポート ファイル」、「元の HTML」を「HTML メイン ファイル」と翻訳します。たとえば、index.html は HTML メイン ファイルです。ファイル、component.html は HTML インポート ファイルです。) 通常の HTML にリソースを追加するのと同じように、スクリプト、スタイル シート、フォントなどのリソースを追加します。

component.html

XML/HTML コードコンテンツをクリップボードにコピー

1. <リンク rel="スタイルシート" href="css/style.css">
2. <script src="js/ script.js">スクリプト>

doctype、html、head、body タグは必要ありません。 HTML インポートでは、インポートされるドキュメントがただちにロードされ、ドキュメント内のリソースが解析され、スクリプトがあれば実行されます。
約定命令

ブラウザが HTML ドキュメントを解析する方法は線形です。つまり、HTML の上部にあるスクリプトが下部より前に実行されます。さらに、ブラウザは通常、JavaScript コードが実行されるまで待ってから、後続のコードを解析します。

スクリプトが HTML のレンダリングを妨げないようにするには、タグに async または defer 属性を追加します (または、script タグをページの下部に置くこともできます)。 defer 属性は、すべてのページが解析されるまでスクリプトの実行を遅らせます。 async 属性を使用すると、ブラウザは HTML のレンダリングを妨げないようにスクリプトを非同期に実行できます。では、HTML インポートはどのように機能するのでしょうか?

HTML インポート ファイル内のスクリプトは、defer 属性を含むものと同じです。たとえば、次の例では、index.html は script1.js と script2.js を最初に実行し、次に script3.js を実行します。

index.html

XML/HTML コードコンテンツをクリップボードにコピー

1. <リンク rel="インポート" href="component.html"> // 1.
2. <title>インポート例タイトル>
3. <script src="script3. js">スクリプト> // 4.

component.html

XML/HTML コード复制コンテンツ到剪贴板

1. <script src="js/script1.js ">スクリプト> // 2.
2. <script src="js/ script2.js">script> // 3.

1.在index.html中加下component.html并等待機行

2.実行component.html中のscript1.js

3.完了script1.jsを実行後、component.html中のscript2.jsを実行

4.script2.js を実行してindex.html 内の script3.js を実行

注意:link[rel="import"] に async プロパティが追加された場合、HTML への参加は、async プロパティを含むファイルを適切に待機します。これにより、他のスクリプトが HTML 入力ファイルの実行に依存する可能性を除き、Web サイトのパフォーマンス バンドルも向上します。
基本的に、HTML 入力は他のドメイン名からソースに入力できません。

たとえば、http://webcomponents.org/ から http://example.com/ に HTML ファイルを挿入することはできません。この制限を回避するために、CORS (全域リソース共有) を使用できます。

HTML は、ドキュメント内のウィンドウとドキュメント オブジェクトを挿入します

前に、HTML ファイルを挿入するときにこのページのスクリプトが実行される可能性があると述べましたが、これは、HTML を挿入するファイル内のコードもブラウザーによって汚染される可能性があることを意味するものではありません。

HTML 入力ファイル内で JavaScript を使用する場合、HTML 入力ファイル内のドキュメント オブジェクトは、実際には HTML メイン ファイル内のドキュメント オブジェクトを指します。

と、component.html のドキュメントは両方とも、index.html のドキュメント オブジェクトを指します。HTML を使用してファイル内のドキュメントを挿入することはできません。

index.html

XML/HTML コード

复制コンテンツ到剪贴板

1. var link = document.querySelector('link[rel ="インポート"]');
2. link.addEventListener('load', function(e) {
3. var importedDoc = link.import;
// importDoc は、component.html の下のドキュメントを指します
});

component.html 内のドキュメント オブジェクトを取得するには、document.currentScript.ownerDocument.

を使用します。

component.html

XML/HTML コード

コンテンツをクリップボードにコピー

1. var mainDoc = ドキュメント.currentScript.ownerDocument // mainDoc は、component.html の下のドキュメントを指します

webcomponents.js を使用している場合は、document.currentScript の代わりに document._currentScript を使用します。すべてのブラウザがこの属性をサポートしているわけではないため、currentScript 属性を設定するためにアンダースコアが使用されます。

コンポーネント.html

XML/HTML コード

コンテンツをクリップボードにコピー

var
1. mainDoc = ドキュメント._currentScript.ownerDocument // mainDoc は、component.html の下のドキュメントを指します
スクリプトの先頭に次のコードを追加すると、ブラウザが HTML インポートをサポートしているかどうかに関係なく、component.html 内のドキュメント オブジェクトに簡単にアクセスできます。

document._currentScript = document._currentScript || document.currentScript;

パフォーマンスに関する考慮事項

HTML インポートを使用する利点の 1 つはリソースを整理できることですが、これらのリソースをロードするときに追加の HTML ファイルを使用するためヘッダーが大きくなりすぎることも意味します。考慮すべき点がいくつかあります:
依存関係の解決

メインの HTML ファイルが複数のインポート ファイルに依存しており、インポート ファイルに同じライブラリが含まれている場合はどうなりますか?たとえば、インポート ファイルから jQuery をロードする場合、各インポート ファイルに jQuery をロードするスクリプト タグが含まれていると、jQuery は 2 回ロードされ、2 回実行されます。

index.html

XML/HTML コード

コンテンツをクリップボードにコピー

<

1. リンク rel="インポート" href="component1.html"> <
2. リンク rel="インポート" href="component2.html"> component1.html

XML/HTML コード

コンテンツをクリップボードにコピー

1. <スクリプト src="js/jquery.js ">スクリプト>

component2.html

HTML インポートは、この問題を自動的に解決します。

スクリプト タグを 2 回ロードする場合とは異なり、HTML インポートでは、すでにロードされている HTML ファイルをロードして実行することはなくなりました。前のコードを例に挙げると、jQuery を読み込む script タグを HTML インポート ファイルにパッケージ化することで、jQuery は 1 回だけ読み込まれて実行されます。

しかし、問題があります。ロードするファイルを追加しました。増大するファイル数にどう対処するか?幸いなことに、この問題を解決するための vulcanize というツールがあります。
ネットワークリクエストをマージします

Vulcanize は複数の HTML ファイルを 1 つのファイルにマージできるため、ネットワーク接続の数が削減されます。 npm を使用してインストールし、コマンド ラインから使用できます。一部のタスクをホストするために grunt と gulp を使用している場合もあります。その場合、ビルド プロセスの一部として加硫することができます。

依存関係を解決し、index.html 内のインポート ファイルをマージするには、次のコマンドを使用します:

コードをコピー

コードは次のとおりです:

$ vulcanize -o vulcanized.htmlindex.html

このコマンドを実行すると、index.html の依存関係が解析され、vulcanized.html という結合された HTML ファイルが生成されます。バルカナイズについて詳しくは、こちらをご覧ください。

注: http2 のサーバー プッシュ機能は、将来ファイルのリンクとマージを廃止するために検討されています。
テンプレート、Shadow DOM、カスタム要素、HTML インポートを組み合わせる

この記事シリーズのコードには HTML インポートを使用してみましょう。これらの記事をこれまで見たことがないかもしれませんので、最初に説明させてください。 テンプレートを使用すると、カスタム要素のコンテンツを宣言的に定義できます。 Shadow DOM では、要素のスタイル、ID、クラスをそれ自体にのみ適用できます。カスタム要素を使用すると、HTML タグをカスタマイズできます。これらを HTML インポートと組み合わせることで、カスタム Web コンポーネントがモジュール化され、再利用可能になります。リンクタグを付けて頂ければ誰でもご利用頂けます。

x-component.html

XML/HTML コードコンテンツをクリップボードにコピー

1. <テンプレート id="テンプレート" >
2. <スタイル>
3. ...
4. スタイル>
5. <div id="コンテナ" >
6. <img src="http: //webcomponents.org/img/logo.svg">
7. <コンテンツ select="h1" >コンテンツ>
8. div>
9. テンプレート>
10. <スクリプト>
11. // この要素は index.html
に登録されます
12. // ここでの「ドキュメント」とは、index.html にあるものを意味するためです
13. var XComponent = document.registerElement('x-component', {
14. プロトタイプ: Object.create(HTMLElement.prototype, {
15. createdCallback: {
16. value: function() {
17. var root = this.createShadowRoot();   
18. var テンプレート = ドキュメント.querySelector('#template');   
19. var クローン = ドキュメント.importNode(template.content, true);   
20. root.appendChild(クローン);   
21. }
22. }
23. })
24. });   
25. スクリプト>

index.html

XML/HTML コード复制コンテンツ到剪贴板

1. ...
2. <リンク rel="インポート" href="x-component.html">
3. 頭>
4. <ボディ>
5. <x コンポーネント>
6. <h1>これはカスタム要素ですh1>
7. x コンポーネント>
8. ...

x-component.html のドキュメント オブジェクトはindex.html と同じであるため、難しいコードを記述する必要はなく、自動的に登録されることに注意してください。
サポートされているブラウザ

Chrome と Opera は HTML インポートのサポートを提供しますが、Firefox は 2014 年 12 月までサポートしません (Mozilla は、Firefox が近い将来に HTML インポートをサポートする予定はないと述べ、まず ES6 モジュールがどのようにサポートされるかを理解する必要があると主張しました)実装されています）。

chromestatus.com または caniuse.com にアクセスして、ブラウザが HTML インポートをサポートしているかどうかを確認できます。他のブラウザで HTML インポートを使用する場合は、webcomponents.js (以前の platform.js) を使用できます。
関連リソース

HTML インポートについては以上です。 HTML インポートについて詳しく知りたい場合は、

にアクセスしてください。

HTML インポート: Web 用 #include – HTML5Rocks
HTML インポート仕様