web組件的模板是怎么用的

作者：佚名   時(shí)間：2014-07-16   分享到：

理解web組件的最簡單方式大概就是了解模板,開發(fā)可重復(fù)使用的代碼塊,或稱為模板,在相當(dāng)長一段時(shí)間內(nèi)都是網(wǎng)絡(luò)開發(fā)的主題,盡管html中從未出現(xiàn)過這方面的本地實(shí)現(xiàn);若要使用模板,則需要使用服務(wù)器端語言或javascript.
  將web組件模板視為dom的一種惰性區(qū)塊,這之所以十分重要,是因?yàn)闉g覽器對內(nèi)容進(jìn)行解析,而非實(shí)施,這意味著圖像及其他外部元素不會被加載,被包含的腳本也不會運(yùn)行,相比于使用css隱藏元素但資產(chǎn)仍然被加載的情況,這種方法才是性能方面的真正提升.
  聲明模板需要使用tempate元素以及所有組成這個(gè)模板內(nèi)容的子元素.下面的代碼塊使用id #foo顯示了一個(gè)模板元素,這個(gè)元素具有兩個(gè)子元素(h2和p).模板外是帶有id #的div元素,這個(gè)元素含有一個(gè)h1子元素.
  <template id="foo">
   <h2>gorilla beringei</h2>
   <p>a species of the genus gorilla...</p>
  </template>
  <div id ="har">
    <h1>eastern gorilla</h1>
  </div>
  如果讀者使用自己的瀏覽器開發(fā)工具來查看這個(gè)網(wǎng)頁,則不會在template元素內(nèi)部觀察到任何內(nèi)容,這是因?yàn)檫@個(gè)元素的內(nèi)容在dom中不可見.
  可以通過使用content對象的腳本來訪問模板,這個(gè)對象將模板的子元素作為html片段返回,例如,下面的代碼片段將模板賦給變量tpl并將其content對象存錄到控制器中.
  var tpl = document.getelementbyid('foo');
  console.log(tpl.content)
  一旦獲得了這個(gè)片段,就可以適當(dāng)操縱它了.