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

Web前端入门第 88 问:引入 JavaScript 的 script 标签究竟有多少用法?

HTML 版本不停的更新迭代,也导致浏览器支持的写法眼花缭乱,就拿 script 标签来说,刚刚入行的那会儿就只知道用来写内联的 js 代码,后来又学到了引入 js 文件,ES 模块规范化之后又知道能用来引入模块化的 js 代码,可这就是它的全部了吗??

然而...并不是!!!

各种用法

看看 script 千奇百怪的用法,一定有你没见过的~~

1、内联脚本

如文章开头说的一样,直接用来写内联脚本,本公众号大部分文章都是使用内联脚本的方式所写:

<script>const name = '公众号:前端路引'console.log(name)
</script>

2、引入外部脚本

使用 src 属性直接引入外部脚本,这是目前大部分前端项目的用法,虽然 vite 直接使用 ES 模块化打包,但要兼容低版本浏览器还是得转成普通的 js 文件引入:

<script src="project/path/script.js"></script>

3、defer 延迟

标签的 defer 属性可以控制脚本异步加载,并且能让脚本顺序执行:

<script defer src="project/path/script1.js"></script>
<script defer src="project/path/script2.js"></script>

以上脚本就算写在 head 标签中,也不会阻止 dom 解析,而且 script2.js 一定是在 script1.js 之后执行。

4、async 异步

async 也能控制脚本异步加载,但不同的是 async 加载的脚本无法保证脚本执行顺序。

<script async src="project/path/script1.js"></script>
<script async src="project/path/script2.js"></script>

以上脚本没办法保证 script1.js 一定会先执行!!!此属性一般多用于加载与项目流程无关的一些 js 文件,比如说:统计代码、广告代码等等。

5、动态加载脚本

使用 js 创建 script 标签引入 js 文件,即可实现 js 脚本的动态加载:

const script = document.createElement('script');
script.src = 'dynamic.js';
script.onload = function () {console.log('dynamic.js 加载成功!');
}
script.onerror = function () {console.log('dynamic.js 加载失败!');
}
// 脚本插入到页面中才会开始加载
document.head.appendChild(script);

6、资源完整性校验

integrity 属性能用于校验资源是否被篡改,详细算法参考:https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity

<script src="https://cdn.xxx.com/jquery.js" integrity="sha384-...">
</script>

7、跨域控制

crossorigin 属性用于控制跨域请求的凭据传递:

<script src="https://other-domain.com/script.js" crossorigin="anonymous"></script>
  • anonymous:不发送凭据(如 Cookies)
  • use-credentials:发送凭据

8、ES 模块

使用 type="module" 即可在 script 标签内使用 ES 模块语法,这与浏览器的版本有关,一些低版本可能并不支持!!

<script type="module" src="main.mjs"></script>
<script type="module">import { foo } from './foo.js';
</script>

9、nomodule 兼容

nomodule 属性,用于兼容不支持 ES 模块的浏览器,如果浏览器不支持 ES 模块,则 nomodule 属性下的脚本会被执行,反之则不会执行。

<script nomodule src="project/path/fallback.js"></script>

10、动态导入

ES 模块允许在代码执行时导入模块,此方式就称之为 动态导入

<script type="module">const isMobile = navigator.userAgent.match(/mobile/i);if (isMobile) {import('./project/path/mobile.js').then(module => {module.default();})}
</script>

11、模块映射

type="importmap" 属性允许指定 ES 模块的映射关系,在后续书写时候就不必再写完整的模块路径,可以只写模块名:

<script type="importmap">
{"imports": {"lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm"}
}
</script>
<script type="module">import _ from "lodash"; // 实际加载 CDN 资源_.chunk([1, 2, 3], 2);
</script>

12、模版字符串

利用自定义的 type 属性,可以将一些 HTML 字符串写在 script 标签中,比如 vue 的模版字符串:

