文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何理解HTML5中的文件导入

2024-04-02 19:55

关注

本篇内容介绍了“如何理解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="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复制内容到剪贴板

  1. <link rel="stylesheet" href="css/style.css">  

  2. <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复制内容到剪贴板

  1. <link rel="import" href="component.html"> // 1.   

  2. <title>Import Example</title>  

  3. <script src="script3.js"></script>        // 4.  

component.html
 

XML/HTML Code复制内容到剪贴板

  1. <script src="js/script1.js"></script>     // 2.   

  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复制内容到剪贴板

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

  2. link.addEventListener('load', function(e) {   

  3.   var importedDoc = link.import;   

  4.   // importedDoc points to the document under component.html   

  5. });  

为了获取component.html中的document 对象,要使用document.currentScript.ownerDocument.

component.html
 

XML/HTML Code复制内容到剪贴板

  1. var mainDoc = document.currentScript.ownerDocument;   

  2. // mainDoc points to the document under component.html  

如果你在用webcomponents.js,那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性,因为并不是所有的浏览器都支持这个属性。

component.html

 

XML/HTML Code复制内容到剪贴板

  1. var mainDoc = document._currentScript.ownerDocument;   

  2. // 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复制内容到剪贴板

  1. <link rel="import" href="component1.html">  

  2. <link rel="import" href="component2.html">  

component1.html
 

XML/HTML Code复制内容到剪贴板

  1. <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复制内容到剪贴板

  1. <template id="template">  

  2.   <style>  

  3.     ...   

  4.   </style>  

  5.   <div id="container">  

  6.     <img src="http://webcomponents.org/img/logo.svg">  

  7.     <content select="h2"></content>  

  8.   </div>  

  9. </template>  

  10. <script>  

  11.   // This element will be registered to index.html   

  12.   // Because `document` here means the one in index.html   

  13.   var XComponent = document.registerElement('x-component', {   

  14.     prototype: Object.create(HTMLElement.prototype, {   

  15.       createdCallback: {   

  16.         value: function() {   

  17.           var root = this.createShadowRoot();   

  18.           var template = document.querySelector('#template');   

  19.           var clone = document.importNode(template.content, true);   

  20.           root.appendChild(clone);   

  21.         }   

  22.       }   

  23.     })   

  24.   });   

  25. </script>  

index.html
 

XML/HTML Code复制内容到剪贴板

  1. ...   

  2.   <link rel="import" href="x-component.html">  

  3. </head>  

  4. <body>  

  5.   <x-component>  

  6.     <h2>This is Custom Element</h2>  

  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)。

“如何理解HTML5中的文件导入”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