JS的调用方式和执行循序

使用方式

HTML 页面中的任意位置加上<script type="module"></script>标签即可。

常见使用方式有以下几种：

  • 直接在<script type="module"></script>标签内写 JS 代码。
  • 直接引入文件：<script type="module" src="/static/js/index.js"></script>。
  • 将所需的代码通过import关键字引入到当前作用域。

例如：

/static/js/index.js文件中的内容为：

1
2
3
4
5
6
let name = "acwing";
function print() {
  console.log("Hello World!");
}

export { name, print };

<script type="module"></script>中的内容为：

1
2
3
4
5
6
<script type="module">
  import { name, print } from "/static/js/index.js";

  console.log(name);
  print();
</script>

执行顺序

  1. 类似于 HTML 与 CSS，按从上到下的顺序执行；
  2. 事件驱动执行；

HTML, CSS, JavaScript 三者之间的关系

  1. CSS 控制 HTML
  2. JavaScript 控制 HTML 与 CSS
  3. 为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在 HTML 中调用 JavaScript 中的函数。