HTML imports 入门

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文件来加载那个财富。

使用HTML导入

为加载贰个HTML文件,你须求追加一个link标签,其rel属性为import,herf属性是HTML文件的不二等秘书诀。举例,假如你想把component.html加载到index.html:

index.html

XHTML

亚搏app官方网站,<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

www.yabovip4.com,注意,如果给link[rel=”import”]增添async属性,HTML导入会把它看作含有async属性的脚本来对待。它不会等待HTML导入文本的试行和加载,那意味HTML
导入不会妨碍HTML主文件的渲染。这也给升迁网站品质带来了或者,除非有其它的脚本依赖于HTML导入文本的施行。

HTML imports 入门。跨域导入

从根本上说,HTML导入是不能够从别的的域名导入能源的。

比方说,你不能够从向 
导入HTML
文件。为了绕过那几个界定,能够选取CO奔驰M级S(跨域财富共享)。想打听CO奔驰G级S,请看那篇小说。

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._HTML imports 入门。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

HTML imports 入门。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导入自动帮你化解了那个标题。

HTML imports 入门。与加载五遍script标签的做法分歧,HTML
导入对曾经加载过的HTML文件不再举办加载和实践。此前面包车型地铁代码为例,通过将加载jQuery的script标签打包成一个HTML导入文本,那样jQuery就只被加载和进行叁次了。

但那还应该有三个主题素材:大家增添了一个要加载的文书。怎么管理多少膨胀的文书呢?幸运的是,大家有三个叫vulcanize的工具来消除那几个题材。

集合互联网要求

VulcanizeHTML imports 入门。 能将八个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

www.yabovip4.com 1

乐乎今日头条:@XfLoops
个人主页 ·
笔者的篇章 ·
10

www.yabovip4.com 2

发表评论

电子邮件地址不会被公开。 必填项已用*标注