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