Pengenalan ringkas kepada import fail dalam kemahiran tutorial HTML5

Templat, Shadow DOM dan Elemen Tersuai menjadikannya lebih mudah berbanding sebelum ini untuk membuat komponen UI. Tetapi sumber seperti HTML, CSS dan JavaScript masih perlu dimuatkan satu demi satu, yang sangat tidak cekap.

Mengalih keluar kebergantungan pendua juga tidak mudah. Sebagai contoh, memuatkan jQuery UI atau Bootstrap kini memerlukan penambahan tag berasingan untuk JavaScript, CSS dan Fon Web. Jika komponen web anda menggunakan berbilang kebergantungan, perkara menjadi lebih rumit.

Import HTML membolehkan anda memuatkan sumber ini sebagai fail HTML gabungan.
Import menggunakan HTML

Untuk memuatkan fail HTML, anda perlu menambah teg pautan yang atribut relnya ialah import dan atribut herf ialah laluan fail HTML. Contohnya, jika anda ingin memuatkan component.html ke dalam index.html:

index.html

Kod XML/HTMLSalin kandungan ke papan keratan

<pautan rel="import" href="komponen.html" >

Anda boleh mengimport fail ke dalam HTML (Nota Penterjemah: Artikel ini menterjemahkan "HTML yang diimport" sebagai "fail import HTML" dan "HTML asal" sebagai "fail utama HTML". Contohnya, index.html ialah HTML Yang utama fail, component.html ialah fail import HTML.) Tambahkan sebarang sumber, termasuk skrip, helaian gaya dan fon, sama seperti menambahkan sumber pada HTML biasa.

komponen.html

Kod XML/HTMLSalin kandungan ke papan keratan

<pautan rel="stylesheet" href="css/style.css">
<skrip src="js/ script.js">skrip>

teg doctype, html, kepala dan badan tidak diperlukan. Import HTML segera memuatkan dokumen yang diimport, menghuraikan sumber dalam dokumen dan melaksanakan skrip jika ada.
Perintah pelaksanaan

Cara penyemak imbas menghuraikan dokumen HTML adalah linear, yang bermaksud bahawa skrip di bahagian atas HTML akan dilaksanakan sebelum bahagian bawah. Selain itu, pelayar biasanya menunggu sehingga kod JavaScript dilaksanakan sebelum menghuraikan kod berikutnya.

Untuk mengelakkan skrip daripada menghalang pemaparan HTML, anda boleh menambah atribut tak segerak atau tangguh pada teg (atau anda juga boleh meletakkan teg skrip di bahagian bawah halaman). Atribut tangguh menangguhkan pelaksanaan skrip sehingga semua halaman telah dihuraikan. Atribut async membenarkan penyemak imbas untuk melaksanakan skrip secara tidak segerak supaya ia tidak menghalang pemaparan HTML. Jadi, bagaimanakah import HTML berfungsi?

Skrip dalam fail import HTML adalah sama seperti yang mengandungi atribut defer. Contohnya, dalam contoh berikut, index.html akan melaksanakan script1.js dan script2.js dahulu, dan kemudian script3.js.

index.html

Kod XML/HTMLSalin kandungan ke papan keratan

<pautan rel="import" href="component.html"> // 1.
<tajuk>Import Contohtajuk>
<skrip src="skrip3. js">skrip> // 4.

komponen.html

Kod XML/HTML复制内容到剪贴板

<skrip src="js/script1.js ">skrip> // 2.
<skrip src="js/ script2.js">skrip> // 3.

1.在index.html 中加载komponen.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属性的脚本来对待中它当做含有async属性的脚本来对待待它当做含有async属性的脚本来对待待它HTML件的执行和加载，这意味着HTML 导入不会妨碍HTML主文件的渲染。这也给提升网站性本能带来了可能，除非有其他的脚依的脚依行。
跨域导入

从根本上说，HTML导入是不能从其他的域名导入资源的。

