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

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值