<script type="text/x-template" id="index"><div class="index"><h3>点击历史记录跳转会保存滚动条位置</h3><p v-for="(item,index) in list" :key="index"><template v-if="index % 8 !== 0">{{ index }}</template><template v-else><p><a href="javascript:;" @click="$router.go(1)">历史记录前往下一页</a></p><router-link :to="{ name: 'details' }">跳转前往详情页</router-link></template></p></div>
</script>
<script>var list = (new Array(50)).fill('1')Vue.component('Index', {template: '#index',data: function () {return {list: list}},})
</script>

实验性属性

  • fetchpriority:允许指定外部脚本的加载优先级。有效值:high/low/auto
  • blocking:可以指定在脚本加载时,浏览器中的页面渲染应该被阻断。有效值:render

写在最后

强大的 script 标签早就不止用于写 js 代码了,各种用法真是让人眼花缭乱,一不小心就踩到没见过的用法~~

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/script

http://www.hskmm.com/?act=detail&tid=28513

相关文章:

  • 我如何控制新增的节点是 leader 还是follower呢?
  • Nuxt3项目Warn:Browserslist: browsers data (caniuse-lite) is 6 months old.
  • 2025 年全屋定制 / 高端 / 装修收纳设计 / 不锈钢橱柜 / 别墅 / 大平层装修公司推荐:苏州伍德家居与百能家居的优质定制解决方案解析
  • 1_数组
  • SAS重要证明结论
  • 2025 年蒸汽发生器厂家最新推荐排行榜:含 800KG 燃气 / 超低氮冷凝 / 400KG 燃气等多类型设备企业优选指南
  • 基于MATLAB的遗传算法(GA)和CPLEX两种方法解决TSP问题
  • 创建数字遗嘱:为亲人留下数字足迹指南
  • 全网首发/Qt结合ffmpeg实现rist推拉流/可信赖的互联网流媒体协议/跨平台支持各个系统
  • 2025 年最新推荐压缩机厂家排行榜:聚焦医药 / 医疗 / 食品 / 冷链 / 工业领域优质企业及核心优势盘点
  • 2025 年灌装机厂家最新推荐权威榜单:聚焦全自动液体定量灌装设备,精选饮用水 / 纯净水 / 矿泉水灌装领域优质企业
  • 2025 年灌装生产线厂家最新推荐排行榜:覆盖饮料 / 矿泉水 / 纯净水 / 桶装水 / 全自动生产线,助力企业精准选购优质设备权威榜单
  • 改了 Nacos 一行配置,搞崩线上支付系统!
  • Vue 创建项目的几种方式
  • 推荐系统评估、偏见与算法解析
  • 从零开始部署Android环境的Jenkins CI/CD流水线(docker环境,Win强大的系统)
  • Gitee Insight领跑DevSecOps赛道:2025研发效能工具全景评测
  • 最小二乘法的直线拟合
  • Vue3 集成 VueRouter
  • 2025 年车床生产厂家最新推荐排行榜:涵盖数控 / 卧式 / 斜床身 / 重型等多类型设备,助力企业精准选购优质车床品牌
  • 2025 最新球墨铸铁管件厂商推荐排行榜权威发布,市政 / 给排水 / 消防用管件优选品牌深度解析
  • 2025 年加工中心厂商最新推荐排行榜权威发布,涵盖立式 / 卧式 / 龙门 / 四轴 / 五轴等机型,助力采购方精准筛选实力厂商
  • CH585在MACOS系统中协商BLE连接间隔至7.5ms
  • 2025 年磨床厂家最新推荐排行榜:平面磨床 / 外圆磨床 / 数控磨床等优质设备品牌深度解析与核心竞争力测评
  • python实现提取iso中的文件(支持多平台)
  • 2025 年最新推荐球墨铸铁管厂家排行榜:涵盖自来水 / 污水 / 消防等多场景适用优质品牌权威推荐
  • CopyOnWriteArrayList 的故事--一起看看java原生的读写分离
  • OSI模型-笔记
  • Docker概念
  • 痞子衡嵌入式:如果i.MXRT1xxx在Hab关闭时出现偶发性启动失败,请先检查JTAG电路