您的位置:澳门新葡8455最新网站 > Web前端 > 简单介绍HTML5中的文件导入

简单介绍HTML5中的文件导入

发布时间:2019-12-09 15:19编辑:Web前端浏览(128)

    HTML imports 入门

    2015/02/10 · HTML5 · HTML, imports

    本文由 伯乐在线 - XfLoops 翻译,周进林 校稿。未经许可,幸免转发!
    匈牙利语出处:webcomponents.org。接待参预翻译组。

    Template、Shadow DOM及Custom Elements 让您创设UI组件比早前更易于了。可是像HTML、CSS、JavaScript那样的能源依然供给二个个地去加载,那是很没功效的。

    剔除重复信赖也并不轻易。举个例子,今后加载jQuery UI或Bootstrap就须求为JavaScript、CSS及Web Fonts增多单独的竹签。倘若您的Web 组件应用了万户千门的凭仗,这件事情就变得越来越复杂。

    HTML 导入令你以四个联结的HTML文件来加载这么些财富。

    轻松易行介绍HTML5中的文件导入,

    那篇随笔重要介绍了简介HTML中的文件导入,包罗加载jQuery、导入后的实行种种等知识点,必要的对象能够参照下

    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. 澳门新葡8455最新网站,<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导入是不能够从别的的域名导入能源的。

    譬喻,你无法从 导入HTML 文件。为了绕过这一个界定,能够运用COMuranoS(跨域能源分享)。想打听COTiguanS,请看那篇文章。
    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=";  
    7.     <content select="h1"></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.     <h1>This is Custom Element</h1>  
    7.   </x-component>  
    8.   ...  

    在乎,因为x-component.html 中的document 对象跟index.html的同等,你没供给再写一些劳苦的代码,它会自动为您注册。
    支撑的浏览器

    Chrome 和 Opera提供对HTML导入的支撑,Firefox要在2016年7月后才支撑(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

     

    那篇小说首要介绍了简介HTML中的文件导入,包罗加载jQuery、导入后的实践顺序等知识点,必要的爱人能够参...

    使用HTML导入

    为加载三个HTML文件,你须要追加二个link标签,其rel属性为import,herf属性是HTML文件的门路。譬如,若是您想把component.html加载到index.html:

    index.html

    XHTML

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

    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

    XHTML

    <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>

    1
    2
    <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

    XHTML

    <link rel="import" href="component.html"> // 1. <title>Import Example</title> <script src="script3.js"></script> // 4.

    1
    2
    3
    <link rel="import" href="component.html"> // 1.
    <title>Import Example</title>
    <script src="script3.js"></script>        // 4.

    component.html

    XHTML

    <script src="js/script1.js"></script> // 2. <script src="js/script2.js"></script> // 3.

    1
    2
    <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导入是不能够从此外的域名导入能源的。

    譬喻说,你无法从向  导入HTML 文件。为了绕过那些节制,能够应用CO帕杰罗S(跨域能源分享)。想询问COQX56S,请看那篇作品。

    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

    XHTML

    var link = document.querySelector('link[rel="import"]'); link.addEventListener('load', function(e) { var importedDoc = link.import; // importedDoc points to the document under component.html });

    1
    2
    3
    4
    5
    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

    XHTML

    var mainDoc = document.currentScript.ownerDocument; // mainDoc points to the document under component.html

    1
    2
    var mainDoc = document.currentScript.ownerDocument;
    // mainDoc points to the document under component.html

    假使您在用webcomponents.js,那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性,因为而不是有所的浏览器都扶助那几个性情。

    component.html

    XHTML

    var mainDoc = document._currentScript.ownerDocument; // mainDoc points to the document under component.html

    1
    2
    var mainDoc = document._currentScript.ownerDocument;
    // mainDoc points to the document under component.html

    由此在剧本开始增多上面包车型客车代码,你就可以轻便地寻访component.html中的document对象,而不用管浏览器是否永葆HTML导入。

    XHTML

    document._currentScript = document._currentScript || document.currentScript;

    1
    document._currentScript = document._currentScript || document.currentScript;

    质量方面包车型客车思谋

    应用HTML 导入的叁个功利是力所能致将能源公司起来,不过也意味在加载这一个能源的时候,由于选拔了有个别特别的HTML文件而让底部变得过大。有几点是急需思虑的:

    剖析依赖

    要是HTML主文件要凭仗多个导入文本,何况导入文本中隐含相通的库,那时会怎么样呢?比方,你要从导入文本中加载jQuery,假诺各类导入文本都含有加载jQuery的script标签,那么jQuery就能被加载三回,并且也会被实施四次。

    index.html

    XHTML

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

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

    component1.html

    XHTML

    <script src="js/jquery.js"></script>

    1
    <script src="js/jquery.js"></script>

    component2.html

    XHTML

    <script src="js/jquery.js"></script>

    1
    <script src="js/jquery.js"></script>

    HTML导入自动帮您消除了那么些主题材料。

    与加载若干回script标签的做法不风华正茂,HTML 导入对曾经加载过的HTML文件不再进行加载和举办。以前面包车型地铁代码为例,通过将加载jQuery的script标签打包成三个HTML导入文本,这样jQuery就只被加载和奉行一回了。

    但那还会有一个难点:大家扩展了三个要加载的文书。怎么管理数量膨胀的文书呢?幸运的是,大家有三个叫vulcanize的工具来缓和这几个难点。

    集结网络央浼

    Vulcanize 能将五个HTML文件合併成多个文件,进而减弱了网络连接数。你可以依靠npm安装它,况且用命令行来使用它。你可能也在用 grunt和gulp 托管有些职分,那样的话你能够把vulcanize作为创设进程的大器晚成有个别。

    为了拆解解析注重以致联合index.html中的导入文本,使用如下命令:

    JavaScript

    $ vulcanize -o vulcanized.html index.html

    1
    $ 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

    XHTML

    <template id="template"> <style> ... </style> <div id="container"> <img src="; <content select="h1"></content> </div> </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>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <template id="template">
      <style>
        ...
      </style>
      <div id="container">
        <img src="http://webcomponents.org/img/logo.svg">
        <content select="h1"></content>
      </div>
    </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

    XHTML

    ... <link rel="import" href="x-component.html"> </head> <body> <x-component> <h1>This is Custom Element</h1> </x-component> ...

    1
    2
    3
    4
    5
    6
    7
    8
    ...
      <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要在2015年十7月后才支撑(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

      赞 1 收藏 评论

    有关笔者:XfLoops

    澳门新葡8455最新网站 1

    知乎微博:@XfLoops 个人主页 · 作者的篇章 · 10

    澳门新葡8455最新网站 2

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:简单介绍HTML5中的文件导入

    关键词:

上一篇:没有了

下一篇:实现数据压缩,前端实现