template-parser

模版のいくつかの表現方式

テンプレート要素、HTML 5の新しいもの、template:

templateラベルをサポートするブラウザでは何も表示されません.このラベルをサポートしない場合は、This is a templateと表示されます.

templateタグが誕生する前にscriptタグを利用してテンプレート機能を実現するのが一般的である:

    <p>This is the second type template</p>

これはscriptタグの内容が生まれつき表示されない特性を利用して目的を達成したものであり,またtext/templateというtypeは存在せず,その役割を際立たせるために別途標準以外の設定を行う.

テンプレート、テンプレート、名を見て、ホームページの中のテンプレートは、表示する必要はありません.表示する必要があるページの部分を規範化すればいいです.主に表示を必要とせず、必要な内容を取り出すことができることがわかります:

    
This is the third type template

innerHTML、outerHTML
その違いを簡単に説明すると、
innerHTML:htmlラベルを含まないオブジェクトの開始位置から終了位置までのすべての内容.outerHTML:innerHTMLのすべての内容に加えてhtmlラベル自体も含まれます.

This is a div

// 'This is a div'
console.log(div.innerHTML);
// '
This is a div
'
console.log(div.outerHTML);

テンプレート要素の取り出し

// template tag
template.content
// script
template.innerHTML
// hidden tag
template.outerHTML

template-parser
もちろん、解析テンプレートにはfragmentの助けが欠かせません.

var toFragment = require('./fragment');

/**
 *           
 *              ：
 * id    : '#some-template-id'
 *      : '
my template
'
 * DocumentFragment   
 *     
 */
module.exports = function(template) {
  var templateNode;
  
  //     DocumentFragment   ，    
  if(template instanceof window.DocumentFragment) {
    return template;
  }

  if(typeof template === 'string') {
    // '#'          id      
    if(template.charAt(0) === '#') {
      templateNode = document.getElementById(template.slice(1));
      if(!templateNode) return;
    //    '#'    ，       ，    
    } else {
      return toFragment(template);
    }
  //     ，      
  } else if(template.nodeType) {
    templateNode = template;
  } else {
    return;
  }
  
  //       template   ，  content          
  if(templateNode.tagName === 'TEMPLATE' && templateNode.content) {
    return templateNode.content;
  }
  // script                
  if(templateNode.tagName === 'SCRIPT') {
    return toFragment(templateNode.innerHTML);
  }
  //     ，                 
  return toFragment(templateNode.outerHTML);
}