script标签type值application/json，importmap和module

最新推荐文章于 2024-07-28 20:27:10 发布

ammi_bai

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量2.5k

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/pk142536/article/details/130680327

版权

type（默认text/javascript）

该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型（媒体类型）；

如果没有定义这个属性，脚本会被视作 JavaScript。如果 MIME 类型不是 JavaScript 类型，则该元素所包含的内容会被当作数据块而不会被浏览器执行。如果 type 属性为module，代码会被当作 JavaScript 模块。

1、application/json

浏览器则不会把script里面的内容当做js来执行，我们在script标签中可以直接写json格式数据

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

此时定义的json数据获取，我们可以通过js

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

2、module

type=module 用来支持 es6 的模块功能

<script type="module">
  import { func } from "./utils.js"; 
  document.body.innerHTML = func("abc");
</script>

// utils.js
export function func(text) {
  return text;
}

当脚本使用 import 指令时，浏览器会自动请求并加载相关的 JS 文件。

📢 script[type=”module”]会受到cors策略的限制

<!-- 这个脚本不会执行，因为跨域资源共享限制 -->
<script type="module" src="https://….now.sh/no-cors"></script>

在这里插入图片描述

当然啦，type=module存在部分低端浏览器不支持的情况，这就需要我们做兼容啦。常见的写法

<scrip type="module" src="app.js"></scrip>
<scrip nomodule src="other.js"></scrip>


使用 <script type="module"> 可以在让支持 esmodule 的浏览器运行，不支持 esmodule 的浏览器忽略。

使用 <script nomodule> 可以让支持 esmodule 的浏览器忽略，不支持 esmodule 的浏览器运行。

3、importmap

我们已经熟悉从npm导入包的方式，但是需要一个构建步骤编译代码使其能够在浏览器中运行。

这个问题由import maps解决了。从本质上讲，它允许将导入指定器映射到相对或绝对的URL上，有助于控制模块的解析，而不再需要应用构建步骤。

规范：

搭配type="module"一起用，这个script  标签必须放在 document 中的中第一个 <script type="module">标签之前（最好是在<head>中），以便在进行模块解析之前对它进行解析。此外，目前每个 document 只允许有一个 import map，未来可能会取消这一限制。

在 script 标签内，一个JSON对象被用来指定document中 script 所需的所有必要的模块映射。一个典型的 import map 的结构如下所示。


<script type="importmap">
{
  "imports": {
    "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 { cloneDeep } from 'lodash';
  const objects = [{ a: 1 }, { b: 2 }];
  const deep = cloneDeep(objects);
  console.log(deep[0] === objects[0]);
</script>

在 import map 中出现包并不意味着它一定会被浏览器加载。任何没有被页面上的 script 使用的模块都不会被浏览器加载，即使它存在于import map中。

使用同一模块的多个版本，

<script type="importmap">
      {
        "imports": {
          "lodash@3/": "https://unpkg.com/lodash-es@3.10.1/",
          "lodash@4/": "https://unpkg.com/lodash-es@4.17.21/"
        }
      }
</script>

通过使用作用域，也可以用同一个导入指定符来指代同一个包的不同版本。这允许我们在一个给定的作用域内改变导入指定符的含义。

<script type="importmap">
  {
    "imports": {
      "lodash/": "https://unpkg.com/lodash-es@4.17.21/"
    },
    "scopes": {
      "/static/js": {
        "lodash/": "https://unpkg.com/lodash-es@3.10.1/"
      }
    }
  }
</script>

有了这种映射，在/static/js路径下的任何模块，在导入语句中引用lodash/指定器时，将使用https://unpkg.com/lodash-es@3.10.1/，而其他模块将使用https://unpkg.com/lodash-es@4.17.21/。

检测 import map支持

if (HTMLScriptElement.supports && HTMLScriptElement.supports('importmap')) {
  // import maps is supported
}

对于不支持的浏览器，可以试试polyfill。我们所需要做的就是在 import map 脚本之前在HTML文件中包含es-module-shim脚本。

<script async src="https://unpkg.com/es-module-shims@1.3.0/dist/es-module-shims.js"></script>

参考：https://blog.csdn.net/qq449245884/article/details/126133582；MDN

ammi_bai

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
script标签type值application/json，importmap和module

script标签type值importmap和module的含义与用法
复制链接

扫一扫