script标签中type为<script type="text/x-template">是个啥

 

转自：https://www.cnblogs.com/cc11001100/p/7189410.html

写过一点前端的都会碰到需要使用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的时候，可能就是使用了模板引擎。