简略介绍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复制内容到剪贴板
<link rel="import" href="component.html" >
你可以往HTML导入文件(译者注:本文将“ the imported HTML”译为“HTML导入文件”,将“the original HTML”译为“HTML主文件”。例如,index.html是HTML主文件,component.html是HTML导入文件。)增加任何的资源,包罗足本、样式表及字体,就跟往一般的HTML增加资源一样。
component.html
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></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复制内容到剪贴板
<link rel="import" href="component.html"> // 1. <title>Import Example</title> <script src="script3.js"></script> // 4.
component.html
XML/HTML Code复制内容到剪贴板
<script src="js/script1.js"></script> // 2. <script src="js/script2.js"></script> // 3.
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导入文件中的window和document对象
前面我提过在导入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 Code复制内容到剪贴板
var link = document.querySelector('link[rel="import"]'); link.addEventListener('load', function(e) { var importedDoc = link.import; // importedDoc points to the document under component.html });
为了猎取component.html中的document 对象,要使用document.currentScript.ownerDocument.
component.html
XML/HTML Code复制内容到剪贴板
var mainDoc = document.currentScript.ownerDocument; // mainDoc points to the document under component.html
假如你在用webcomponents.js,那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性,由于并不是所有的阅读器都支撑这个属性。
component.html
XML/HTML Code复制内容到剪贴板
var mainDoc = document._currentScript.ownerDocument; // 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="import" href="component1.html"> <link rel="import" href="component2.html">
component1.html
XML/HTML Code复制内容到剪贴板
<script src="js/jquery.js"></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复制内容到剪贴板
<template id="template"> <style> ... </style> <p id="container"> <img src="http://webcomponents.org/img/logo.svg"> <content select="h1"></content> </p> </template> <script> // This element will be registered to index.html // Because `document` here means the one in index.html var XComponent = document.registerElement('x-component', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var root = this.createShadowRoot(); var template = document.querySelector('#template'); var clone = document.importNode(template.content, true); root.appendChild(clone); } } }) }); </script>
index.html
XML/HTML Code复制内容到剪贴板
... <link rel="import" href="x-component.html"> </head> <body> <x-component> <h1>This is Custom Element</h1> </x-component> ...
留意,由于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)。
相关引荐:
HTML5中form表单标签用途详解
以上就是简便介绍HTML5中的文件导入的具体内容,更多请关注百分百源码网其它相关文章!