＜script＞标签中的type

每天进步一点.

已于 2024-02-23 09:43:44 修改

阅读量1.1k

点赞数 27

文章标签： javascript

于 2024-02-23 09:43:20 首次发布

本文链接：https://blog.csdn.net/weixin_45152848/article/details/136248110

版权

本文讨论了JavaScript的type属性的历史，从application/javascript到module和importmap的兴起，以及旧版本的弃用。重点介绍了模块导入和跨源资源共享(CORS)在现代Web开发中的应用。

摘要由CSDN通过智能技术生成

type=text/javascript type=application/javascript

前者是比较早的版本，已经废弃，但是浏览器大都还支持

后者是最新的规范，但是会有兼容性问题，不兼容ie6-10

在这里插入图片描述

type=application/json 比较特殊，不常用

简单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script id="_json_user" type="application/json">
    {
      "name": "张三",
      "age": 18
    }
  </script>
  <script type="text/javascript">
    const jsonScriptNode = document.getElementById('_json_user')
    const jsonStr = jsonScriptNode.innerText
    const userData = JSON.parse(jsonStr)
    console.log(userData)
  </script>
</body>
</html>

在这里插入图片描述

有一些网站上在使用，比如百度

type=module

简单示例1

注意：要用 127.0.0.1:8080 的方式打开，否则会报 cors 错误

# a.js
export const user = {
  name: '张三'
}

# index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module">
    import { user } from './a.js'
    console.log(user.name)
  </script>
</body>
</html>

简单示例2

# a.js
import { user } from './b.js'
console.log(user.name)

# b.js
export const user = {
  name: '张三'
}

# index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="module" src="./a.js"></script>
</body>
</html>

以下是一些历史遗留的 script 的允许的 type 值，全部都是非标准的，不再建议使用

** Deprecated 强烈反对 Non-standard 非标准的 **

application/javascript Deprecated
application/ecmascript Deprecated
application/x-ecmascript Non-standard
application/x-javascript Non-standard
text/ecmascript Deprecated
text/javascript1.0 Non-standard
text/javascript1.1 Non-standard
text/javascript1.2 Non-standard
text/javascript1.3 Non-standard
text/javascript1.4 Non-standard
text/javascript1.5 Non-standard
text/jscript Non-standard
text/livescript Non-standard
text/x-ecmascript Non-standard
text/x-javascript Non-standard

type=importmap

为了兼容开发者已经熟悉的从npm包里引入方法，目前阶段有且只有一个，且需要放在第一个 type=module前面

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/dayjs@1.10.7",
    "react": "https://cdn.skypack.dev/react@17.0.1",
    "react-dom": "https://cdn.skypack.dev/react-dom",
    "square": "./modules/square.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>
<script type="module">
  import dayjs from 'dayjs';

  console.log(dayjs('2019-01-25').format('YYYY-MM-DDTHH:mm:ssZ[Z]'));
</script>

每天进步一点.

关注

27
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
＜script＞标签中的type

为了兼容开发者已经熟悉的从npm包里引入方法，目前阶段有且只有一个，且需要放在第一个 type=module前面。以下是一些历史遗留的 script 的允许的 type 值，全部都是非标准的，不再建议使用。注意：要用 127.0.0.1:8080 的方式打开，否则会报 cors 错误。后者是最新的规范，但是会有兼容性问题，不兼容ie6-10。前者是比较早的版本，已经废弃，但是浏览器大都还支持。有一些网站上在使用，比如百度。
复制链接

扫一扫