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

写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况，一般的写法都是使用+号以字符串的形式拼接，如果是短点的还好，如果很长很长的话就会拼接到令人崩溃了。

比如有的时候需要使用弹出框的时候手动使用字符串拼接起来各种数据再渲染出来（这种写法太恶心了，简直没有职业道德…）。

因为上面的这种写法太恶心人了，但是在前端渲染数据又是一个刚需，这个时候怎么办，想一个办法将JS和HTML分离开来。

它默默在那里有什么用呢，从逻辑上而言，放到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的时候，可能就是使用了模板引擎。

。

转载于:https://www.cnblogs.com/cc11001100/p/7189410.html

script标签中type为script type=text/x-template是个啥相关推荐

script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
alert中文信息时乱码，html页面和script标签中均已设置为utf-8依然乱码
今天在原来的js文件中添加了一些新的逻辑判断,结果,alert的中文信息居然乱码,就是那种菱形的乱码,无语~ 网上的应对之策都是指定html文档和引入script标签时指定其编码,但公司是基于平台开发 ...
html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下: 需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行实现方式(#1): document.getElementById('exter ...
setup写在script标签中
快捷键 vb3s 父组件: <template><div><child ref="childRef" :title="title" ...
浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...

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

script标签中type为script type=text/x-template是个啥相关推荐

最新文章

热门文章