关于script标签中的type的使用

对于script标签,对于一个前端开发工程师来说,不会陌生,反而熟悉,因为只要写纯静态html,想要写点脚本,那么就需要在页面顶部或者body底部插入script标签，我们比较熟悉的有src,和type属性,今天就来聊聊这个type属性

type

MDN:该属性定义script标签元素包含或src应用的脚本语言,属性的值为MIME类型（Multipurpose Internet Mail Extensions Type, 多用途互联网邮件扩展类型）也叫媒体类型

支持的MIME类型包括text/javascript ，text/ecmascript, application/javascript, 和application/ecmascript,application/json,module

大部分媒体类型是服务端通过http协议告知客户端(浏览器)的,准确的来说,是服务端通过Content-type这个响应头来告诉浏览器接收到的响应体的媒体类型到底是什么，这个媒体类型决定了服务端返回的内容(响应体)究竟该如何被我们的浏览器解析处理,比如：Content-type: text/html,此时浏览器将会将响应的内容当做一个html文件来解析处理

在script标签中如果没有定义这个type属性,脚本会被视为javascript,会被浏览器解析

type=”text/javascript”

平时写script标签的时候,一些编辑器如果安装emmet插件,就会自动的提升将这个type="text/javascript"属性带上

<script type="text/javascript"></script>

这个是可以省略的,加上的话是html4and xHTML,而忽略的话表示是HTML5的写法,也就是说,在最新的语法规则里,把这个type="text/javascript"自动给加上了的

当你在script标签上定义了type="text/javascript"，此时浏览器会将里面的内容当做javascript来执行,所以我们写在里面的代码,要符合js语法的规范,否则就会报错

<script type="text/javascript">
 // 这里面书写形式得符合Js语法的一个规范，否则的话就会报错
 console.log(name);   // 会报错,因为没有定义name这个变量，就直接读取这个变量的,这个变量不存在
 // 正确的写法
 var name = "itclan.cn"
 console.log(name); 
</script>

在你阅读有些网站源码的时候,在script标签上除了type="text/javascript",还会看到一个就是application/json

比如：Nextjs官网,打开console,Elelement或netWork,直接搜索即可

application/json

看到这个type值,我们会想到服务端请求头会给我们返回一个响应头

Content-Type: application/json;

当type="text/javascript"，是让浏览器把标签里面的内容当做js来执行，那这里的application/json呢

<script type="application/json">
    const nameStr = "itclan.cn";
    console.log(nameStr);
  </script>

这个时候刷新页面,打开控制台,itclan.cn,不会被输出,控制台一片空白，没有报错,也没有输出任何内容

如果写成type="text/javacript",script里面的内容就会被浏览器当做js来执行,因此一开始的js执行了就会输出itclan.cn

而script的type属性为application/json时浏览器则不会把script里面的内容当做js来执行,那如果把标签里面内容修改为json格式呢

<script type="application/json">
    {
      "data": [
        {
          "a": 1,
          "b": 2
        },
        {
          "c": 3,
          "d": 4
        }
      ],
      "total": 100
    }
  </script>

我们会发现我们的控制台没有任何变化,也不会报错,但是我们想要获取里面的内容，我们给这个scirot标签添加上个id

 <script id="json-script" type="application/json">
    {
      "data": [
        {
          "a": 1,
          "b": 2
        },
        {
          "c": 3,
          "d": 4
        }
      ],
      "total": 100
    }
  </script>

然后再通过一段js去获取这个标签里面的内容再转成json:

<script>
        const node = document.getElementById("json-script");
        const jsonStr = JSON.parse(node.innerText);
        console.log(jsonStr);
 </script>

那如果书写的时候不符合json的语法, 或者说故意破坏json的语法呢? 比如先破坏json的语法, 然后不获取也不解析:

如果写的不是json格式,那么在解析json的时候,就会报错，必须得遵循json语法

也就是说,浏览器不会把里面的内容当做js去解析，它会把里面的内容当做数据块,而不会被当做是js执行

application/json应用场景

大家平时写一些临时活动页面，在页面上展示固定数据的时候,有的产品经理对前端提出了这么一个需求就是

页面中的数据和图片,以及信息,希望是能够通过配置而成,然后通过Ajax请求

方法1-在文件外部创建一个js文件,加载数据,然后写到html页面上

方法2-把数据对象写成一json,然后请求该json文件,动态的插入到页面结构中

方法3-script上定义type=”application/json”,把配置对象选项写在里面

<script id="_json_data" type="application/json">
    {
      "data": [
        {
          "name": "川川",
          "desc": "itclan.cn"
        },
        {
          "name": "iT资源网",
          "desc": "https://itclan.cn"
        }
      ],
      "total": 100
    }
  </script>

然后我们再通过js去获取, 关键代码如下

const jsonScriptNode = document.getElementById('_json_data');
  const jsonStr = jsonScriptNode.innerText;
  const json = JSON.parse(jsonStr);

这样可以避免使用js加载数据时多余的网络请求, 同时语义也更加的明确,定义在一个文件里,可以减少文件的请求