script标签中type为scripttype=textx-template是个啥
写过⼀点前端的都会碰到需要使⽤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将被浏览器忽略。chrome浏览器是啥浏览器
2. script的type为各种template的时候,可能就是使⽤了模板引擎。
。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论