HTMLの意味化:HTML 5の新しいタグ-template
12032 ワード
一、前言
String-baseのテンプレートエンジン(Handlebars.jsなど)を使用する場合は、外部ファイルでテンプレートテキストを保存するか、必要に応じてXHRまたはscriptラベルでロードします.または
カタログの塊:
二、テンプレートのテキストを保存する方法
1.scriptラベル
2.textareaラベル
3.xmpタグ
三、templateラベルの新しい視覚
1.違うchildNodes
2.擬似ドキュメントフラグメントエントリ-contentプロパティ
二、テンプレートのテキストを保存する方法
まず、テンプレートドキュメントには次の2つの要件があることを明らかにします.
1. <>"'は文字エンティティに変換されません.
2. srcプロパティを含むimgラベルは、リソースリクエストをトリガーしません.
次に、一般的な保存方法を示します.
1. scriptラベル
注意:
1. テンプレートにラベルが含まれているとラベル終了子が混乱する問題があるため、このようにテンプレートを格納する場合、終了ラベルを含めることはできません.
2. scriptラベルの位置は自由で、headやbodyのサブ要素として使用できます.
2. textareaラベル
注意:
1.テンプレートに</textarea>ラベルが含まれているとラベル終端が混乱する問題があるため、このようにテンプレートを格納する場合、</textarea>終端ラベルを含めることはできません.
2. textarea要素はbodyの子孫要素として使用する必要があります.
3. xmpタグ(例としてコンテンツを識別することを意味し、現在は標準で廃止されているが、各ブラウザは依然としてこのタグをサポートしている)
注意:
1.テンプレートにラベルが含まれているとラベル終了子が混乱する問題があるため、このようにテンプレートを格納する場合、終了ラベルを含めることはできません.
2. xmp要素はbodyの子孫要素として使用する必要があります.
テンプレートテキストにタグが表示されることは少なく、フォーム要素<textarea>タグが表示される確率が高く、xmpタグは廃棄されているため、scriptタグによってテンプレートテキストを格納する方法が一般的である.
三、templateラベルの新しい視覚
2013年に原稿を確定したtemplateラベルは、より統一的で機能的なテンプレートテキストの保存方法を提供します.基本的な使用方法は、従来の3つの方法と大きく異なりません.
注意:
1. テンプレートにラベルが含まれているとラベル終端が混乱する問題があるため、この方法でテンプレートを格納する場合、終端ラベルを含めることはできません.
2. scriptラベルの位置は自由で、headやbodyのサブ要素として使用できます.
ここまで来るとtemplateタグはW 3 C基準以外はscriptタグと大差ないと思います.それは私たちがまだ深く入り込んでいないからです.次はそれを一つ一つ理解しましょう.
1. 違うchildNodes
script、textarea、xmp方式でテンプレートテキストを格納場合、tplEl.childNodes.lengthはいずれも1を返し、tplEl.childNodes[0].nodeNameはすべて#textを返します.templateは0を返します.
2. 擬似ドキュメントフラグメントエントリ-contentプロパティ
innerHTMLまたはinnerTextプロパティを使用すると、template内部のテンプレートテキストは通常のテキストとして使用されます.しかしtemplate要素は、「擬似ドキュメントクリップ」という別の使い方を提供しています.
「疑似ドキュメントフラグメント」の[[Class]]は[object DocumentFragment]であり、「疑似ドキュメントフラグメント」はドキュメントフラグメントのすべての機能APIを有し、img要素のsrc属性を設定してもリソース要求は発行されない.contentプロパティを使用して、「擬似ドキュメントクリップ」を取得できます.
リソースリクエストは、現在のドキュメントに追加されるまで開始されません.
appendChildメソッドでは実際に要素を切り取るため、テンプレート多重化の効果は得られません.したがって、テンプレート内の要素をコピーし、現在のドキュメントに要素のコピーを追加する必要があります.実現手段はいろいろあるので、自分で理解してみてください.
四、まとめ
本編は张鑫旭《HTML5 <template>标签元素简介》を拝見した後のメモ+個人的な経験をまとめたもので、ここまでにしましょう!
オリジナルを尊重し、転載はhttp://www.cnblogs.com/fsjohnhuang/p/4175711.htmlから明記してください^^;肥えたジョン
五、参考
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
String-baseのテンプレートエンジン(Handlebars.jsなど)を使用する場合は、外部ファイルでテンプレートテキストを保存するか、必要に応じてXHRまたはscriptラベルでロードします.または
カタログの塊:
二、テンプレートのテキストを保存する方法
1.scriptラベル
2.textareaラベル
3.xmpタグ
三、templateラベルの新しい視覚
1.違うchildNodes
2.擬似ドキュメントフラグメントエントリ-contentプロパティ
二、テンプレートのテキストを保存する方法
まず、テンプレートドキュメントには次の2つの要件があることを明らかにします.
1. <>"'は文字エンティティに変換されません.
2. srcプロパティを含むimgラベルは、リソースリクエストをトリガーしません.
次に、一般的な保存方法を示します.
1. scriptラベル
//
<script id="tpl" type="text/x-template">
<img src="dummy.png" title="{{title}}"/>
</script>
//
<script type="text/javascript">
// innerText ， innerText <img/>
var tpl = document.getElementById('tpl').innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>注意:
1. テンプレートにラベルが含まれているとラベル終了子が混乱する問題があるため、このようにテンプレートを格納する場合、終了ラベルを含めることはできません.
2. scriptラベルの位置は自由で、headやbodyのサブ要素として使用できます.
2. textareaラベル
//
<textarea id="tpl" style="display:none;">
<img src="dummy.png" title="{{title}}"/>
</textarea>
//
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
var tpl = tplEl.value
// tplEl.innerText 。 tplEl.innerHTML ， <>"'
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>注意:
1.テンプレートに</textarea>ラベルが含まれているとラベル終端が混乱する問題があるため、このようにテンプレートを格納する場合、</textarea>終端ラベルを含めることはできません.
2. textarea要素はbodyの子孫要素として使用する必要があります.
3. xmpタグ(例としてコンテンツを識別することを意味し、現在は標準で廃止されているが、各ブラウザは依然としてこのタグをサポートしている)
//
<xmp id="tpl" style="display:none;">
<img src="dummy.png" title="{{title}}"/>
</xmp>
//
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
var tpl = tplEl.innerHTML
// tplEl.innerText
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>注意:
1.テンプレートにラベルが含まれているとラベル終了子が混乱する問題があるため、このようにテンプレートを格納する場合、終了ラベルを含めることはできません.
2. xmp要素はbodyの子孫要素として使用する必要があります.
テンプレートテキストに
三、templateラベルの新しい視覚
2013年に原稿を確定したtemplateラベルは、より統一的で機能的なテンプレートテキストの保存方法を提供します.基本的な使用方法は、従来の3つの方法と大きく異なりません.
// 模板文本
<template id="tpl">
<img src="dummy.png" title="{{title}}"/>
</template>
// 获取模板
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
// 通过tplEl.innerText获取也可以
var tpl = tplEl.innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>注意:
1. テンプレートにラベルが含まれているとラベル終端が混乱する問題があるため、この方法でテンプレートを格納する場合、終端ラベルを含めることはできません.
2. scriptラベルの位置は自由で、headやbodyのサブ要素として使用できます.
ここまで来るとtemplateタグはW 3 C基準以外はscriptタグと大差ないと思います.それは私たちがまだ深く入り込んでいないからです.次はそれを一つ一つ理解しましょう.
1. 違うchildNodes
script、textarea、xmp方式でテンプレートテキストを格納場合、tplEl.childNodes.lengthはいずれも1を返し、tplEl.childNodes[0].nodeNameはすべて#textを返します.templateは0を返します.
2. 擬似ドキュメントフラグメントエントリ-contentプロパティ
innerHTMLまたはinnerTextプロパティを使用すると、template内部のテンプレートテキストは通常のテキストとして使用されます.しかしtemplate要素は、「擬似ドキュメントクリップ」という別の使い方を提供しています.
「疑似ドキュメントフラグメント」の[[Class]]は[object DocumentFragment]であり、「疑似ドキュメントフラグメント」はドキュメントフラグメントのすべての機能APIを有し、img要素のsrc属性を設定してもリソース要求は発行されない.contentプロパティを使用して、「擬似ドキュメントクリップ」を取得できます.
var tplEl = document.getElementById('tpl')
var x = tplEl.content
var img = x.querySelector('img')
console.log(img.src) // 显示空字符串
console.log(img.getAttribute('src')) // 显示dummy.png
img.src = img.getAttribute('src')
console.log(img.src) // 显示about:blankリソースリクエストは、現在のドキュメントに追加されるまで開始されません.
document.body.appendChild(img)
// 发起资源请求
console.log(tplEl.innerHTML.replace(/^[\s\u3000]*|[\s\u3000]*$/,'')) // 显示空白字符串appendChildメソッドでは実際に要素を切り取るため、テンプレート多重化の効果は得られません.したがって、テンプレート内の要素をコピーし、現在のドキュメントに要素のコピーを追加する必要があります.実現手段はいろいろあるので、自分で理解してみてください.
四、まとめ
本編は张鑫旭《HTML5 <template>标签元素简介》を拝見した後のメモ+個人的な経験をまとめたもので、ここまでにしましょう!
オリジナルを尊重し、転載はhttp://www.cnblogs.com/fsjohnhuang/p/4175711.htmlから明記してください^^;肥えたジョン
五、参考
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template