Web前端入门第 88 问：引入 JavaScript 的 script 标签究竟有多少用法？
HTML 版本不停的更新迭代，也导致浏览器支持的写法眼花缭乱，就拿 script 标签来说，刚刚入行的那会儿就只知道用来写内联的 js 代码，后来又学到了引入 js 文件，ES 模块规范化之后又知道能用来引入模块化的 js 代码，可这就是它的全部了吗？？然而...并不是！！！
各种用法
看看 script 千奇百怪的用法，一定有你没见过的~~
1、内联脚本
如文章开头说的一样，直接用来写内联脚本，本公众号大部分文章都是使用内联脚本的方式所写：
2、引入外部脚本
使用 src 属性直接引入外部脚本，这是目前大部分前端项目的用法，虽然 vite 直接使用 ES 模块化打包，但要兼容低版本浏览器还是得转成普通的 js 文件引入：
3、defer 延迟
标签的 defer 属性可以控制脚本异步加载，并且能让脚本顺序执行：
以上脚本就算写在 head 标签中，也不会阻止 dom 解析，而且 script2.js 一定是在 script1.js 之后执行。
4、async 异步
async 也能控制脚本异步加载，但不同的是 async 加载的脚本无法保证脚本执行顺序。
以上脚本没办法保证 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
7、跨域控制
crossorigin 属性用于控制跨域请求的凭据传递：
[*]anonymous：不发送凭据（如 Cookies）
[*]use-credentials：发送凭据
8、ES 模块
使用 type="module" 即可在 script 标签内使用 ES 模块语法，这与浏览器的版本有关，一些低版本可能并不支持！！
9、nomodule 兼容
nomodule 属性，用于兼容不支持 ES 模块的浏览器，如果浏览器不支持 ES 模块，则 nomodule 属性下的脚本会被执行，反之则不会执行。
10、动态导入
ES 模块允许在代码执行时导入模块，此方式就称之为 动态导入：
11、模块映射
type="importmap" 属性允许指定 ES 模块的映射关系，在后续书写时候就不必再写完整的模块路径，可以只写模块名：
12、模版字符串
利用自定义的 type 属性，可以将一些 HTML 字符串写在 script 标签中，比如 vue 的模版字符串：
实验性属性
[*]fetchpriority：允许指定外部脚本的加载优先级。有效值：high/low/auto
[*]blocking：可以指定在脚本加载时，浏览器中的页面渲染应该被阻断。有效值：render
写在最后
强大的 script 标签早就不止用于写 js 代码了，各种用法真是让人眼花缭乱，一不小心就踩到没见过的用法~~
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/script
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]