比如，你不能从http://webcomponents.org/向 http://example.com/ 导入HTML 文件。为了绕过这个限制，可以使用语。想了解CORS，请看这篇文章。
HTML导入文件中的window和document对象

前面我提过在导入HTML文件的时仙里面的脚本是会被执行的，但这并不意味着中文的被执行的，但这并不意味着來中文会被浏览器渲染。你需要写一些JavaScript代码来帮忙。

当在HTML导入文件中使用JavaScript时，有一点要提防的是，HTML导入文件中的document对象实际的是件中的document对象实际的有象实际的是件ment对象。以前面的代码为例，index.html和 component.html 的document都是指index.html的document对象。怎么才能使用HTML导入文件中的document 呢？借助link中的import 。🞽

index.html

Kod XML/HTML复制内容到剪贴板

var pautan = dokumen.querySelector('link[rel ="import"]');
link.addEventListener('load', function(e) {
var Dokumen yang diimport = pautan.import
// importedDoc menunjuk ke dokumen di bawah component.html
});

Untuk mendapatkan objek dokumen dalam component.html, gunakan document.currentScript.ownerDocument.

komponen.html

Kod XML/HTMLSalin kandungan ke papan keratan

var mainDoc = dokumen.currentScript.ownerDocument;
// mainDoc menunjuk ke dokumen di bawah component.html

Jika anda menggunakan webcomponents.js, maka gunakan document._currentScript dan bukannya document.currentScript. Garis bawah digunakan untuk mengisi atribut currentScript kerana tidak semua pelayar menyokong atribut ini.

komponen.html

Kod XML/HTMLSalin kandungan ke papan keratan

var mainDoc = dokumen._currentScript.ownerDocument;
// mainDoc menunjuk ke dokumen di bawah component.html

Dengan menambahkan kod berikut pada permulaan skrip, anda boleh mengakses objek dokumen dengan mudah dalam component.html tanpa mengira sama ada penyemak imbas menyokong import HTML.

document._currentScript = document._currentScript ||.document.currentScript;
Pertimbangan prestasi

Satu faedah menggunakan import HTML ialah untuk menyusun sumber, tetapi ini juga bermakna apabila memuatkan sumber ini, pengepala menjadi terlalu besar disebabkan penggunaan beberapa fail HTML tambahan. Terdapat beberapa perkara yang perlu dipertimbangkan:
Menyelesaikan kebergantungan

Apakah yang berlaku jika fail HTML utama bergantung pada berbilang fail import dan fail import mengandungi pustaka yang sama? Contohnya, jika anda ingin memuatkan jQuery daripada fail import, jika setiap fail import mengandungi teg skrip yang memuatkan jQuery, maka jQuery akan dimuatkan dua kali dan dilaksanakan dua kali.

index.html

Kod XML/HTMLSalin kandungan ke papan keratan

<pautan rel="import" href="komponen1.html">
<pautan rel="import" href="komponen2.html">

komponen1.html

Kod XML/HTMLSalin kandungan ke papan keratan

<skrip src="js/jquery.js ">skrip>

component2.html

Import HTML secara automatik menyelesaikan masalah ini untuk anda.

Berbeza daripada memuatkan teg skrip dua kali, import HTML tidak lagi memuatkan dan melaksanakan fail HTML yang telah dimuatkan. Mengambil kod sebelumnya sebagai contoh, dengan membungkus teg skrip yang memuatkan jQuery ke dalam fail import HTML, jQuery hanya dimuatkan dan dilaksanakan sekali.

Tetapi ada masalah: kami telah menambahkan fail untuk dimuatkan. Bagaimana untuk menangani bilangan fail yang semakin meningkat? Nasib baik, kami mempunyai alat yang dipanggil vulcanize untuk menyelesaikan masalah ini.
Gabungkan permintaan rangkaian

