当前位置： 首页 > news >正文

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

news 2025/12/15 1:58:21

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&#xff08;默认text/javascript&#xff09; 该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型&#xff08;媒体类型&#xff09;&#xff1b; 如果没有定义这个属性&#xff0c;脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型&a…...

编程日记 2023/5/19 3:11:41

基于ArcGIS实现陕西省1:250000比例尺地形图分幅和编号

1地形图的分幅与编号原理 我国1:1000000地形图的分幅采用国际1:1000000地图分幅标准&#xff0c;而其他比例尺地形图分幅以1:1000000比例尺地形图为基准进行分幅。每幅1:1000000地形图范围是经差6、纬差4&#xff1b;纬度60~ 76之间经差12、纬差4&#xff1b;纬度76~ 88之间经…...

编程日记 2023/5/30 21:01:01

校园安全，一键报警主机助力保障

校园安全&#xff0c;一键报警主机助力保障 随着社会发展和科技进步&#xff0c;校园安全问题日益受到重视。如何保障师生们的安全成为了学校一项重要任务。而校园可视一键报警主机就是一种非常有效的安保设备。 这种报警主机集合了视频监控、安全防范、数据处理等多个功能&a…...

编程日记 2023/5/19 3:01:38

RabbitMQ养成记 （7. 消息可靠性投递）

消息可靠性 什么是消息的可靠性呢&#xff1f;&#xff1f; 简单来说就是 你的消息发放给 exchange 这个过程中 有可能丢失或者失败 这时候需要一个回调机制来监控 发送结果 必要时还要返回信息。 rabbitmq 给我们提供了两种&#xff1a; 首先是生产者到exchange发送过程的监…...

编程日记 2023/5/29 16:17:11

SpringBoot配置连接两个或多个数据库

在Spring Boot应用中连接多个数据库或数据源可以使用多种方式&#xff0c;下面介绍两种常用的方法&#xff1a; 1、使用Spring Boot官方支持的多数据源配置 Spring Boot提供了官方支持的多数据源配置&#xff0c;可以简单地配置和管理多个数据源。 需要在application.proper…...

编程日记 2023/5/29 16:19:05

Python面试题汇总：高效备战技巧

Python面试题汇总&#xff1a;高效备战技巧 一、基础知识准备1 语言特点及优缺点2 数据类型3 运算符4 控制流程语句5 函数 二、面向对象编程1 面向对象编程基础2 类的创建及继承3 魔术方法4 多态5 设计模式 三、常用数据结构与算法1 字符串、列表、字典、集合字符串列表字典集合…...

编程日记 2023/5/31 7:05:22

如何区分比特率、波特率和频谱带宽？

01、什么是比特率和波特率&#xff1f; 宽带网络里面提及的千兆即1000Mbit/s&#xff0c;一般描述的是我们家网络端口每秒最大可接收0、1比特&#xff08;bit&#xff09;的数量&#xff0c;即每秒可接收1000x106个比特。显而易见&#xff0c;比特率越高&#xff0c;每秒传送的…...

编程日记 2023/5/31 14:52:45

sklearn中的特征工程（过滤法、嵌入法和包装法）

目录 ​编辑特征工程的第一步&#xff1a;理解业务 Filter过滤法 ​编辑方差过滤 ​编辑- 相关性过滤 - 卡方过滤 - F检验 - 互信息法 ​编辑嵌入法&#xff08;Embedded&#xff09; 包装法&#xff08;Wrapper&#xff09; 特征工程的第一步&#xff1a;理解业务 如…...

编程日记 2023/5/30 21:02:22

Linux C/C++并发编程实战（0）谈谈并发与并行

作为并发编程的第一讲&#xff0c;比较轻松&#xff0c;我们先来谈谈什么是并发和并行。 并发&#xff08;Concurrency&#xff09;是指一个处理器同时处理多个任务。 并行&#xff08;Parallelism&#xff09;是指多个处理器或者是多核的处理器同时处理多个不同的任务。 并发…...

编程日记 2023/5/30 21:03:48

2023年5月天津/南京/成都/深圳CDGA/CDGP数据治理认证报名

6月18日DAMA-CDGA/CDGP数据治理认证考试开放报名中&#xff01; 考试开放地区&#xff1a;北京、上海、广州、深圳、长沙、呼和浩特、杭州、南京、济南、成都、西安。其他地区凑人数中… DAMA-CDGA/CDGP数据治理认证班进行中&#xff0c;报名从速&#xff01; DAMA认证为数据管…...

编程日记 2023/5/19 2:26:29

【MySQL】MySQL批量插入测试数据的几种方式

