簡單介紹HTML5中的檔案匯入_html5教學技巧-H5教程-PHP中文網

Template、Shadow DOM及Custom Elements 讓你建立UI元件比以前更容易了。但是像HTML、CSS、JavaScript這樣的資源仍然需要一個個去加載，這是很沒效率的。

刪除重複依賴也不簡單。例如，現在載入jQuery UI或Bootstrap就需要為JavaScript、CSS及Web Fonts新增單獨的標籤。如果你的Web 元件應用了多重的依賴，那事情就變得更複雜。

HTML 匯入讓你以一個合併的HTML檔案來載入這些資源。
使用HTML導入

為載入一個HTML文件，你需要增加一個link標籤，其rel屬性為import，herf屬性是HTML文件的路徑。例如，如果你想把component.html載入到index.html：

index.html

XML/HTML Code複製內容到剪貼簿

link rel=rel"" 🎜> href="component.html" > >

component.html XML/HTML Code複製內容到剪貼簿 link rel="stylesheet"
href="css/style.css"> > script src=src=

src

script

doctype、html、 head、 body這些標籤是不需要的。 HTML 匯入會立即載入要匯入的文檔，解析文件中的資源，如果有腳本的話也會立即執行它們。執行順序瀏覽器解析HTML文件的方式是線性的，這就是說HTML頂部的script會比底部先執行。而且，瀏覽器通常會等到JavaScript程式碼執行完畢後，才會接著解析後面的程式碼。

為了不讓script 妨礙HTML的渲染，你可以在標籤中加入async或defer屬性（或者你也可以將script 標籤放到頁面的底部）。 defer 屬性會延遲腳本的執行，直到全部頁面解析完畢。 async 屬性讓瀏覽器非同步地執行腳本，而不會妨礙HTML的渲染。那麼，HTML 導入是怎麼運作的呢？ HTML匯入檔案中的腳本就跟含有defer屬性一樣。例如在下面的範例中，index.html會先執行script1.js和script2.js ，然後再執行script3.js。 index.html XML/HTML Code複製內容到剪貼簿

連結 rel=rel= href="component.html"> /// >
標題>導入示例標題>
腳本 src=src=src=src=

src

=

src

=src

>腳本> component.html XML/HTML 程式碼將內容複製到剪貼簿
腳本 src=src= >腳本>

腳本

src

腳本

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導入檔案的執行和加載，這意味著HTML導入堅持不會HTML主檔案的渲染。這也為提升網站效能帶來了可能，除非有其他腳本依賴HTML匯入檔案的執行。跨域導入從根本上來說，HTML 導入是不能從其他的網域匯入資源的。例如，你不能從http://webcomponents.org/向http://example.com/匯入HTML檔。為了繞過這個限制，可以使用CORS（跨域資源共享）。想了解CORS，請看這篇文章。 HTML匯入文件中的視窗與文件物件前面我曾經提過在匯入HTML檔案的時候裡面的腳本是會被執行的，但並不代表HTML匯入檔案中的標籤同時被瀏覽器渲染。你需要寫一些JavaScript程式碼來幫忙。當在HTML導入檔案中使用JavaScript時，有一點要提防的是，HTML導入檔案中的document物件實際上指的是HTML主檔案中的document物件。以前面的程式碼為例，index.html和 component.html 的document都是指index.html的document物件。怎麼才能使用HTML導入文件中的document呢？借助link中的import屬性。 index.html XML/HTML 程式碼將內容複製到剪貼簿

var link = document.querySelector('link="import"]');
importedDoc = link.import; // importedDoc points to the document under component.html
});

component.html

XML/HTML Code

複製內容到剪貼簿

var

mainDoc = document.current.Script.o // mainDoc points to the document under component.html
如果你在用webcomponents.js，那就用document._currentScript來取代document.currentScript。底線用來填滿currentScript屬性，因為並不是所有的瀏覽器都支援這個屬性。 component.html

XML/HTML Code

複製內容到剪貼簿

var

mainDoc

document._current>document._current. > // mainDoc points to the document under component.html
透過在腳本開頭加入下面的程式碼，你就可以輕鬆地存取component.html中的document對象，而不用管瀏覽器是不是支援HTML導入。 document._currentScript = document._currentScript || document.currentScript;

使用HTML 導入的一個好處是能夠將資源組織起來，但也意味著在載入這些資源的時候，由於使用了一些額外的HTML檔案而讓頭部變得過大。有幾點是需要考慮的：

解析依賴

假如HTML主文件要依賴多個導入文件，而且導入文件中含有相同的庫，這時會怎麼樣呢？例如，你要從匯入檔案載入jQuery，如果每個匯入檔案都含有載入jQuery的script標籤，那麼jQuery就會被載入兩次，也會被執行兩次。

index.html

XML/HTML Code

複製內容到剪貼簿

link

rel=rel"" 🎜> href="component1.html"> 🎜>> link
rel="import" href="component2.html"> component1.html

複製內容到剪貼簿

script src=src=>script>

component2.html

HTML導入自動幫你解決了這個問題。

與載入兩次script標籤的做法不同，HTML 匯入對已載入過的HTML檔案不再進行載入和執行。以前面的程式碼為例，透過將載入jQuery的script標籤打包成一個HTML匯入文件，這樣jQuery就只被載入和執行一次了。

但這還有一個問題：我們增加了一個要載入的檔案。怎麼處理數目膨脹的文件呢？幸運的是，我們有一個叫vulcanize的工具來解決這個問題。
合併網路請求

Vulcanize 能將多個HTML文件合併成一個文件，從而減少了網路連線數。你可以藉助npm安裝它，並且用命令列來使用它。你可能也在用 grunt和gulp 託管一些任務，這樣的話你可以把vulcanize當作建置過程的一部分。為了解析依賴以及合併index.html中的導入文件，使用如下命令：

複製代碼

代碼如下:

$ vulcanize -o vulcanized.html index.html

透過執行這個指令，index.html中的依賴會被解析，並且會產生一個合併的HTML文件，稱為 vulcanized.html。學習更多有關vulcanize的知識，請看這裡。

注意：http2的伺服器推播功能被考慮用於以後消除檔案的連結與合併。
把Template、Shadow DOM、自訂元素跟HTML導入結合

讓我們對這個文章系列的程式碼使用HTML導入。你可能之前沒有看過這些文章，我先解釋一下：Template可以讓你用聲明的方式定義你的自訂元素的內容。 Shadow DOM可以讓一個元素的style、ID、class只作用到本身。自訂元素可以讓你自訂HTML標籤。透過把這些跟HTML導入結合起來，你自訂的web 元件會變得模組化，具有重複使用性。任何人添加一個Link標籤就可以使用它。

x-component.html

XML/HTML Code複製內容到剪貼簿