Vulcanize boleh menggabungkan berbilang fail HTML ke dalam satu fail, dengan itu mengurangkan bilangan sambungan rangkaian. Anda boleh memasangnya dengan npm dan menggunakannya dari baris arahan. Anda juga mungkin menggunakan grunt dan gulp untuk menganjurkan beberapa tugasan, dalam hal ini anda boleh memvulkan sebagai sebahagian daripada proses binaan.

Untuk menyelesaikan kebergantungan dan menggabungkan fail import dalam index.html, gunakan arahan berikut:

Salin kod

Kodnya adalah seperti berikut:

$ vulcanize -o vulcanized.html index.html

Dengan melaksanakan arahan ini, kebergantungan dalam index.html akan dihuraikan dan fail HTML gabungan yang dipanggil vulcanized.html akan dijana. Untuk mengetahui lebih lanjut mengenai pemvulkanan, lihat di sini.

Nota: Ciri tolak pelayan http2 sedang dipertimbangkan untuk penghapusan masa depan pemautan dan penggabungan fail.
Gabungkan Templat, Shadow DOM, elemen tersuai dan import HTML

Mari gunakan import HTML untuk kod untuk siri artikel ini. Anda mungkin tidak pernah melihat artikel ini sebelum ini, jadi izinkan saya menerangkannya dahulu: Templat membolehkan anda mentakrifkan kandungan elemen tersuai anda secara deklaratif. Shadow DOM membenarkan gaya, ID dan kelas elemen hanya digunakan pada dirinya sendiri. Elemen tersuai membolehkan anda menyesuaikan teg HTML. Dengan menggabungkan ini dengan import HTML, komponen web tersuai anda menjadi modular dan boleh digunakan semula. Sesiapa sahaja boleh menggunakannya dengan menambahkan teg Pautan.

x-component.html

Kod XML/HTMLSalin kandungan ke papan keratan

<template id="template" >
<gaya>
...
gaya>
<div id="bekas" >
<img src="http: //webcomponents.org/img/logo.svg">
<kandungan pilih="h1" >kandungan>
div>
templat>
<skrip>
// Elemen ini akan didaftarkan ke index.html
// Kerana `dokumen` di sini bermaksud yang dalam index.html
var XComponent = dokumen.registerElement('x-component', {
prototaip: Object.create(HTMLElement.prototype, {
diciptaPanggil Balik: {
nilai: function() {
var root = ini.createShadowRoot();
var templat = dokumen.querySelector('#template');
var klon = dokumen.importNode(template.content, true);
root.appendChild(klon);
}
}
})
});
skrip>

index.html

Kod XML/HTML复制内容到剪贴板

...
<pautan rel="import" href="x-component.html">
kepala>
<badan>
<x-komponen>
<h1>Ini ialah Elemen Tersuaih1>
x-komponen>
...

Perhatikan bahawa kerana objek dokumen dalam x-component.html adalah sama dengan index.html, anda tidak perlu menulis sebarang kod rumit, ia akan didaftarkan secara automatik untuk anda.
Pelayar yang disokong

Chrome dan Opera menyediakan sokongan untuk import HTML, dan Firefox tidak akan menyokongnya sehingga Disember 2014 (Mozilla menyatakan bahawa Firefox tidak bercadang untuk menyediakan sokongan untuk import HTML dalam masa terdekat, dengan mendakwa bahawa ia perlu terlebih dahulu memahami cara modul ES6 dilaksanakan).

Anda boleh pergi ke chromestatus.com atau caniuse.com untuk menyemak sama ada penyemak imbas menyokong import HTML. Jika anda ingin menggunakan import HTML pada penyemak imbas lain, anda boleh menggunakan webcomponents.js (dahulu platform.js).
Sumber Berkaitan

Itu sahaja untuk import HTML. Jika anda ingin mengetahui lebih lanjut tentang import HTML, sila pergi ke:

Import HTML: #include untuk web – HTML5Rocks
Spesifikasi Import HTML