簡單介紹HTML5中的檔案匯入_html5教學技巧

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複製內容到剪貼簿

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

 

>

 

>

 

  

你可以往HTML導入文件（譯者註：本文將“ the imported HTML”翻譯為“HTML導入文件”，將“the original HTML”翻譯為“HTML主文件”。例如，index.html是HTML主文件，component.html是HTML導入文件。
1. component.html  XML/HTML Code複製內容到剪貼簿 link rel="stylesheet"
2.  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複製內容到剪貼簿

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

=

src

=

src

=src

=

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

腳本

 

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 程式碼將內容複製到剪貼簿

1. var link = document.querySelector('link="import"]');   
link.addEventListener('load', function(e) {   
  var 
3. importedDoc = link.import;     // importedDoc points to the document under component.html   
4. });  
為了取得component.html中的document 對象，要使用document.currentScript.ownerDocument.

component.html

 

XML/HTML Code

複製內容到剪貼簿

var 

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

 

XML/HTML Code

複製內容到剪貼簿

var 

mainDoc

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

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

解析依賴

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

index.html

 

XML/HTML Code

複製內容到剪貼簿

link

 
1. rel=rel"" 🎜> href="component1.html"> 🎜>>  link
 
2. rel="import" href="component2.html"> component1.html 
XML/HTML Code

複製內容到剪貼簿

1. 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複製內容到剪貼簿

1. 模板 id=id=id=
2. id>     
樣式
3. >
  
4.     ...      
樣式
5. >     div id= 🎜>
>
6.        img src src
 
7. src src src src src >  
8.     內容 選擇
=
9. "h1" >內容>
  
10.   div>
  
模板
13. >  
腳本
14. >
  
  // 該元素將註冊至 index.html   
  // 因為這裡的`document`指的是index.html中的那個  
17.   var XComponent = 文件.registerElement('x-com .
18.     原型： Object.create(HTMLElement.prototype, {          createdCallback: {            值：函數() {   
19.           var root = 這個這個          var 範本
20.  = 
21.           var 複製
22.  = 
23.           root.appendChild(克隆);   
24.         }   
25.       }        })      });   

腳本

>

  

index.html  XML/HTML 程式碼將內容複製到剪貼簿

1. ...   
2.   link rel rel==== 🎜> href=
3. "x-component.html"> > head
4. >   body
5. >     x-component
6. >       h1>This is >h1>
7.      x-component>
8.   

  ...  

注意，因為x-component.html 中的document 物件跟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 Imports: #include for the web – HTML5Rocks    HTML Imports spec