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的浏览器中才能进行