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方法可以用来删除数组中的元素，或者向数组…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
dify打造数据可视化图表
一、概述 在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
Python 高效图像帧提取与视频编码：实战指南
Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中，如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议（2PC）通过准备阶段与提交阶段的协调机制，以同步决策模式确保事务原子性。其改进版本三阶段提交协议（3PC…...
字符串哈希+KMP
P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...
echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式
pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图，如果边框加在dom上面，pdf-lib导出svg的时候并不会导出边框，所以只能在echarts图上面加边框 grid的边框是在图里…...
20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题
20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起，为了跨网段推流，千辛万苦配置好了网络参数。 但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...