如何使用 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 也比较简单，一旦浏览器支持的话会发扬光大，但愿它能成为一个常见的技术。