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/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?
- script标签中type为<script type="text/x-template">是个啥
- "Content-Type" content="text/html; charset=utf-8"中content="text/html是啥意思呢?
- <script type="text/html"></script> js模版使用
- <script type="text/template">
- script标签的type="test/html"时
- <script type="text/html"></script> js模版使用
- 【Web】<script type="text/template"></script>适合用于定义模板(模板容器),不解析(渲染/执行)
- <script type="text/html"></script> js模版使用
- HTML页面的<script type="text/javascript">含义。
- script标签的type="test/html"时
- iOS上传失败提示"Request failed: unacceptable content-type: text/html"
- <script language="JavaScript"> or <script type="text/javascript"> ?
- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>意义
- AFN —— unacceptable content-type: text/html"
- html中去掉文本框(input type="text")的边框或只显示下边框
- HTML中的input type="reset"标签失效(不起作用)的可能原因
- html 解决 input type="password" 标签自动记住账号密码
- [JavaScript] <script type="text/javascript"> </script> 和<script language="javascript"> </script>区别
- @header("Content-type: text/html; charset=utf-8");