如何使用 HTML Imports

Web 組件從第一次被引入，經歷了漫長的過程。其中某個組件可能真的會改變咱們編寫網站的方式，它就是 HTML Imports 。

這種方法容許咱們將 HTML 文檔導入到其餘的 HTML 文檔中去 。 它能夠經過 Ajax 實現，不過 HTML Imports 是一個更乾淨的方法 。

瀏覽器支持

HTML Imports 是一個很是新的技術以致於目前只有 Chrome 31 及以上才支持。即使如此，你還必須手動激活這個功能。在瀏覽器地址欄輸入並訪問 chrome://flags 而後啓用 "Enable HTML Imports" 而後重啓便可使用 。

幸運的是還有個 Polyfill for HTML Imports ，你能夠在 Github 找到它。

使用 HTML Imports

想一想看，咱們已經使用 imports 來引入樣式表和 JS 文件;這只是另外一種導入類型而且語法與導入樣式表相似，在你的文檔頭部這樣寫：

<link href="import/post.html" rel="import" />

獲取內容

當你導入一個 HTML 文件你其實但願瀏覽器去獲取你想要的內容， 但它不會自動得在文檔上展示;爲此你須要編寫一些簡單的 JavaScript 代碼。爲了獲取導入的 HTMl 的內容你能夠這麼寫：

var post = document.querySelector('link[rel="import"]').import;

這段代碼會獲取到咱們導入的 post.html 文件,假設 post.html 文件內容以下:

<article class="post">
<h2>A Post Title</h2>
<p><span>Written by: Admin</span></p>
<p>If you run a business and want a professional first point of contact or just need a hand with some of the day to day to business tasks because things are getting a bit busy, then we can help.</p>
</article>

咱們須要得到導入頁面的內容而後將文章部分放到咱們的頁面上：

var post = document.querySelector('link[rel="import"]').import;
var article = post.querySelector('.post');
document.body.appendChild(article.cloneNode(true));

咱們也能夠利用專門爲這種需求設計的模版元素，按需導入部分模版。 在這個案例中惟一不同的是咱們會將元素導入到一個容器中，而不是 body ，這樣能更好的適配咱們的app。基本都是作選擇而後執行一小段 JS ，要將 HTML 插入到某個元素裏你能夠這樣寫：

var post = document.querySelector('link[rel="import"]').import;
var article = post.querySelector('.post');
var clone = document.importNode(article.content, true);
document.querySelector('#container').appendChild(clone);

如你所見，這個案例不一樣的地方在於它先克隆了元素，而後附加到了某個元素裏。

總結

HTML Imports 給予咱們一個很棒的方法來構建更好的網站以及組織應用，它的 API 也比較簡單，一旦瀏覽器支持的話會發揚光大，但願它能成爲一個常見的技術。