文章目录 前言一、表二、使用函数生成设置允许创建函数产生随机字符串产生随机数字 三、创建存储过程插入角色表插入用户表 四、执行存储过程小结五、使用 Navicat自带的数据生成 前言 在开发过程中我们不管是用来测试性能还是在生产环境中页面展示好看一点, 又或者学习验证某…...

编程日记 2023/5/31 19:04:14

PowerShell install 一键部署virtualbox

VirtualBox 前言 VirtualBox 是一款开源虚拟机软件。VirtualBox 是由德国 Innotek 公司开发&#xff0c;由Sun Microsystems公司出品的软件&#xff0c;使用Qt编写&#xff0c;在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。Innotek 以 GNU General Public Licens…...

编程日记 2023/5/30 1:29:29

CTF权威指南 笔记 -第四章Linux安全机制-4.1-Stack Canaries

目录 Stack Canaries 简介 我们进行简单的例子 64 32 checksec Stack Canaries 是对抗栈溢出攻击的技术 SSP安全机制 Canary 的值 栈上的一个随机数 在程序启动时 随机生成并且保存在比返回地址更低值 栈溢出是从低地址向高地址进行溢出 如果攻击者要攻击 就一定要覆…...

编程日记 2023/5/19 2:11:24

KDZD400Q便携式三氯乙烯浓度检测仪

一、产品概述 检测仪用于快速检测多种气体浓度、温湿度测量并超标报警的场合。采用2.31寸高清彩屏实时显示&#xff0c;选用进口品牌的气体传感器&#xff0c;主要检测原理有&#xff1a;电化学、红外、催化燃烧、热导、PID 光离子等。 可以检测管道中或受限空间、大气环境中的…...

编程日记 2023/5/30 21:04:58

C++11 部分新特性

1. 关键字和语法 1.1 nullptr 空指针&#xff0c;能够和整数0进行区别&#xff0c;因为#define NULL 0 1.2 类中非静态成员变量定义时初始化 & 初始化列表 1.3 auto 可推导出右值类型&#xff0c;从而得知左边变量类型。 简单使用示例&#xff1a; auto func() {retur…...

编程日记 2023/5/19 2:01:21

selenium通过performance log获取状态码，Conten-Type，以及重定向路径

selenium的官方不提供获取状态码&#xff0c;Conten-Type&#xff0c;以及重定向路径的方法&#xff0c;并且官方说这些功能将来也不会有。java - How to get HTTP Response Code using Selenium WebDriver - Stack Overflow 非官方的方法大概有下面几种 1.通过requests重新请…...

编程日记 2023/6/1 7:31:53

GL绘制自定义线条3_自定义线帽

安卓Path搭配Paint可以设置线帽&#xff0c;我想能不能把我自己的线条绘制Demo也加上类似的功能。 线头规则描述&#xff1a; 1、设一个线宽一半的线段&#xff0c;坐标为(0, 0)到(-lineWidth / 2, 0)。 2、设步骤1的线段有一垂直于它的向量(0&#xff0c;1)&#xff0c;然后传…...

编程日记 2023/5/29 16:20:27

【AGC】新版鸿蒙崩溃SDK集成使用方法

【背景】 我们知道AGC的Crash SDK都是需要强制集成华为分析SDK的&#xff0c;在使用时的崩溃数据上报都要依靠分析服务来完成&#xff0c;这就容易受到限制&#xff0c;有时出现无数据的情况就要依次排查崩溃SDK与分析SDK&#xff0c;比较麻烦。而就在不久前&#xff0c;鸿蒙崩…...

编程日记 2023/5/30 15:30:36

vue-7：组件库（移动端vant）（PC端element）

移动端vant 插件安装&#xff08;按需导入&#xff09; 重启生效 # 通过 npm 安装 npm i unplugin-vue-components -D# 通过 yarn 安装 yarn add unplugin-vue-components -D 导入基于 vite 的项目&#xff1a; 如果是基于 vite 的项目&#xff0c;在 vite.config.js 文件中…...

编程日记 2023/5/31 8:15:16

JavaScript中splice()、slice()、split()三种方法的区别，及使用详细

简介&#xff1a;splice、slice、split是JavaScript中&#xff0c;比较常用的三个数组方法&#xff0c;表面看起来有点相像&#xff0c;用处却大不相同&#xff0c;今天就来分别介绍下它们的用法。 1、splice()方法 splice方法可以用来删除数组中的元素&#xff0c;或者向数组…...

编程日记 2023/5/29 16:21:17

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/11/16 14:05:01

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/12/11 20:28:10

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/12/14 22:06:49

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/12/13 7:09:55