<template>标签属性详解,HTML中template标签的作用

发布时间：2021-08-25 07:45 所属分类：热门主题浏览次数：

　　<template>标签属性详解,HTML中template标签的作用

　　在Web开发领域中，模板这个概念并不新鲜。实际上，服务端的模板言语/引擎，比方Django(Python)，ERB/Haml(Ruby)，和Smarty(PHP)早已运用多时。近些年来，很多MVC框架蓬勃呈现。这些框架各有特色，但绝大多数在展现层(即：视图层)都运用相同的烘托机制：模板。

　　模板是个好东西，不信你就问问周围人。连它的界说都让人感到温暖舒适：

　　模板(n):一个拥有预制格式的文档或文件，可作为特定运用的出发点，这样就防止在每次运用格式的时候都重复创立。

　　"...防止在每次....重复创立"不知道你是怎么想的，但我喜爱防止重复工作。可为什么对这个开发者明确需求的技能，web渠道没有供给原生支撑呢？

　　WhatWGHTML模板标准便是答案。它界说了一个新的元素，用于描绘一个标准的以DOM为根底的方案来完成客户端模板。该模板允许你界说一段可以被转为HTML的符号，在页面加载时不生效，但可以在后续进行动态实例化。引用RafaelWeinstein(标准作者)的话：

　　它们是用来放置一大团HTML的地方，便是那些你不想让浏览器弄乱的符号...不论它是出于什么理由。

　　特性检测

　　欲特性检测，需求创立一个DOM元素并查看它是否拥有.content属性：

　　functionsupportsTemplate(){return'content'indocument.createElement('template');

　　}if(supportsTemplate()){//检测通过！}else{//运用旧的模板技能或库。}

　　声明模板内容

　　HTML元素代表符号中的一个模板。它包括"模板内容"；本质上是一大块的慵懒可仿制DOM。可以把模板想象成一个脚手架的零件，在运用的整个生命周期中你都可以运用(和重用)它。

　　要创立模板的内容，需求声明一些符号并用元素将它们包裹起来：

　　<templateid="mytemplate"><imgsrc=""alt="greatimage"><divclass="comment">div>template>

　　细心的读者或许会留意到那个空图片。这是故意留空的。因为页面加载时不会恳求图片，因此就不会产生404或控制台错误。咱们可以随后动态生成图片的URL。参见thepillars.

　　支柱(Thepillars)

　　用来包裹内容为咱们供给了几个重要属性。

　　它的内容在激活之前一向处于慵懒状态。本质上，这些符号便是隐藏的DOM，它们不会被烘托。

　　处于模板中的内容不会有副作用。脚本不会运行，图片不会加载，音频不会播映，...直到模板被运用。

　　内容不在文档中。在主页面运用document.getElementById()或querySelector()不会返回模板的子节点。

　　模板可以被放置在任何方位，包括，，或，而且任何可以呈现在以上元素中的内容都可以放到模板中。留意，"任何方位"意味着可以安全的呈现在HTML解析器不允许呈现的方位...简直可以作为任何内容模型的子节点。它也可以作为或的子元素：

　　<table><tr><templateid="cells-to-repeat"><td>somecontenttd>template>tr>table>

　　激活一个模板

　　要运用模板，你得先激活它。不然它的内容将永远无法烘托。激活模板最简略的办法便是运用document.importNode()对模板的.content进行深拷贝。.content为只读属性，关联一个包括模板内容的DocumentFragment。

　　vart=document.querySelector('#mytemplate');//在运行时填充src。t.content.querySelector('img').src='logo.png';varclone=document.importNode(t.content,true);

　　document.body.appendChild(clone);

　　在对模板进行冲压(stampingout)后，它的内容开端"启用"。在本例中，内容被拷贝，发出图片恳求，终究的符号得以烘托。

　　Demos

　　例子：慵懒脚本

　　该示例示范了模板内容的慵懒。只有在按钮被按下，模板被激活后才会运行。

　　<buttononclick="useIt()">Usemebutton><divid="container">div><script>functionuseIt(){varcontent=document.querySelector('template').content;//更新templateDOM中的内容。varspan=content.querySelector('span');

　　span.textContent=parseInt(span.textContent)+1;

　　document.querySelector('#container').appendChild(

　　document.importNode(content,true));

　　}script><template><div>Templateused:<span>0span>div><script>alert('Thanks!')script>template>

　　例子：从模板中生成ShadowDOM

　　大部分人通过为.innerHTML赋值一串符号来将ShadowDOM挂载到host上：

　　<divid="host">div><script>varshadow=document.querySelector('#host').createShadowRoot();

　　shadow.innerHTML='Hostnode';script>

　　该做法的坏处在于，你的ShadowDOM越杂乱，就需求越多的字符串拼接操作。这不利于扩展，用不了多久你就该傻眼了。此外该做法最简单繁殖XSS！不过别怕，前来协助。

　　合理的做法是直接操作DOM，将模板内容附加到shadowroot上：

　　<template><style>:host{background:#f8f8f8;padding:10px;transition:all400msease-in-out;box-sizing:border-box;border-radius:5px;width:450px;max-width:100%;}:host:hover{background:#ccc;}div{position:relative;}header{padding:5px;border-bottom:1pxsolid#aaa;}h3{margin:0!important;}textarea{font-family:inherit;width:100%;height:100px;box-sizing:border-box;border:1pxsolid#aaa;}footer{position:absolute;bottom:10px;right:5px;}style><div><header><h3>AddaCommenth3>header><contentselect="p">content><textarea>textarea><footer><button>Postbutton>footer>div>template><divid="host"><p>Instructionsgoherep>div><script>varshadow=document.querySelector('#host').createShadowRoot();

　　shadow.appendChild(document.querySelector('template').content);script>

　　坑

　　以下是我在运用中遇到的一些坑：

　　如果你正在运用modpagespeed，那么留心这个bug。界说了行内的模板，或许会因为PageSpeed的CSS重写规矩而被移动到头部。

　　没有办法"预烘托"一个模板，也便是说无法预加载资源，处理JS，下载初始CSS等等。这对于服务端和客户端都适用。模板被烘托的唯一机遇便是在它被激活后。

　　留意嵌套模板。它们的行为不会如你所愿。例如：

　　<template><ul><template><li>Stuffli>template>ul>template>

　　激活外层模板并不会激活内层模板。也便是说，嵌套模板需求手动激活它的子模板。

　　标准之路

　　不要忘了咱们从何而来。HTML模板的标准化进程耗时已久。多年以来，呈现不少十分聪明的用于创立可重用模板的办法。下面将介绍我碰到过的两种常见办法。出于比较的目的，我将它们收录在了本文中。

　　办法1：暗地DOM

　　一个长时间被人们运用的办法是创立"暗地"DOM并运用hidden特性或display:none来将其从视图中隐藏。