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