寫過一點前端的都會碰到需要使用JS字符串拼接HTML元素然后append到頁面DOM樹上的情況,一般的寫法都是使用+號以字符串的形式拼接,如果是短點的還好,如果很長很長的話就會拼接到令人崩潰了。
比如有的時候需要使用彈出框的時候手動使用字符串拼接起來各種數據再渲染出來(這種寫法太惡心了,簡直沒有職業道德…)。
因為上面的這種寫法太惡心人了,但是在前端渲染數據又是一個剛需,這個時候怎么辦,想一個辦法將JS和HTML分離開來。
<script type=”text/x-template”>就是在一定程度上解決這種問題的,放在type=”text/x-template”中的內容將不會被瀏覽器解析,不被執行,不被顯示,它只是默默地舉根隱身草站在那里。
它默默在那里有什么用呢,從邏輯上而言,放到text/x-template中的內容不是給瀏覽器解析的,是用來在頁面加載完成后再獲取到它對其進行渲染。這個渲染的過程通常是使用各種模板引擎來完成的。
script標簽如果不寫type屬性,瀏覽器會默認為text/javascript,如果寫了不同的類型,瀏覽器就不會再按照解析JS的規則去解析了,發現是不識別的類型可能就會忽略它。
比如說有一個叫做foo-template-engineer的模板引擎,它約定了凡是type為text/foo-template的script標簽中存放的都是模板文件,瀏覽器在加載網頁的時候檢查到了<script type=”text/foo-template”>發現自己不能識別,於是就忽略掉它和其中的內容,等到瀏覽器渲染到模板引擎的JS代碼的時候,JS模板引擎獲取到這個標簽中的內容,然后使用數據對其進行渲染輸出到頁面上。
總結:
1. script不寫type默認是text/javascript,如果寫了不被識別的type將被瀏覽器忽略。
2. script的type為各種template的時候,可能就是使用了模板引擎。