HTML semantics: HTML5 new tag--template

First, preface

When we use String-base's template engine (such as handlebars.js, etc.), the template text is either stored through an external file or loaded via the XHR or script tag, or through <script type= "text/ X-template "></script> labels are written directly on the current page. Now HTML5 provides us with a brand-new template tag that will store templates text for the String-base template engine in a more unified and efficient manner!

Directory One lump:

Ii. the way we store template text in those years

1. Script tag

2. TextArea label

3. XMP Tags

Iii. New Vision of template tags

1. Not the same childnodes

2. Pseudo-Document fragment entry--content properties

Ii. the way we store template text in those years

The first thing to make clear is that the template document has the following 2 requirements:

1. <> "' not be converted into character entities;

2. The img tag with the SRC attribute does not trigger a resource request.

Here are the usual ways to store:

1. Script tag

//template Text<script id="TPL"Type="text/x-template">"Dummy.png"title="{{title}}"/></script>//Get Template<script type="Text/javascript">//cannot be obtained through innertext because innertext cannot get  tag charactersvarTPL = document.getElementById ('TPL'). Innerhtmltpl= Tpl.replace (/^[\s\u3000]*|[ \s\u3000]*$/,"') Handlebars.compile (TPL) ({title:'Test'})</script>

Note:

1. If the template contains </script> tags will cause the label Terminator confusion problem, so in this way to store the template, you can not include the </script> end tag;

2. The script tag position is more casual and can be used as a child of head or body.

2. TextArea label

//template Text<textarea id="TPL"style="Display:none;">"Dummy.png"title="{{title}}"/></textarea>//Get Template<script type="Text/javascript">varTplel = document.getElementById ('TPL')varTPL =Tplel.value//It can also be obtained through Tplel.innertext. But cannot be obtained through tplel.innerhtml, because it converts <> "' to character entityTPL = Tpl.replace (/^[\s\u3000]*|[ \s\u3000]*$/,"') Handlebars.compile (TPL) ({title:'Test'})</script>

Note:

1. If the template contains </textarea> tags will cause the label Terminator confusion problem, so in this way to store the template, you can not include the </textarea> end tag;

2. The textarea element must act as the descendant element of the body.

3. XMP tags (semantics are used as an example for identifying content and are now abolished by the standard, but the label is still supported by major browsers)

//template Text&LT;XMP id="TPL"style="Display:none;">"Dummy.png"title="{{title}}"/></xmp>//Get Template<script type="Text/javascript">varTplel = document.getElementById ('TPL')varTPL =tplel.innerhtml//access via Tplel.innertext can also beTPL = Tpl.replace (/^[\s\u3000]*|[ \s\u3000]*$/,"') Handlebars.compile (TPL) ({title:'Test'})</script>

Note:

1. If the template contains </xmp> tags will cause the label Terminator confusion problem, so in this way to store the template, you can not include the </xmp> end tag;

2. The XMP element must act as the descendant element of the body.

Because there are fewer <script> tags in the template text, and there is a greater chance that the table cells <textarea> labels are present, and the XMP tags are deprecated, it is common to keep template text in script tags.

Iii. New Vision of template tags

The template label, which was finalized in 2013, provides us with a more unified, more powerful way to store templates in text. And its basic usage is not much different from the previous 3 ways:

//template Text<template id="TPL">"Dummy.png"title="{{title}}"/></template>//Get Template<script type="Text/javascript">varTplel = document.getElementById ('TPL')//access via Tplel.innertext can also bevarTPL =TPLEL.INNERHTMLTPL= Tpl.replace (/^[\s\u3000]*|[ \s\u3000]*$/,"') Handlebars.compile (TPL) ({title:'Test'})</script>

Note:

1. If the template contains </template> tags will cause the label Terminator confusion problem, so in this way to store the template, you can not include the </template> end tag;

2. The script tag position is more casual and can be used as a child of head or body.

Here you will feel that the template label, in addition to as a standard, with the script tag is not much difference. That's because we haven't gone into it yet, so let's get to the bottom of it!

1. Not the same childnodes

Script, textarea, and XMP store template text with tplEl.childNodes.length return 1, tplel.childnodes[0].nodename all return #text. And the template returns 0.

2. Pseudo-Document fragment entry--content properties

With the innerHTML or InnerText property, template text inside the templates is treated as normal text. But the template element gives us another way to use it, which is "pseudo-document fragments."

"pseudo-document Fragment" [[Class]] is [object DocumentFragment], "pseudo-document fragment" has all the functional API of the document fragment, the other is that setting the SRC attribute of the IMG element does not emit a resource request . And we can get "pseudo-document fragments" through the content property.

varTplel = document.getElementById ('TPL')varx =tplel.contentvarimg = X.queryselector ('img') Console.log (IMG.SRC)//Show empty stringConsole.log (Img.getattribute ('src'))//Show Dummy.pngIMG.SRC = Img.getattribute ('src') Console.log (IMG.SRC)//Show About:blank

Resource requests are not initiated when added to the current document.

document.body.appendChild (IMG) // Initiate resource request Console.log (TplEl.innerHTML.replace (/^[\s\u3000]*|[ \s\u3000]*$/,'/ / display blank string

Because the AppendChild method actually cuts the elements, it is not possible to achieve the effect of template reuse. So we need to copy the elements inside the template and then add the copy of the element to the current document. There are many kinds of means of realization, you can know for yourself.

Iv. Summary

This article is to read Zhang Xin Xu "HTML5 <template> Label element Introduction" After the Notes + personal experience Summary, write here!

Respect the original, reprint please specify from: http://www.cnblogs.com/fsjohnhuang/p/4175711.html ^_^ fat son John

V. References

http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

HTML semantics: HTML5 new tag--template