html-import-javascript-to-html-file

介绍

今天来点简单的，如何在html文件中引入并使用javascript文件，这看起来是一个非常简单的问题，但是对于习惯了使用前端框架的我们来说，其实并不简单，如果大家不查资料，仅凭记忆来写，可能很多人都写不出来。

我们先从简单的开始，先回顾一下如何在HTML中使用普通的javascript文件。

在HTML中使用普通的javascript文件

编写javascript文件

首先我们编写一个简单的javascript文件math.js，文件内容很简单，只包含一个加法函数add，代码如下：

// math.js
function add(a, b) {
  return a + b;
}

在html文件中引入javascript文件

在同一目录下新建一个文件index.html，然后引入前面定义的javascript文件，并调用add函数，代码如下。

<html lang="en-US">
  <head>
    <script src="math.js"></script>
  </head>
  <body>
    <div id="result"></div>
    <script>
      const sum = add(1, 2);
      document.getElementById("result").innerText = "Sum: " + sum;
    </script>
  </body>
</html>

解释一下上面的代码：

在<head>标签中使用<script src="math.js"></script>引入math.js文件，这样就可以在后续的脚本中使用math.js中定义的函数了。
在<body>标签中，我们有一个<div>元素用于显示结果，id为result。
在<body>标签的最后，我们有一个内联的<script>标签，在这里我们调用了add(1, 2)函数，并将结果显示在result元素中。

用浏览器打开这个html文件，页面会显示Sum: 3。
到现在为止，一切正常，现在我们更进一步，采用ES6的模块化语法来重写这个例子。

在HTML中使用ES6模块

我们修改math.js文件，使用ES6的export语法来导出add函数，代码如下：

// math.js
export function add(a, b) {
  return a + b;
}

此时刷新浏览器，你应该会看到如下错误信息：

1	Uncaught SyntaxError: Unexpected token 'export'

为什么呢？从报错信息来看，浏览器并不认识export这个token，这说明浏览器无法识别ES6模块化语法。
所以我们需要告诉浏览器这是一个模块化的脚本，方法是给<head>中的<script>标签添加type="module"属性，代码如下：

1
2
3

<head>
  <script type='module' src="math.js"></script>
</head>

再次刷新浏览器，你会发现还是不行，报错信息变成了：

1	Uncaught ReferenceError: add is not defined

从报错信息来看，浏览器找不到add函数，原因是对于ES6模块导出的方法，我们是不能直接调用的，必须使用import语法来导入，修改index.html文件如下：

<body>
  <div id="result"></div>
  <script>
    import { add } from "./math.js"; /* 导入add函数 */
    const sum = add(1, 2);
    document.getElementById("result").innerText = "Sum: " + sum;
  </script>
</body>

这次应该没啥问题了吧，再次刷新浏览器，发现还是报错：

1	Uncaught SyntaxError: Cannot use import statement outside a module

为什么呢？
这是因为我们在body中的<script>标签中使用了import语法，但是这个<script>标签并没有指定type="module"属性，所以浏览器认为这是一个普通的脚本，而不是一个模块化的脚本。普通脚本是无法导入ES6模块的。

继续修改index.html文件，给body中的<script>标签添加type="module"属性，代码如下：

<script type="module">
  import { add } from "./math.js";
  const sum = add(1, 2);
  document.getElementById("result").innerText = "Sum: " + sum;
</script>

再次刷新浏览器，终于不报错了。

怎么样，是不是没有那么简单？我们来总结一下吧：

总结

HTML中使用普通的javascript脚本

定义普通的javascript文件，直接编写函数。
在html文件中引入这个javascript文件时，使用<script src="..."></script>标签引入。
在html文件中调用这个函数时，直接使用函数名调用即可。

HTML中使用ES6模块化脚本

首先定义ES6模块化的javascript文件，使用export语法导出函数。
在html文件中引入这个javascript文件时，必须给<script>标签添加type="module"属性。
在html文件中调用这个模块化的函数时，必须使用import语法导入，并且也要给<script>标签添加type="module"属性。

祝大家编程愉快！觉得有用就点个关注吧！