script标签中type为"text/x-template"或"text/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的时候,可能就是使用了模板引擎。
script标签中type为"text/x-template"或"text/html"的更多相关文章
- script标签中type为<script type="text/x-template">是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
- javaScript中的小细节-script标签中的预解析
首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...
- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?
<!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...
- script标签中的async、defer属性
Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...
- script标签的type="test/html"时
们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法: 1 <script id="commentTemplate& ...
- Input标签中Type的类型及详细用法
Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是text,这是我们见的最多 ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- 浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...
随机推荐
- BZOJ4196[Noi2015]软件包管理器——树链剖分+线段树
题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...
- Spring IOC和Spring AOP的实现原理(源码主线流程)
写在前面 正本文参考了<spring技术内幕>和spring 4.0.5源码.本文只描述原理流程的主线部分,其他比如验证,缓存什么可以具体参考源码理解. Spring IOC 一.容器初始 ...
- ecplise debug 无法命中断点 一直在加载中
发生原因:可能是特殊关闭了Ecplise 导致 1.这个是没问题的,网上大部分都说这个问题 2.删除所有断点再来(试了无效) 3.删除 X:\workspace\.metadata\.plugins ...
- MT【89】三棱锥的体积公式
评:已知对棱的距离以及此对棱边长,夹角就可以求出该三棱锥的体积.这把三棱锥的放到平行六面体里的做法是非常常见的.
- Stack Overflow:研究发现访问PHP和 Android的流量更可能来自低收入国家
Stack Overflow 的数据科学家 David Robinson 发现,软件行业的分工让不同发达地区的程序员依赖于不同的编程语言.软件已经是一个全球性的行业,也有高端低端之分,最高端的是数据 ...
- android 混淆 与 反编译
1, 文件 project.properties 修改: target=android-14proguard.config=${sdk.dir}/tools/proguard/proguard-and ...
- Raspbian开启root账户
启用root账户 使用默认用户pi,密码raspberry登录树莓派 sudo passwd root #给root账户设置密码 sudo passws --unlock root #解除root账户 ...
- Luogu 1084 NOIP2012 疫情控制 (二分,贪心,倍增)
Luogu 1084 NOIP2012 疫情控制 (二分,贪心,倍增) Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树, 1 号城市是首都, 也是 ...
- spring-mvc springboot 使用MockMvc对controller进行测试
网上基本都是参考官方的使用方式,使用了import static,个人感觉这种方式特别不好,代码提示性不友好.所以在此进行说明,也方便自己以后使用. 1. 引入spring-test相关jar包,sp ...
- ref实现输入框聚焦
关于ref我们是怎么理解的呢? 我们可以通过React.createRef()创建一个 ref节点,并将其打印出来. 代码如下: import React,{Component} from 'reac ...