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
相关文章：
script标签type值application/json，importmap和module
type（默认text/javascript） 该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型（媒体类型）； 如果没有定义这个属性，脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型&a…...
基于ArcGIS实现陕西省1:250000比例尺地形图分幅和编号
1地形图的分幅与编号原理 我国1:1000000地形图的分幅采用国际1:1000000地图分幅标准，而其他比例尺地形图分幅以1:1000000比例尺地形图为基准进行分幅。每幅1:1000000地形图范围是经差6、纬差4；纬度60~ 76之间经差12、纬差4；纬度76~ 88之间经…...
校园安全，一键报警主机助力保障
校园安全，一键报警主机助力保障 随着社会发展和科技进步，校园安全问题日益受到重视。如何保障师生们的安全成为了学校一项重要任务。而校园可视一键报警主机就是一种非常有效的安保设备。 这种报警主机集合了视频监控、安全防范、数据处理等多个功能&a…...
RabbitMQ养成记 （7. 消息可靠性投递）
消息可靠性 什么是消息的可靠性呢？？ 简单来说就是 你的消息发放给 exchange 这个过程中 有可能丢失或者失败 这时候需要一个回调机制来监控 发送结果 必要时还要返回信息。 rabbitmq 给我们提供了两种： 首先是生产者到exchange发送过程的监…...
SpringBoot配置连接两个或多个数据库
在Spring Boot应用中连接多个数据库或数据源可以使用多种方式，下面介绍两种常用的方法： 1、使用Spring Boot官方支持的多数据源配置 Spring Boot提供了官方支持的多数据源配置，可以简单地配置和管理多个数据源。 需要在application.proper…...
Python面试题汇总：高效备战技巧
Python面试题汇总：高效备战技巧 一、基础知识准备1 语言特点及优缺点2 数据类型3 运算符4 控制流程语句5 函数 二、面向对象编程1 面向对象编程基础2 类的创建及继承3 魔术方法4 多态5 设计模式 三、常用数据结构与算法1 字符串、列表、字典、集合字符串列表字典集合…...
如何区分比特率、波特率和频谱带宽？
01、什么是比特率和波特率？ 宽带网络里面提及的千兆即1000Mbit/s，一般描述的是我们家网络端口每秒最大可接收0、1比特（bit）的数量，即每秒可接收1000x106个比特。显而易见，比特率越高，每秒传送的…...
sklearn中的特征工程（过滤法、嵌入法和包装法）
目录 编辑特征工程的第一步：理解业务 Filter过滤法 编辑方差过滤 编辑- 相关性过滤 - 卡方过滤 - F检验 - 互信息法 编辑嵌入法（Embedded） 包装法（Wrapper） 特征工程的第一步：理解业务 如…...
Linux C/C++并发编程实战（0）谈谈并发与并行
作为并发编程的第一讲，比较轻松，我们先来谈谈什么是并发和并行。 并发（Concurrency）是指一个处理器同时处理多个任务。 并行（Parallelism）是指多个处理器或者是多核的处理器同时处理多个不同的任务。 并发…...
2023年5月天津/南京/成都/深圳CDGA/CDGP数据治理认证报名
6月18日DAMA-CDGA/CDGP数据治理认证考试开放报名中！ 考试开放地区：北京、上海、广州、深圳、长沙、呼和浩特、杭州、南京、济南、成都、西安。其他地区凑人数中… DAMA-CDGA/CDGP数据治理认证班进行中，报名从速！ DAMA认证为数据管…...
【MySQL】MySQL批量插入测试数据的几种方式
文章目录 前言一、表二、使用函数生成设置允许创建函数产生随机字符串产生随机数字 三、创建存储过程插入角色表插入用户表 四、执行存储过程小结五、使用 Navicat自带的数据生成 前言 在开发过程中我们不管是用来测试性能还是在生产环境中页面展示好看一点, 又或者学习验证某…...
PowerShell install 一键部署virtualbox
VirtualBox 前言 VirtualBox 是一款开源虚拟机软件。VirtualBox 是由德国 Innotek 公司开发，由Sun Microsystems公司出品的软件，使用Qt编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。Innotek 以 GNU General Public Licens…...
CTF权威指南 笔记 -第四章Linux安全机制-4.1-Stack Canaries
目录 Stack Canaries 简介 我们进行简单的例子 64 32 checksec Stack Canaries 是对抗栈溢出攻击的技术 SSP安全机制 Canary 的值 栈上的一个随机数 在程序启动时 随机生成并且保存在比返回地址更低值 栈溢出是从低地址向高地址进行溢出 如果攻击者要攻击 就一定要覆…...
KDZD400Q便携式三氯乙烯浓度检测仪
一、产品概述 检测仪用于快速检测多种气体浓度、温湿度测量并超标报警的场合。采用2.31寸高清彩屏实时显示，选用进口品牌的气体传感器，主要检测原理有：电化学、红外、催化燃烧、热导、PID 光离子等。 可以检测管道中或受限空间、大气环境中的…...
C++11 部分新特性
1. 关键字和语法 1.1 nullptr 空指针，能够和整数0进行区别，因为#define NULL 0 1.2 类中非静态成员变量定义时初始化 & 初始化列表 1.3 auto 可推导出右值类型，从而得知左边变量类型。 简单使用示例： auto func() {retur…...
selenium通过performance log获取状态码，Conten-Type，以及重定向路径
selenium的官方不提供获取状态码，Conten-Type，以及重定向路径的方法，并且官方说这些功能将来也不会有。java - How to get HTTP Response Code using Selenium WebDriver - Stack Overflow 非官方的方法大概有下面几种 1.通过requests重新请…...
GL绘制自定义线条3_自定义线帽
安卓Path搭配Paint可以设置线帽，我想能不能把我自己的线条绘制Demo也加上类似的功能。 线头规则描述： 1、设一个线宽一半的线段，坐标为(0, 0)到(-lineWidth / 2, 0)。 2、设步骤1的线段有一垂直于它的向量(0，1)，然后传…...
【AGC】新版鸿蒙崩溃SDK集成使用方法
【背景】 我们知道AGC的Crash SDK都是需要强制集成华为分析SDK的，在使用时的崩溃数据上报都要依靠分析服务来完成，这就容易受到限制，有时出现无数据的情况就要依次排查崩溃SDK与分析SDK，比较麻烦。而就在不久前，鸿蒙崩…...
vue-7：组件库（移动端vant）（PC端element）
移动端vant 插件安装（按需导入） 重启生效 # 通过 npm 安装 npm i unplugin-vue-components -D# 通过 yarn 安装 yarn add unplugin-vue-components -D 导入基于 vite 的项目： 如果是基于 vite 的项目，在 vite.config.js 文件中…...
、slice()、split()三种方法的区别，及使用详细)
JavaScript中splice()、slice()、split()三种方法的区别，及使用详细
简介：splice、slice、split是JavaScript中，比较常用的三个数组方法，表面看起来有点相像，用处却大不相同，今天就来分别介绍下它们的用法。 1、splice()方法 splice方法可以用来删除数组中的元素，或者向数组…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...