script标签type属性

script标签中的type的使用

type

MDN：该属性定义script标签元素包含或src应用的脚本语言，属性的值为MINE类型，也叫媒体类型。支持的为text/javascript,application/javascript,text/ecmascript,application/ecmascript,application/json,module
大部分媒体类型是服务器端通过http协议告知客户端(浏览器)的，服务端通过content-type这个响应头来告诉浏览器收到的响应体的媒体类型。

type=‘text/javascript’

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

type=“application/json”

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

浏览器会将标签中的内容当作json格式

type="application/json"应用场景

页面中的数据和图片，以及信息，希望能够通过配置完成，然后通过ajax请求

<script id="_json_data" type="application/json">
    {
      "data": [
        {
          "a": 1,
          "b": 2
        },
        {
          "c": 3,
          "d": 4
        }
      ],
      "total": 100
    }
</script>
const jsonScriptNode = document.getElementById("_json_data")
const jsonStr = jsonScriptNode.innerText;
const json = JSON.parse(jsonStr);

type=“module”

script type="module"会受到cors策略的限制，直接在浏览器中打开文件使用的是file协议。需要使用起一个服务才可以使用，可以利用live-server插件，也可以写个node后端。

• type="module"的script标签内部默认的标签是严格模式
• type="module"的script标签内的变量，是script标签的私有变量
• type="module"的script标签通过src属性引入的js代码需要服务端支持cors跨域
• type="module"的script标签只有在支持es6的浏览器中才能进行