script标签中type为<script type="text/x-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将被浏览器忽略。

2. script的type为各种template的时候,可能就是使用了模板引擎。

时间: 2024-12-24 22:37:14

script标签中type为<script type="text/x-template">是个啥的相关文章

script标签中的async和defer

在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变. async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的

script标签中defer和async属性的区别

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script src="example.js"></script> 没有defer或async属性,浏览器会立即加载并执行相应的脚本.也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载: 2.<script async src="example.js"></

JS添加验证页面中script标签中是否存在jquery文件

1 window.onload = function() 2 { 3 var al = document.getElementsByTagName("script"); 4 var new_element=document.createElement("script"); 5 var joine = [] 6 for(var i = 0; i<al.length; i++) 7 { 8 joine.push(al[i].getAttribute("s

小程序之取标签中内容 例如view,text

// index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="https://www.cnblogs.com/liancat/" <text class='gotime linkUrl' bindtap='linkUrl1' data-url="{{linkUrl1}}">{{linkUrl1}}</text> // i

script标签属性用type还是language?

被人问起一个问题: <script language = "JavaScript"> <script type="text/javascript"> <script> 这三个标签的使用有什么区别?金光大道娱乐城 虽然一直在用,却也没有好好去弄清楚,这里详细说明一下. 查阅一些资料,主要是浏览器支持问题.type 和 language 属性都可用来指定 <script> 标签中的脚本的类型.language 属性在 HT

如何将 JavaScript 代码添加到网页中,以及 &lt;script&gt; 标签的属性

Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了.我们将在本教程的下一部分中专注于浏览器中的 JavaScript. 首先,让我们看看如何将脚本添加到网页上.对于服务器端环境(如 Node.js),你只需要使用诸如

页面动态加入&lt;script&gt;标签并执行代码

在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码的时候,<script>标签中的代码并不能执行,如果有src属性,指向的外联文件也不会被加载,这并不是浏览器的bug,因为w3c文档就是这么规定的. 那我们有什么办法可以恢复追加的<script>标签的代码执行能力呢? 重新构造<script>标签      这个思路其实非

&lt;script&gt;标签的加载解析执行

转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接写入或者引用外部文件都一样)是以顺序加载执行的,每个<script>标记内容可以当成一个独立的块,同步的情况下一个块加载解析然后执行完后才加载下一块.当然这时也会阻塞其他页面元素的加载.所以网上说的变量调用: <script type

窥探 Script 标签(步入现代 Web 开发的魔法世界)

窥探 Script 标签 0x01 什么是 script 标签? script 标签允许你包含一些动态脚本或数据块到文档中,script 标签是非闭合的,你也可以将动态脚本或数据块当做 script 的文本节点.就是内联脚本. 一般我们最常用的就是写一些 JavaScript 脚本在 script 标签里,但是 script 也可以用来存储一些数据,比如当你设置 type="text/react" 的 script 时就可以在里面放 react 代码,但是游览器是不会执行它无法识别的